行业知识
CSS-显示模式，背景，盒子模型
1. 元素显示模式
Document p, span, input { width: 200px; height: 200px; background-color: aquamarine; /* 设置元素显示模式 display block 块元素 inline 行内元素 inline—block 行内块元素 nono 取消显示模式，标签隐藏不显示 */ display: block; } 块状元素1 块状元素2 行内元素1 行内元素2 �� 块级元素和行内元素的区别：
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
2. CSS三大特性
层叠性：
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这时一个属性就会将另一个属性层叠掉。
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 记住：就近原则。
继承性：
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
优先级：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下:
1. 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
2. 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提到的选择器都大的优先级。
3. 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
4. CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
Document /* 继承性：父标签和子类标签之间样式可以继承，但只限于对字体的样式更改 */ p { color: white; width: 100px; height: 100px; display: block; background-color: blue; font-size: 25px; } 内容 文本内容 3. CSS背景
Document p { width: 700px; height: 1200px; /* 背景颜色 */ background-color: aqua; /* 背景图片 */ background-image: url(./imgs/01.jpg); /* 是否重复平铺 no-repeat 不重复 repeat-x 沿x轴重复 repeat-y 沿y轴重复 repeat x和y轴都重复 默认 */ background-repeat: no-repeat; /* background-repeat: repeat-x; */ /* 背景图片位置 先x后y 可以写百分比，也可以写数字 还可以写方位名词 ，写方位名词时不区分x和y轴 如果只写一个方位名词，另一个默认居中 下 bottom 上 top 左 left 右 right */ /* background-position: 20% 30%; background-position: 20px 50px; */ background-position: right; /* 设置固定和滚动 fixed 固定 scroll 滚动 默认滚动 */ background-attachment: scroll; /* 控制图片大小，100%则填满容器 */ background-size: 100% 100%; } 4.盒子模型
4.1 盒子边框
Document p { background-color: aquamarine; width: 300px; height: 300px; /* 设置边框 */ border: 10px solid; /* 单独设置边框，如设置上边框 */ border-top-color: brown; border-top-width: 20px; border-top-style: solid; /* 同时设置上边框的宽度，风格，颜色 */ border-top: 25px solid red; /* 设置四个边框 */ border-color: black; border-width: 20px; border-style: double; /* 同时设置四个边框的宽度，风格，颜色 */ border: 30px solid red; } 4.2 表格的细线边框
之前的table表合并边框会让两个相邻的边框紧挨在一起，导致边框粗细变为两倍。只需要添加border-collapse: collapse;便可以去除重复的边框。或者是只设置外边框的左边框和下边框，在设置单元格的右边框
Document /* table { border-top: 1px solid; border-left: 1px solid; border-spacing: 0px; } td { border-bottom: 1px solid; border-right: 1px solid; } */ table, td { border: 1px solid; /* 合并重复边框 */ border-collapse: collapse; } | 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
4.3 圆角边框
radius 半径 （距离）
Document p { width: 50px; height: 20px; border: 1px solid; /* 设置圆角边 */ border-radius: 20%; }
4.4 内边距
padding 属性设置内边距，指边框与内容之间的距离。
Document /* a { */ /* background-color: red; */ /* padding-left: 0%; padding-top: 0%; padding-bottom: 0%; padding-right: 0%; */ /* 对上下左右各设置10内边距 */ /* padding: 10px; */ /* 两个值 : 上下20 左右10 */ /* padding: 20px 10px; */ /* 三个值 : 上10 左右20 下30 */ /* padding: 10px 20px 30px; */ /* 四个值 : 上 右 下 左 */ /* padding: 10px 20px 30px 40px; */ /* } */ * { margin: 0; } p { border-top: 3px solid #ff8400; border-bottom: 1px solid #EDEEF0; color: #4C4C4C; } a { display: inline-block; height: 50px; line-height: 50px; padding: 0 20px; color: #4C4C4C; text-decoration: none; } p>a:hover { color: #ff8400; background-color: #EDEEF0; } 登录设为首页手机新浪网移动客户端 4.5 外边距
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
Document p { /* 文本居中 */ text-align: center; width: 300px; height: 300px; background-color: aqua; /* 使用外边距,使盒子居中 */ /* 取值方式同padding一样 */ margin: 0 auto; } 内容 4.5.1 外边距合并
相邻块元素垂直外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象称为相邻块元素垂直外边距合并(也称为外边距塌陷)。
嵌套块元素垂直外边距合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及外框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
