CSS | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第2天
一、在页面中使用CSS
1.外联
<link rel="stylesheet" href="">
2.嵌入
<style>
li {
margin: 0;
}
</style>
3.内联
<p style="text-align: center">kkk</p>
二、CSS的工作模式
三、选择器selector
选择元素的方式：
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
1.通配选择器*
2.标签选择器
3.id选择器(#+idname)
id需要是页面中唯一的值,否则可能出现一些预期外的情况。
4.类选择器(.+classname)
5.属性选择器
i. 选中有该属性的标签
[disabled] {
background: red;
color: blue;
}
ii.选中某属性为某特定值的标签
input[type="password"] {
border-color: red;
color: red;
}
iii.选中属性值的开头为xxx的标签
a[href^='#'] {
color: #f54767;
backgro
iv.选中属性值的结尾为xxx的标签
a[href$='.jpg'] {
color: #f54767;
background: 0 center/lem;
}
6.伪类选择器
:link 默认状态下
:visited 访问过的
:hover 鼠标移到标签上
:active 鼠标按下去
:focus 鼠标点进输入框
7.结构选择器
li:first-child {
color: coral;
}
li:last-child {
color: coral;
}
选择器组
组合
四、常见CSS属性
1.颜色
alpha透明度
0为全透明，1为不透明
2.字体
font-family
不同设备能够接受的字体不同，一般font-family会设置多个字体，设备会从前往后进行匹配找到第一个可用的字体并使用它进行展示。一般font-family最后一个放通用字体族。
使用Web Fonts
font-size
关键字：small,medium,large
长度：px,em(表示倍数)
百分数：相对于父元素字体大小的百分比
font-style
italic 斜体
normal 正常
font-weight
权重：100-900 (从细到粗)
normal-400 bold-700
line-height
两行文字基准线之间的距离
line-height 不带单位时表示倍数（相对于字体大小）
letter-spacing & word-spacing
字母间距 和 单词间距
white-space
normal-正常
nowrap-强制不换行
pre-保留所有的空格和换行
pre-wrap 保留空格，会换行
pre-line 合并空格，会换行
五、选择器的特异度
六、继承
和文字相关的属性可以继承，和模型相关的属性不可继承（如宽度）
显式继承 inherit
初始值
七、CSS求值过程
八、布局相关技术
- 常规流
- 浮动
- 绝对定位
1.height
2.padding
给一个值：四个方向的padding都是同一个值
给两个值：上下方向为第一个值，左右方向为第二个值
给四个值：按上右下左顺序依次赋值
3.border
制作小三角形
把宽高设置为0，通过设置不同的border颜色，得到四个小三角形，把其中的三个设置为透明即可。
4.margin
margin:auto 水平居中
上面的标签下边距为100px,下面的标签上边距为100px，他们垂直方向的距离实际上取两者的max,即100px。
5.border-box
border-box宽度=border宽度+padding宽度+内容宽度
6.overflow
- visible: 直接显示超出部分
- hidden: 隐藏超出部分
- scroll: 滚动显示
- auto: 未超出则正常显示，超出则滚动
八、块级元素和行级元素
九、Flex Box
在有空间剩余的情况下，有flex-grow属性的元素按值的比例伸展填充剩余空间。
