css学习笔记
在html引入css的三种方式
<link rel="stylesheet" href="style.css">
嵌入
p1{
background-color: #00500F;
font-size: 2em;
text-align: center;
}
内联
<p style="background-color: #00539F;
font-size: 2em;
text-align: center;">
Hello World！ 内联
</p>
css选择器
* {
box-sizing: inherit;
}
标签选择器
p {
margin: 1em 0;
}
id选择器 （#+id）
#example {
font-size: 2em;
line-height: 1.6;
color: red;
}
类选择器 （.+ class)
.error {
color: orange;
}
属性选择器
/* 选中所有的禁用的输入框 */
input[disabled] {
background: #ddd;
color: #999;
cursor: not-allowed;
}
伪选择器
a:link {
color: black;
}/* 未访问过的链接 */
a:visited {
color: gray;
}/* 已访问过的链接 */
a:hover {
color: orange;
}/* 鼠标移到链接上的样式 */
a:active {
color: red;
}/* 鼠标在连接上按下时的样式 */
:focus {
outline: 2px solid red;
} /* 获得焦点时的样式 */
选择器的组合
直接组合E,F，用,隔开
p,.warning {
background-color: #00800F;
} #p标签和warning类组合
后代组合 E F 用空格隔开
div p {
color: coral;
} # 选择div的后代p元素
亲子组合 E>F 用>隔开
div>p {
color: coral;
} # 选择div的子代p元素
毗邻选择器E+F 用+隔开
div+p {
color: coral;
} #选择匹配所有紧随div元素之后的同级元素p
同级选择器E~F
div~p {
color: coral;
} #选择匹配所有div元素之后的同级元素p</pre>
伪类选择器
:first-child
:only-child
:last-child
:nth-child(A)
:nth-last-child(A)
:first-of-type
:nth-of-type(An+B)
:only-of-type
:last-of-type
:empty
:not(X) #反选
选择器的优先规则
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
参考：css选择器笔记 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
css选择器参考手册 http://www.w3school.com.cn/cssref/css_selectors.asp
css选择器优先级：https://www.cnblogs.com/zxjwlh/p/6213239.html
样式的覆盖规则
根据引入方式确定优先级：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”
在同一级别后写的属性覆盖先写的：即就是在文件上代码行号更高的优先级更高
加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。
-
层叠顺序
当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来。
如果两个元素是块级元素，文字比背景层级高（因此不管是否设置背景文字始终会透上来）。
如果是行内或行内块，背景比文字层级高（因此只要设置背景，后一个元素将透不上来）。
-
层叠优先级
开发者样式>读者样式>浏览器样式（除非使用!important标记）
id选择符>（伪）类选择符>元素选择符
权重相同时取后面定义的样式
参考：CSS层叠顺序https://www.cnblogs.com/pssp/p/5948356.html
层叠优先级https://blog.csdn.net/cookcircle/article/details/82750050
css字体
- css五种通用字体
serif字体
Sans-serif字体
Monospace字体
Cursive字体
Fantasy字体
- px，em，rems的区别
px:绝对像素单位
em:1em等于当前设计元素的父元素上设置的字体大小。相对像素单位
rem:1rem等于HTML中的根元素的字体大小
边距叠加
触发原因：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
-
解决方法
浮动元素 使用inline-block
创建块级元素的上下文（BFC）
CSS布局
position属性的取值
absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。
relative:生成相对定位的元素，相对于其正常位置进行定位。
static:默认值。没有定位，元素出现在正常的流中
inherit:从父元素继承 position 属性的值</pre>
自适应宽度分栏实现形式https://wenku.baidu.com/view/7328508fd0d233d4b14e69c6.html
圣杯布局，双飞翼布局的实现https://blog.csdn.net/wangchengiii/article/details/77926868
网格布局学习网站
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
