CSS盒子

css三大特性

       css三大特性  层叠性  继承性   优先级

        层叠性---主要解决样式冲突的问题---就近原则，样式不冲突，就不重叠

        继承性---子标签会继承父标签的一些样式,继承的样式（text- font- line- color 这些元素开头的可以继承）高度，内外边距不可以继承

css不可继承的属性

1. 边框属性（border）

2. 内边距属性（padding）

3. 外边距属性（margin）

4. 定位属性（position）

5. 大小属性（width、height）

6. 背景属性（background）

7. 盒模型属性（box-sizing）

css可继承的属性

1. 字体属性（font）

2. 文本属性（text）

3. 颜色属性（color）

4. 列表属性（list）

5. 表格布局属性（table-layout）

6. 元素可见性属性（visibility）

7. line-height, 如果子元素没有设置行高，则会继承父元素的行高1.5;则此时子元素的行高为， 当前元素的文字大小*1.5

优先级:

        !important(在样式后面写) > 行内样式  > ID > 类 / 伪类选择器 > 标签选择器 > 继承或*  

 /* 但要注意，继承的权重是0，不管父元素权重多高（哪怕带有 !important），子元素得到的权重都是0，子元素本身的权重更高*/

div{
    color:red!important
  }

p {
    color:pink  虽然父元素更高，但显示的是子元素本身的
  }
        

 a链接:

        浏览器默认制定了一个样式，蓝色的，有下划线，不会继承，可重新给a添加样式，用的是层叠性

权重叠加

        复合选择器会有权重叠加(累加), 不会进位

        /* 0001+0001=0002 */

        ul li {
            color: green;
        }

        /* 0001 */
        li {
            color: red;
        }

        /* 0010 + 0001 = 0011 */
        .nav li {
            color: pink;
        }

        /* 0010 没有变  */
        .first {
            color: yellow;
        }

盒子模型

页面布局三大核心 ： 盒子模型 浮动 和定位

网页布局过程

  1、先准备好相关的网页元素，网页元素基本都是盒子

  2、利用css设置好盒子样式，然后摆放到相应位置

网页布局的核心本质：利用CSS摆盒子

盒子包括：边框border、外边距margin、内边距padding和实际内容 content

边框

boder设置元素的边框：宽度boder-width 样式border-style  颜色border-color

边框会额外增加盒子的实际大小

    1、测量盒子大小的时候，不量边距

    2、如果测量的时候包含了边框，则需要width/height减去边框宽度，分左右上下，所以要减去双倍

边框和并：boder-collapse:collapse;相邻边框合并在一起(边框合并会发生重叠，此属性可消除重叠)

内边距

盒子内容和边的距离

    保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距（以及边框)

                 一个值：表示上下左右

                两个值：上下 左右

                三个值： 上  左右  下

                四个值：上 右 下 左（顺时针）

        padding重点及技巧

    1.   *  如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

    2.    padding内边距可以撑开盒子，我们可以做非常巧妙的运用

         因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度，直接给padding最合适

     3.   上填充=下填充 使用line-hright, 让a标签垂直居中        

外边距

外边距可以实现让块级盒子水平居中(对行内元素和行内块元素无效-----行内块应用text-align:center)

        1、盒子必须指定宽度（块级元素）

        2、左右外边距设置为auto

            常见写法：margin: 0 auto;（块级盒子水平居中）

相邻块元素垂直外边距的合并：（会发生塌陷）

        当上下相邻的两个块元素相遇时，如果上面的元素有margin-bottom,下面的元素也有则它们之间的垂直间距取二者之间较大者

        嵌套块元素垂直外边距的塌陷，父子同时具有margin-top,则此时父元素会塌陷较大的外边距值

       解决方案--------

        1、可以为父元素定义上边框border，

        2、可以为父元素定义内边距padding

        3、可以为父元素添加overflow:hidden

清除内外边距：

浏览器带有默认的边距，可清除

        * {
            margin: 0;
            padding: 0;
        }

清除a下划线，以及li标签自带的样式

a {
    text-decoration: none;
  }


li {
    /* 去掉li前面的小圆点 */
    list-style: none;
   }