了解CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第4天
分享要点：
- CSS 概述
- CSS 选择器
- 设置文本样式
- CSS 工作原理
- CSS 布局
-
- 盒模型
- Flex 布局
- Grid
- 定位
一、如何在页面中使用CSS
1、内联式
直接在标签内添加style属性来控制该标签内容
<p style="font-size:26px;color: pink;">
字体大小26px
</p>
2、嵌入式
在<head></head>内添加<style></style>来选择控制相应的内容
<style>
p{
font-size:26px;
color: pink;
}
</style>
3、外联式
链接外部CSS文件来更改当前页面的内容的样式
<link rel="stylesheet" href="../css/lianxi.css">
二、CSS的使用
CSS用来定义元素的样式，例如设置字体的大小和颜色，内容的位置和长宽，还有给内容添加各种动画效果。 CSS用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。 并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。 优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。
1、伪类选择器的组合方式：
同样的选择器还能写在全部写在一起，叫做选择器组，用它来实现统一控制页面内容样式。
p,h1,h2,div{
font-size: 28px;
color: #999;
}
2、盒模型分类
有两种盒模型，其规则各不同，分别为content-box与border-box，可以通过box-sizing来设置，其中默认值为content-box
content-box
content-box中padding和border不被包含在定义的width和height之内，所以其元素的宽度与高度等于设定的高度与宽度与对应方向的padding与border的和
例如下面的盒子，默认为content-box
.box {
width:100px;
padding:20px;
border:1px solid black;
}
其宽度为：100px+(20px+1px)*2 = 142px
border-box
border-box中padding和border被包含在定义的width和height之内，所以其宽度和高度取决于设定的宽度与高度
.box {
box-sizing:border-box;
width:100px;
padding:20px;
border:1px solid black;
}
其宽度为：100px
三、CSS工作原理
浏览器打开页面的时候，会加载页面的HTML进行渲染，解析出HTML的DOM树，同时加载出CSS并且解析CSS，然后浏览器会把DOM树的每个节点解析出来，再将对应的CSS样式渲染到DOM树里面，最终展示出设置好的效果。
四、布局的相关技术
页面内会有多个容器，用CSS来控制对应容器的内容来实现页面的布局。 布局常用的相关技术有三种，常规流、浮动、绝对定位。
常规流就是使用常规的块级元素和行内元素等在页面进行布局排版，如果不进行其他操作，页面内容会从上往下，从左到右来进行排列。
浮动就是让指定的容器漂浮起来，它可以覆盖掉块元素，但是不会覆盖行内元素。
绝对定位就是将子元素控制在父元素内的指定位置，它是相对于父元素的位置。
