CSS 盒子特性

一、CSS三大特性

CSS 有三个非常重要的三个特性：层叠性、继承性、优先级.

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式.
层叠性原则:

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

2.继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

继承之a标签特殊情况
补充知识：a标签的字体颜色不能继承

行高的继承性：

 body {
   font:12px/1.5 Microsoft YaHei；
 }

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小 * 1.5
• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生.

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

/*行内样式表  >  ID选择器 > 类选择器 > 标签选择器*/
        /*
        行内样式是：1000
        ID选择器：100
        类选择器：10
        标签选择器：1
        */

优先级注意点:

1. 权重是有4组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值.

4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0.

二、盒子模型

网页三大核心：盒子模型 浮动 定位

盒子模型组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

1.边框（border）

**1.**border可以设置元素的边框。边框有三部分组成：边框宽度(粗细), 边框样式 ,边框颜色；

2.语法：

• border-width:边框的粗细 一般单位是px
• border-style :边框的样式(none默认值|solide 实线|dotted 点线 | dashed 虚线)
• border-color: 边框的颜色

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

边框简写:

 border : border-width || border-style || border-color; 

边框分开写法：
top,right,bottom,left

 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */  

2.表格的细线边框

border-collapse: collapse; 相邻边框合并在一起

边框影响盒子大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

3.内边距（padding）

内边距的使用方式

• padding-left 左内边距
• padding-right 右内边距
• padding-top 上内边距
• padding-bottom 下内边距

padding简写属性

• padding: 10px 上下左右都是10px
• padding: 10px 20px 上下10 左右 20
• padding: 10px 20px 30px 上10 左右20 下30
• padding: 10px 20px 30px 40px 上10 右20 下30 左40

padding影响盒子大小

网页上显示的盒子大小: 宽高 + 内边距+边框

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

4.外边距（margin）

外边距：盒子与盒子之间的距离

• margin-left 左外边距
• margin-right 右外边距
• maring-top 上外边距
• margin-bottom 下外边距

margin简写方式和padding一致

块级盒子水平居中对齐

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto; 
margin: auto; 
margin: 0 auto (实际工作中使用比较多)

行内块元素居中

文字居中：text-align:center
盒子居中：margin: 0 auto

外边距塌陷

解决方式：

① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden

清除内外边距

/* 以后写css都要写这句代码 清除内外边距 */
      * {
        margin: 0;
        padding: 0;
      }
      span {
        background-color: red;
        margin: 20px;
        /* 转换为块级元素就可以设置 */
        /* display: block; */
 }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

列表默认样式
去掉li前面的圆点

 list-style: none;