脚断整理——CSS篇之盒子模型

盒子模型应该属于模块内容，不过内容较多，单独开篇

盒子模型

盒子模型 = Content + padding + border + margin

div{
	width:300px;
	border:20px solid #666666;
	padding:25px;
	margin:25px;
}

<div>这是一个盒子</div>

border：

• border-width 边框大小
  取值：px、em单位，thick，medium，thin
• border-style 边框样式
  取值：
  none：无样式
  dotted：点线
  dashaed：虚线
  solid：实线
  double：双线
  groove：3D凹面
  ridge：3D浮雕
  inset：3D上斜面
  outset：3D下斜面
• border-color 边框颜色
  需要与border-style一起才起作用

border 简写
border: border-width border-style border-color

单独控制单边边框：

• border-top: 5px solid red;
• border-right-style:dotted;
• border-bottom-style: solid;
• border-left-style:double;

border-style:dotted solid double dashed;

• 上边框：dotted
• 右边框：solid
• 底边框：double
• 左边框：dashed

border-style:dotted double dashed;

• 上边框：dotted
• 左、右边框：double
• 底边框：dashed

border-style:dotted double;

• 上、下边框：dotted
• 左、右边框：double

border-style:dotted;

• 四边边框：dotted

border-radius 圆角
border-radius: 上左 上右 下右 下左;

outline

outline是位于边框边缘的一条线。

outline轮廓属性

• outline-color
• outline-style
• outline-width

小贴士：outline是不占空间的，既不会增加空间，也不会增加额外的width或height

padding

padding定义元素边框与元素内容之间的空间。

padding: px、百分比等

指定不同侧面的padding：
padding-top: 25px;
padding-bottom: 20px;
padding-right: 50px;
padding-top: 12px;

填充简写：
padding: 25px 50px 30px 70px;
上、右、下、左

padding: 20px 50px 30px;
上、左右、下

padding: 30px 20px;
上下、左右

padding: 30px;
上下左右

注意事项：
行内元素上下margin无效

magin

margin定义元素周边的空间。
margin没有背景颜色，是完全透明的。

属性同padding

注意事项：

• 行内元素上下margin无效
• margin: 0 auto 可以让块级元素水平居中
  1. 必须是块级元素，且必须有固定的width
  2. text-align: center; 控制的是盒子内部的文字或者内部的行内块
     margin:0 auto; 控制的是盒子本身
• 若上下相邻的两个块级元素，上元素有margin-bottom，下元素有margin-top，则两个元素的垂直间距取 margin-bottom 和 margin-top 之间的较大者。
• 两个父子块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上外边距合并。即使父元素的上外边距为0，也会发生合并。
  解决方法：
  1. 删除子元素margin-top，父元素增加padding-top:50px;
  2. 可以为父元素增加 “border-top:1px solid #ccc” 或 “padding-top: 1px”;
  3. 给父元素添加 overflow: hidden;

  <style>
	.father{
		width:300px;
		height:300px;
		background: red;
	}
	.son{
		width:250px;
		height:100px;
		background:bulue;
		margin-top:50px;
	}
  </style>

	<div class="father">
		<div class="son"></div>
	</div>

格式化内外边距

*{
	padding:0;
	margin:0;
}