这是我参与「第五届青训营」伴学笔记创作活动的第三天

一、本堂课重点内容

1.选择器的特异度（Specificity）

id>伪类>标签

2.CSS的继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

 < p > This is a < em > test </ em > of < strong > inherit </ strong ></ p 
< style >
 body {
 font - size :20px;
      }
 p{
 color : blue ;
      }
 em {
 color : red ;
      }
</ style >

3.CSS的显示继承

*{
   box - sizing : inherit ;
 }
 html {
   box - sizing : border - box ;
 }
● some - widget {
 box - sizing : content - box ;
 }

4.CSS布局（Layout）是什么？

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容信息来计算

5.CSS布局相关技术

常规流

1.行级 2.块级 3.表格布局 4.FlexBox 5.Grid布局

浮动
绝对定位

6.块级vs行级

Block Level Box（块级）适用于所有的盒模型属性 display:block

body、article、div、main、section、h1-6、p、ul、li等

Inline Level Box（行级）盒模型中的width、height不适用 display:inline

span、em、strong、cite、code等

7.块级排版上下文 Block Formatting Context ( BFC )

根元素
浮动、绝对定位、 inline - block
Flex 子项和 Grid 子项
overflow 值不是 visible 的块盒
display : flow - root ;

BFC 内的排版规则

盒子从上到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

8.行级排版上下文 Inline Formatting Context ( IFC )

IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text - align 决定一行内盒子的水平对齐
vertical - align 决定一个盒子在行内的垂直对齐
避开浮动（ float ）元素＊

二、重要知识点

1.初始值

CSS 中，每个属性都有一个初始值，background - color 的初始值为 transparent， margin - left 的初始值为0
可以使用 initial 关键字显示重置为初始值· background - color : initial

2.width

指定 content box 宽度
取值为长度、百数数、 auto
auto 由浏览器根据其它属性确定
百分数相对于容器的 content box 宽度

3.height

指定 content box 高度
取值为长度、百分数、 auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

4.padding

指定元素四个方向的内边距
百分数相当于容器宽度

5.border

指定容器边框样式、粗细和颜色

border-width
border-style
border-color

6.margin

指定元素四个方向的外边距
取值可以是长度、百分数、 auto
百分数相对于容器宽度

7.overflow

visible
hidden
scroll
auto

8.display属性

block 块级盒子
inline 行级盒子
inline - block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略

9.flex-grow/flex-shrink

flex - grow 有剩余空间时的伸展能力

flex - shrink 容器空间不足时收缩的能力

三、代码练习

1.使用margin：auto水平居中

< div ></ div >
< style >
 div {
      width :200px;
      height :200px;
      background : coral ;
      margin - left : auto ;
      margin - right : auto ;
</ style >

flex - grow

. container { display : flex ;}
. a ,. b ,. c {width :100px;}
.a{
       flex - grow :2;
  }
.b{
       flex - grow :1;
  }
</ style >

四、个人总结

通过这节掘金课程的学习，让我更深入了解了CSS的布局和排版，学会了FlexBox和Grid布局，理解了float浮动。

前端与 CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第三天