CSS三大特性：层叠性，继承性，优先级
层叠性：样式重叠(冲突)，则执行距离标签最近的样式。就近原则，样式不冲突，不会重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
font-size: 20px;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>huahau</p>
</body>
</html>
继承性：后代标签会继承父标签的样式，并不是所有的样式都能继承，当text-，font-，line-这些元素开头的和color可以继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>huahau</p>
</div>
</body>
</html>
行高另一种取值方式，例如1.5表示当前文字大小的1.5倍，这样写的好处就是可以根据文字大小自动调整行高。
优先级：
对同一个元素指定了多个选择器时，选择器相同则执行层叠性，选择器不同，则根据选择器选中来确定优先级
div {
color: red!important;
font-size: 20px;
}权重有4组数字组成，不会进位，判断时是从左侧开始，若左侧相同，则判断下一位
不管父元素权重有多高，子元素权重都是0
复合选择器有权重叠加的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>huahau</p>
</div>
</body>
</html>
div p 的权重是0001+0001 = 0002
p的权重是0001
不会有进位指的是：000 9+000 1 = 000 10
左侧数值比较：0011 和0002 前者权重大
页面布局的三大核心：盒子模型，浮动，定位。
盒子模型：装内容的盒子(容器)，包括边框，内外边距，实际内容
margin外边距表示该盒子与其他盒子的距离
border可以设置元素的边框，由三部分组成：边框宽度，边框样式，边框颜色
| border-width | 定义边框宽度，单位是px | |
| border-style | solid实线 dashed虚线 dotted点线 | 定义边框样式 |
| border-color | 定义边框颜色 |
border复合时：border：border-width border-style border-color没有顺序
边框有4条边，可以分开设置：border-top，border-bottom，border-left，border-right
表格的细线边框：对于表格，之前设置的空隙为0，但是边框会叠加到一起，例如边框为1px，叠加到一起就是2px，因此更好的实现方式是：border-colllapse：collapse表示相邻边框合并在一起。
注意点：边框的宽度会影响盒子的大小，例如设置盒子的宽度和高度为200px，边框的宽度为10px，则最终体现的盒子大小是220px*220px，因此设置盒子的尺寸时，要用宽度和高度减去边框的宽度。
内边距：边框与内容之间的距离。
padding-top，padding-left，padding-right，padding-bottom
可以简写padding属性：
| padding：20px | 内边距全为20px |
| padding：20px 30px | 上下内边距为20px，左右为30px |
| padding：20px 30px 40px | 上内边距20px，左右内边距30px，下内边距40px |
| padding：5px 20px 30px 40px | 分别是上，左，下，右，顺时针 |
padding也会影响盒子的大小，如果盒子设定了宽度和高度，再指定内边框，会撑大盒子，同样用宽度和高度减去内边距大小就可以解决了。
综上，可以认为设置的盒子的宽度和高度实际设置的是内容区域的尺寸
如果盒子本身没有指定宽度和高度，则指定内边距不会撑大盒子
外边距：设置盒子与盒子之间的距离
margin-top，margin-bottom，margin-left，margin-right
简写方式和padding一样
应用点：外边距可以让块级盒子水平居中，首先满足两个条件：1.盒子必须指定宽度，盒子左右外边距设置为auto。
常用的写法：margin-left：auto，margin-right：auto
margin：auto
margin：0 auto 表示上下外边距为0px，左右自动
若想让行内元素或行内块元素水平居中，则给其父元素添加text-align：center即可。
外边距合并问题：
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素，上元素有下外边距为10px，下元素有上外边距20px，则两个元素之间的垂直间距不是下外边距和上外边距的和，而是这两者的最大值。
解决方案：只给一个盒子添加外边距
2.嵌套块元素垂直外边距的塌陷
当嵌套关系的两个块元素，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大 是外边距值
解决方案：1. 为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加overflow：hidden 这个常用，因为使用前两种方法还要调整盒子大小。
清除内外边距：
网页元素例如li，很多都带有默认的内外边距，而且不同浏览器默认的可能不一样，所以需要自己去布局，首先就要清除所有网页元素的内外边距
* {
padding:0;
margin:0;
}行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就行了。
圆角边框：
CSS3新增样式，border-radius设置元素的边框圆角
border-radius：r r是半径。
r可以是数值和百分数的形式
正方形-圆形：数值为高度或宽度的一半或50%
矩形-椭圆：数值为高度的一半或50%
分开设置4个角的圆度：borde-top-left-radius，borde-top-right-radius，borde-bottom-left-radius，borde-bottom-right-radius
盒子阴影：
box-shadow：h-shadow v-shadow blur spread color inset；
| h-shadow | 必需，水平阴影的位置，允许是负值(正值为右，负值为左) |
| v-shadow | 必需，垂直阴影的位置，允许是负值(正值为下，负值为上) |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色，通常是rgb(0,0,0,.3) |
| inset | 可选，将外部阴影(outset)改为内部阴影，默认是外部阴影，不可以写outset，否则阴影失效 |
盒子阴影不占用空间，不会影响其它盒子的布局
文字阴影：
text-shadow：h-shadow v-shadow blur color；
同盒子阴影
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
