目录
盒子的组成
内容区（content）其中显示文本和图像。
内边距（padding）清除内容周围的区域。内边距是透明的。
边框（border）围绕内边距和内容的边框。
外边距（margin）清除边界外的区域。外边距是透明的。
- width：设置盒子内容区的宽度
- height：设置盒子内容区的高度
- 盒子可见边框的大小由内容区，内边距和边框共同决定
-
元素的总宽度应该这样计算：元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
-
元素的总高度应该这样计算：元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
边框
border
是以下各个边框属性的简写属性：
- border-width
- border-style（必需）
- border-color
p {
border: 5px solid red;
}
p {
border-left: 6px solid red;
background-color: lightgrey;
}
border-width
1.指定四个边框的宽度。（一个值时上下左右。两个值 上下 左右 。三个值 上 左右 下）
2.可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。
3.还有border-top-width，border-right-width ，border-bottom-width，border-left-width，专门用来设置指定边的宽度。
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}border-color
1 指定四个边框颜色
2 border-top-color，border-right-color ，border-bottom-color，border-left-color，专门用来设置指定边的颜色。
border-style
1 指定要显示的边框类型。
2 允许以下值：
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
内边距
padding
1 此属性用于在任何定义的边界内的元素内容周围生成空间。通过 CSS，可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。（如：padding-top padding-right padding-bottom padding-left）
2 所有内边距属性都可以设置以下值：
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
div {
padding: 25px 50px 75px 100px;
}/*规则同上*/内边距和元素宽度 width
此指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
div {
width: 300px;
padding: 25px;
}
/*<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）*/box-sizing
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
/*使用 box-sizing 属性将宽度保持为 300px，无论填充量如何*/盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
可见框的宽度=border-top-width+padding-top+height+padding-bottom+border-bottom-width
外边距
margin
1 此属性用于在任何定义的边框之外，为元素周围创建空间。通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。
2 拥有用于为元素的每一侧指定外边距的属性：
- margin-top
- margin-right
- margin-bottom
- margin-left
3 所有外边距属性都可以设置以下值：允许负值（反方向移动）
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
/*以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。*/
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
/*inherit 值
本例使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）*/
4 简写属性同上
p {
margin: 25px 50px 75px;
}
/*上外边距是 25px 右和左外边距是 50px 下外边距是 75px*/垂直方向的布局
overflow
1 此属性规定当内容溢出元素框时发生的事情
div
{
width:150px;
height:150px;
overflow:scroll;
}这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
例1 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 如果父子元素的外边距相邻了，则子元素的外边距会设置给父元素
行内元素的盒模型
行内元素不能设置width和height
行内元素可以设置padding，但垂直方向的padding不会影响页面的布局。
行内元素可以设置border，但是垂直的border不会影响到页面的布局
行内元素可以设置margin，垂直方向不影响。
display
用来设置元素显示的类型
p.inline
{
display:inline;
}
/*使段落生出行内框*/visibility
h2
{
visibility:hidden;
}
/*使 h2 元素不可见*/浏览器默认样式
- 重叠样式表 专门用来对浏览器的样式进行重置
- reset.css 直接去除了浏览器的默认样式
- normalize.css 对默认样式进行了统一
默认样式
-通常情况，浏览器会设置默认样式，会影响页面布局。
*{
margin: 0;
padding: 0;
}/*清除默认样式*/
扫一扫
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
