这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课堂笔记
课堂重点内容
- CSS代码构成
- CSS使用方法
- CSS流程之选择器、文本渲染
- 调试CSS
- CSS选择器的特异性
- CSS继承
- CSS求值过程的解析
- CSS布局方式及相关技术
- 常规流
- 浮动
- 绝对定位
详细知识点介绍
CSS代码构成
CSS代码由选择器组成，选择器中包含选择器属性及其属性值，两者共同组成一条声明。
CSS使用方法
- 外链：内容和样式分离
- 嵌入：把内容和样式放在同一个文件中，样式在head标签里，内容在body标签里
- 内联：把样式直接放在标签本身的style中
选择器
- 基础选择器：
- 通配选择器：用※表示，对所有内容使用
- 标签选择器：直接用标签表示，对指定的一类标签使用
- id选择器：使用#号表示，对指定的一类标签中的某一个或某些id对应的标签使用
- 类选择器：使用.表示，对指定的一类标签中的某一个或某些类对应的标签使用
- 属性选择器：使用[]表示对存在该属性值得标签使用
- 伪类选择器：使用'标签名：状态值'表示，对标签的不同状态使用不同的选择器
- 静态伪类：对指定标签使用
- 动态伪类：对所有标签使用
- 结构伪类：根据父级节点中的相对位置选中标签使用
- 组合选择器：多个选择器组合使用，对组合选择器均满足的标签使用(A、B表示标签)
- 直接组合：A+B
- 后代组合：AB
- 亲子组合：A>B
- 兄弟选择器：A~B
- 相邻选择器：A+B
- 选择器组：选择器之间用,分隔，对多个标签均使用该选择器
文本渲染
- 颜色：
- RGB红绿蓝三原色：rgb(0-255,0-255,0-255)
- HSL色相饱和度亮度：hsl(0-360,0-100%,0-100%)
- alpha透明度：rgba(0-255,0-255,0-255,0-1)、hsla(0-360,0-100%,0-100%,0-1)
- font-family:字体
- 预设字体：指定多个字体，在字体组中逐层寻找系统中存在的字体去展示
- Web Fonts：在src中放web font的url，使用在线字体
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "webfont";
src: url('https://code.z01.com/font/ZoomlaXingtiJ6.woff') format("woff");
}
#test {
font-family: webfont !important;
}
</style>
</head>
<body>
<p id="test">测试字体1号</p>
<p>测试字体2号</p>
</body>
- font-size：字体大小
- px：绝对单位
- em:相对单位
- %：相对单位
<style>
#one {
font-size: 20px;
}
#two {
font-size: 2em;
}
#three {
font-size: 80%;
}
</style>
</head>
<body>
<ul>
<li id="one">20px字体大小测试</li>
<li id="two">2em字体大小测试</li>
<li id="three">80%字体大小测试</li>
</ul>
</body>
- font-style：字体风格
- normal text:正常字体
- Italic Text：斜体
<style>
.normal {
font-style: normal;
}
.italic {
font-style: italic
}
</style>
</head>
<body>
<p class="normal">字体测试</p>
<p class="italic">字体测试(斜体）</p>
</body>
- font-weight:字重，字的粗细
- 数字表示：100-900
- 字母表示：normal（相当于400）、bald（相当于700）
<body>
<p style="font-weight: 400;">400字重</p>
<p style="font-weight: normal;">normal字重</p>
<p style="font-weight: 700;">700字重</p>
<p style="font-weight: bold;">bold字重</p>
<p style="font-weight: 100;">100字重</p>
<p style="font-weight: 200;">200字重</p>
<p style="font-weight: 300;">300字重</p>
<p style="font-weight: 400;">400字重</p>
<p style="font-weight: 500;">500字重</p>
<p style="font-weight: 600;">600字重</p>
<p style="font-weight: 700;">700字重</p>
<p style="font-weight: 800;">800字重</p>
<p style="font-weight: 900;">900字重</p>
</body>
-
line-heigh:行高
-
text-align:文本对齐
- center：居中对齐
- left：左对齐
- right：右对齐
-
text-decoration：文本装饰
- none：无装饰，可用于去除a标签中url自带的下划线
- underline：文本下下划线
- line-through：穿过文本的线
- ocerline：文本上划线
-
text-indent:段前缩进
- 单位： px、em、%
-
white-spacing：空白符的处理方式
CSS选择器的特异度
当多个选择器匹配到同一个标签时，标签采用哪个选择器由选择器的特异度决定，优先使用特异度高的选择器
CSS继承
-
继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值
-
初始值：每一个属性都有一个初始值，如果一个标签及其父级标签均未设值，则会采用初始值，也可以采用initial显示地设置初始值
-
部分属性不能被继承，可以才采用显示集成，使用通配选择器将属性设置为inherit以显示继承
CSS求值过程
- 确定声明值：参考样式表中没有从图的声明作为CSS属性值
- 层叠冲突：对样式表有冲突的声明值使用层叠规则，确定CSS属性值
- 使用继承：对仍然没有值得属性，若可以继承，则继承父级元素的值
- 使用初始值：对仍然没有值得属性使用初始值
布局及其相关技术
-
布局：确定内容展示大小及位置的算法
-
布局相关技术：
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
- 常规流
-
盒子模型：宽width+高height+内边距pading+边框border+外边距margin
- height：如果高度使用百分数表示，只有容器有指定的高度时，百分数才生效
- pading：使用百分数表示时百分数相对于容器宽度
- margin：百分数相对于宽度
- box-sizing: border-box 让声明的width值包含内容的宽、padding、border
- overfloat：指定溢出盒子的文本的展现形式
常规流
总体规则：块级元素独占一行，行级元素水平依次排列
- 行级排版上下文（IFC）
- text-align: 决定一个盒子的水平对齐
- vertical-align：决定一个盒子的垂直方向对齐
- 避开浮动元素
- 块级排版上下文(BFC)
- 盒子从上到下摆放
- 垂直方向的margin会合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
- Flex Box
- justify-content：指定主轴方向的对齐
- align-items：指定侧轴方向的对齐
- flex-grow：弹性设置元素扩展空间
- flex-shrink：弹性设置元素压缩空间
- flex-basis：元素原本的宽度，不压缩不扩展
- Grid布局
- 先划分格子后摆放元素
float浮动
可以实现文字环绕效果
绝对定位
- position
- static：默认值
- relative：相对自身原本位置偏移，不脱离常规流，对其他元素无影响
- absolute: 绝对定位，脱离常规流，相对最近的非static祖先定位，不会对布局造成影响
- fixed：相对视口绝对定位，脱离常规流
- sticky:粘性定位，元素固定在页面的某个位置，会随着页面滚动而始终在同一位置
课后个人总结
- 脱离常规流/文档流：不按照常规流定位
- 为什么要清除浮动：浮动会让元素脱离常规流，影响其他元素的展示，所以有必要清除浮动
- 清除浮动的四种方式：
- 给父级元素添加高度
- 在浮动元素末尾添加一个额外的块元素标签，设置属性
- 给父级元素添加voerflow：hidden属性
- 给父级添加after伪元素，利用after伪元素定义一个clearfix类
