这是我参与「第四届青训营」笔记创作活动的第2天。
一、属性
1.diabled属性
disabled属性代表禁用；
例如：
<input type="text" value="007" disabled />代表着这个文本输入框不可填写内容！
2.选择器
<style>
[disabled]{
Background: #eee;
color: #999;
}
</style>
上述内容的意思是：只要元素有disabled这个属性,就选中这个元素
<style>
input[type=”password”]{
Border-color: red;
Color: red;
}
</style>
上述内容的意思是：代表input标签中属性type的值为”password”才选中
a[href^=”#”] //代表选中href属性值以”#”开头的a标签
a[href$=”#”] //代表选中href属性值以”#”结尾的a标签
3.伪类
状态伪类:指的该元素在和用户交互的某一种状态，例如“a:hover”表示用户把鼠标放在<a>标签上面的状态。
结构伪类:例如“li:first-child”与“li:last-child”代表的是列表中的第一个元素与最后一个元素
4.元素组合
AB: 直接组合
A B: 后代组合，选中B，如果B在A的后面
A>B: 亲子组合，选中B，如果B是A的子元素
A~B：兄弟选择器，选中B，如果它在A后面并且跟B同级
A+B：相邻选择器，选中B，如果它在A后面并且是A后面的第一个兄弟元素
二、颜色RGB
颜色的alpha透明度: 0是表示完全透明; 1是不完全透明
“Rgba”、“hsla”中的a表示的是alpha透明度
三、深入CSS
1.特异度
选择器的特异度（Specificity）计算公式：
（#（id）、.（类或伪类）、E(标签)）。例如“.top #id1 a h .bottom”的特异度值为122。
2.继承
继承：**某些**属性会自动继承其父元素的计算值，除非显式指定一个值（width等属性不可继承）
显示继承 box-sizing:inherit
3.初始值
在CSS中，每个属性都有一个初始值。例如background-color的初始值为transparent；margin-left的初始值为0。
可以使用initial关键字显式重置为初始值，例如Background-color：initial。
四、CSS布局
布局相关技术：常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位
1.盒子模型
盒子模型的注意事项：
“margin:auto”为水平居中
margin在垂直方向上会取值更大的边距，以下方的code为例，类别为a的div块级元素和类别为b的div块级元素的垂直距离不是30px，而是20px。
<style>
.a{
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.b{
width: 100px;
height: 100px;
margin-top: 20px;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
2.块级元素与行级元素
块级元素:适用所有的盒模型属性
行级元素:盒模型中的width、height不适用；（width和height是由其内容决定的）
display的属性值"inline-block"：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
3.Flex布局
flex-direction：控制容器的流向
主轴：摆放的方向（对齐属性justify-content）
侧轴：与主轴垂直（对齐属性align-items）
Flexibility
flex-grow：向外伸展
flex-shrink：向内收缩
4.Grid属性
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr;
//fr的意思是fraction
5.float属性
现阶段，float属性的作用是实现文字环绕。
6.position属性
static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流（使用top、left、bottom、right设置偏移）
absolute：脱离常规流；相对于最近的非static祖先定位
fixed：相对于窗口定位（滚动时永远固定在页面）
sticky：例子为“本来不在顶部，滑动着滑动着就吸附在顶部”
写在最后：
1.学习CSS的几点建议
2.充分利用MDN和W3C CSS规范
3.保持好奇心，善用浏览器的开发工具
4.持续学习，CSS新特性还在不断出现
