css小知识 | 青训营笔记

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

在页面中使用css

外链

<link rel="stylesheet" href="...">

嵌入

li{margin:0}
p{color:red}

内联

<p style="margin:lem 0"></p>

css中的选择器Selector

标签选择器 : h1{}
类选择器 : .class{}
id选择器 : #id{} (id唯一)
组选择器 : #box1,.box2,p{}
通配符选择器 : *{margin:0,padding:0}
后代选择器 : p.aa{}
子元素选择器 : 父元素 > 子元素{}
伪类选择器 : a:hover、a:visited、a:link 等等
属性选择器 : checked,disabled,a[href^="#"](表示所有以 # 开头的a标签),a[href$=".jpg"](表示所有以 .jpg 结尾的a标签)等等
兄弟选择器： h2~p{}
相邻选择器 : h2+p{}

css选择器的优先顺序

在同一属性的不同值都作用到了同一个元素时，如果定义的属性之间有冲突，那么要用谁的值，这就涉及到css的优先级顺序了。

在属性后面使用！important会覆盖页面内任何位置定义的样式
行内样式
id选择器
类选择器
标签选择器
通配符选择器
继承过来的样式
浏览器默认属性

继承：自动继承父元素的属性如strong ，一般来说，与文字相关的都是可以继承的，与盒模型相关的都是不可以继承的

css颜色

hsl(18,66%,55%)

rgb(255,255,255)

rgba(255,255,255,0.5)

hsla(360,100%,100%,.5)

css调试 ctrl+shift+I
css求值过程

CSS布局

常规流：行级，块级，表格布局，flexbox，grid布局。

浮动

绝对定位

容器有指定高度时，百分数才生效。
可以只设置边框宽度，不设置盒子大小，然后三边框隐藏，来实现画一个三角形
margin:auto 水平居中 (要设置宽度）   margin collapse
box-sizing:border-box  包含了border 和padding在内

块级元素 body article div main section h1-6 p ul li 等 display：block
行级元素 span em strong cite code 等 display:inline

IFC 与 BFC

IFC：只包含行级元素的容器会创建一个 IFC（盒子在一行内水平摆放，一行放不下是，换行显示，text-align 决定一行内盒子的水平对齐，vertical-align 决定一个盒子在行内的垂直对齐，避开浮动（float）元素

BFC：某些容器会创建一个 BFC（根元素，浮动元素，绝对定位，inline-block ，Flex子项和Grid子项，overflow 值不是visible的块盒，display：flow-root）(盒子从上到下摆放，垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠)

Flexbox布局方式 flexibility  给盒子设置弹性（空间不足时压缩，充足时扩展）
grid布局 (Flex布局是一维的，但是grid布局是二维的）

前端css小知识