CSS笔记 - 盒模型

盒模型

目录

• 盒模型
  • 1. 内容区
  • 2. 边框
  • 3. 内外边距
  • 4. 行内元素的盒模型

1. 内容区

• 元素中的所有子元素和文本内容都在内容区中排列
• CSS将页面中的所有元素都设置为一个矩形的盒子，对页面的布局就相当于将不同的盒子摆放到不同的位置。
• 盒模型组成部分：
  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

2. 边框

• 边框处于盒子边缘，是盒子内部和外部的分界线。边框的大小会影响到整个盒子的大小

• 边框的常用属性：

  • 边框的宽度 border-width

  • 边框的颜色 border-color

  • 边框的样式 border-style

    • 实线 solid
    • 点状虚线 dotted
    • 虚线 dashed
    • 双线 double

  .box{
  	/*content部分属性设置*/
  	width: 200px;
  	height: 200px;
  	backgroud-color: green;
              
  	/*设定边框宽度*/
  	border-width: 10px;
              
  	/*设定边框颜色*/
  	border-color: orange;
              
  	/*设定边框样式*/
  	border-style: solid;
              
  	/*以下三个属性都可以被设置为none*/
  	border-width:none;
  	border-color:none;
  	border-style:none;
              
  	/*border简写设置*/
  	border: solid 10px orange;
  	border-top:solid 10px orange;
  }
  

3. 内外边距

• 内容区和边框之间的距离称为内边距（padding）

  • 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

  边框之外的区域称为外边距（margin）

  • 外边距不会影响可见框的大小，但是外边距会影响盒子的位置和实际占用空间

  • 默认情况下设置的左和上外边距会移动盒子自身，而设置的下和右边距会移动其它元素

  .box{        
  	padding: 10px;
  	padding: 10px 20px 30px 40px;
  	margin: 10px;
  	margin-bottom: 10px;
  }
  

4. 行内元素的盒模型

• 行内元素不支持设置宽度和高度

  行内元素可以设置padding，但垂直方向padding不会影响页面的布局

  行内元素可以设置border，但垂直方向的border不会影响页面的布局

  行内元素可以设置margin，但垂直方向的margin不会影响页面的布局