CSS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天浏览器渲染过程选择器类型与权重一般选择器

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

选择器类型与权重

一般选择器

!important 永远最大
行间style = "" 1000
ID选择器 100
.类选择器 10
标签选择器 1
*通配符选择器 0 选择器的权重可以叠加，叠加后依据权重最大的选择器给与样式！

伪类选择器

:hover 移到元素上触发
:active 点击元素时触发
:focus 聚焦时触发，可用在文本元素上
:link 没有被访问过的链接
:visited 被访问过的链接
:checked 元素被选中时触发，可以在input类型为radio或checkbox时使用

盒子模型

CSS属性中的width和Height表示为Content的宽高。
Content的高度有固定值时百分数无效。
边框
- border: 1px solid black
- border-left: 1px solid black 也可以指定一边

图片参考：菜鸟教程

布局

常规流
- 行、块、表格、FlexBox、Grid
浮动
绝对定位

display

块级

body、article、div、main、section、h1-6、p、ul、li 等
display: block
BFC 块级排版上下文规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
会创建BFC的元素
- 根元素html
- 浮动元素(float不为none)、绝对定位元素(position为absolute或fixed)
- 元素的dispaly为inline-block/flex/grid/flow-root
- overflow 值不是 visible 的块盒

行级

span、em、strong、cite、code 等
display: inline
IFC 行级排版上下文规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*

display : none

排版时被忽略，在页面上上看不到

FlexBox

div{
    display:flex;
    flex-direction:row/column/row-reverse/column-reverse  水平/垂直/反向
    justify-content:center/flex-start/flex-end/space-between/space-around/space-evenly     水平方向布局
    align-item:center/flex-start/flex-end/stretch/baseline      垂直方向布局
}

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

flex
flex: 1	flex-grow: 1
flex: 100px	flex-basis: 100px
flex: 2 1	flex-grow: 2; flex-shrink: 1
flex: 1 100px	flex-grow: 1; flex-basis: 100px
flex: 2 0 100px	flex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: auto	flex: 1 1 auto
flex: none	flex: 0 0 auto

grid布局

网格布局：使元素生成一个块级的 Grid 容器

div{
   /* 声明一个网格布局容器 */
    display: grid;
    /* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
    grid-template-columns: repeat(3,200px);
    /* 声明行间距和列间距 */
    grid-gap: 20px;
    /* 分别表示两行的高度 */
    grid-template-rows: 100px 200px;
}

参考资料

overflow

控制内容溢出元素框时在对应的元素区间内添加滚动条。只工作于指定高度的块级元素上。值 | 描述 | | ------- | ---------------------------- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。|

参考资料

position

static 默认值
relative 相对于自身位置偏移，不脱离流
absolute 绝对定位，相对非static元素定位，脱离流
fixed 相对视口绝对定位