这是我参与「第四届青训营」笔记创作活动的第2天

一、CSS继承

1.什么是CSS继承

某些属性会自动继承父元素的计算值，除非显式指定一个值，就称为CSS继承。

如果不给子元素单独设置属性，他就会继承其父元素的属性：
如果单独设置子元素属性，则不会继承其父元素属性：

2.继承的局限性

有些设置在父元素上的属性是不能被继承的，比如border，background等。

常见的可以继承的属性：font-size、font-family、color、list-style、line-height、text-align、cursor等
不可继承的属性：width、height、border、padding、margin、background等。

3.控制继承的属性

inherit：设置该属性使子元素属性与父元素相同。即"开启继承"。
initial：设置属性值和浏览器默认样式相同。即显示设置该样式初始值。
unset：不设置，对于默认可以继承的属性取其父元素的继承值(inherit)，不可以继承的属性取默认值(initial)
css求值过程：

二、CSS布局

1.常规布局

对页面不做任何的布局控制，它会按照源码的先后顺序展示，这是浏览器原始的布局方式。

先看一下块级元素和行级元素的对比

块级元素	行级元素
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆分成多行
适用所有的盒模型属性	盒模型中的width、height不适用
生成块级盒子	生成行级盒子内容分散在多个行盒中
display：block	display：inline

display属性：block（块级）
                      inline(行内)
                      inline-block（行内块）
                      none:排版时被忽略

2.flex布局（弹性布局）

设置flex布局后，子元素的float、clear、vertical-align属性将会失效
设置flex属性，首先设置一个容器

容器的属性

- flex-direction:控制主轴的方向。默认值：row

- flex-wrap：定义换行方式。默认值：nowrap

- flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式。
- justify-content：定义元素在主轴上的对齐方式。默认值：flex-start

- align-items:定义元素在交叉轴上如何对齐。默认值：flex-start

- align-content：定义多根轴线的对齐方式。若只有一根轴线该属性不起作用。

容器的子元素

- order：指定flex子元素的排列顺序。数值越小越靠前，可为负。默认值：0

- flex-grow: 指定flex子元素的扩展比例。默认值：0 表示不会扩展
- flex-shrink: 指定flex子元素的收缩比例。默认值：1，表示所有子项剩余空间为负数时，等比例收缩。
- flex-basis：指定flex子项占据的空间，不可以为负数。值：auto 、length、percentage、content
- flex：复合属性，flex-grow、flex-shrink、flex-basis的简写，用来指定flex子项如何分配空间。

3.常规操作

flex设置元素水平垂直居中对齐

.box{
   display: flex;
   justify-content: center;
   align-items: center;
}

导航栏制作

    ul{
        display: flex;
        list-style: none;
        background-color: aqua;       
       }
    li{
        flex: 1;
        text-align: center;
        line-height: 50px;
    }

增加元素，导航弹性变化

3. Grid布局

将容器划分成”行“和”列“，产生单元格，然后指定”项目所在“的单元格。

1.划分网格
- 网格线
- 网格区域

grid-column-start、grid-column-end、grid-row-start、grid-row-end：指定项目的具体位置，根据网格线
grid-area：指定项目放在哪一个区域。 "."符号代表空的单元格。例：

2. 容器属性
- grid-template-columns：定义每一行的列宽
- grid-template-rows：定义每一行的行高
- grid-gap：定义行间距和列间距，是grid-row-gap 和 grid-column-gap的缩写
- repeat函数：简化重复的值。参数1：重复的次数；参数2：所要重复的值。

 <style>
        .container{
            margin: 50px;           
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: 100px 100px 100px;
        }
   </style>
<div class="container">
        <div style="background-color: pink;">1</div>
        <div style="background-color: green;">2</div>
        <div style="background-color: rgb(222, 111, 111);">3</div>
        <div style="background-color: yellowgreen;">4</div>
        <div style="background-color: yellow;">5</div>
        <div style="background-color: rgb(112, 112, 234);">6</div>
        <div style="background-color: rgb(197, 108, 197);">7</div>
        <div style="background-color: orange;">8</div>
        <div style="background-color: rgb(51, 200, 165);">9</div>
    </div>

结果如图所示：

- auto-fill 关键字：表示自动填充。让一行或者一列尽可能多的容纳更多的单元格。

- auto：由浏览器决定长度。
- fr：表示网格容器可用空间的1等份。比如1pr、2pr表示容器可用空间分为两份，前者占剩余宽度1/3,后者占剩余宽度2/3.
- minmax(): 给设置元素设置最小和最大的尺寸。参数1：最小值；参数2：最大值。

深入理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天