理解 CSS ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。内第一节： - CSS代码构成 -

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

今天的CSS课程对我来说仍是查漏补缺 一、本堂课重点内容：

第一节：

CSS代码构成
CSS使用方法
CCS选择器组、文本选择
CSS调试

第二节：

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术

第三节：

行级
块级

二、详细知识点介绍：

CSS基础语法

CSS=cascading style sheets 层叠样式表，用来定义页面元素的样式、字体、颜色、位置、大小、动画效果，语法格式选择器{property：value}
引入CSS：外链、嵌入、内联,一般都是外链（组建式）外链：<link rel="stylesheet" href="/assets/style.css"> 嵌入：<style>p{margin: 1em 0;}</style> 内联：<p style="margin: 1em 0"> a</p>一般都是改组件库
CSS工作过程
选择器：通配*、标签、id、类、属性[]、伪类
伪类：状态伪类（eg：a:link/hover/visited/active、:focus）、结构性伪类（eg:li:first/last-child)
类的组合
颜色&透明度：rgba-#8位或者rgb(255,255,255,0.8), hsla(18,91%,84%,0,2)
字体 font-family:Optima,……;便于浏览器自动匹配，最后一定要有通用字体族，英文写在前。还有@font-face，加入web-font，载入URL的字体包。
行高line-height
字间距等
white-space:normal/nowrap/pre/pre-wrap/pre-line;处理换行和空白

选择器特异度

选择器的继承

一般情况下，文字自动继承父元素的属性，盒模型不继承
显式指定继承
初始值initial
css求值过程

计算值直接算了使用，如font-size、相对路径，使用值可能结合渲染环境（如指定了max-width和body，或者有时继承到的是父级的计算值）
布局layout：确定内容的大小和位置，结合元素、容器、兄弟节点等。分为常规流、浮动、绝对定位

布局技术
盒模型：content+padding+border+margin
一般指定width和height是指定content-box，百分数是相对于容器的content-box的高度，容器有指定高度时，百分数才生效
padding内边距，百分数相对于容器宽度
border边框，可以指定border-width/style/border/top/right/bottom/left，结合下面的图，可以设置宽度高度和边框透明度等做三角形
margin外边距，百分数相对于容器宽度，使用margin:auro实现居中效果,注意margin collapse，只取大边距

box-sizing:borderbox 宽度高度指的是包含border和padding和content的宽高
overflow控制溢出内容visible/hidden/scroll

块级和行级

display:block/inline/inline-block/none;inline-block本身是行级，可以放在行盒中;可以设置宽高;作为个整体不会被拆散成多行.none排版时完全被忽略
行级排版：创建IFC，只在行内摆放，对齐用text-align，vertical-align，避开浮动元素
块级排版：创建BFC，根元素、浮动/绝对定位、flex/grid的子项
BFC内盒子从上到下摆放，垂直margin合并，盒子内和外面的margin合并，不会和浮动元素重叠

flex box-最多使用

container：display:flex;

elements: align-items:center;

主轴：justify-content，侧轴：align-items，

弹性计算：flex-grow/shrink/basis，缩写为flex⬇️

grid布局-二维

display:grid 利用grid-template-columns/rows划分网格，grid-line表示网格线，grid-area网格区域

浮动

解决图片环绕文字

绝对定位

position:static/relative/absolute/fixed/sticky

relative:属于常规流，相对于自己本身位置进行偏移，不影响其他元素

absolute：脱离常规流，相对于最近非static祖先定位，不对流内元素布局造成影响

fixed：脱离常规流，相对于窗口定位

sticky：粘性定位，去看mdn

三、实践练习例子：

属性选择器,^=“a”以a开头,$=“a”，以a结尾

<input type="password" />
<style>
input[type="password"]{
 color:gray;
 }
 a[href^="#"]{color:gray;}
 a[href$=".jpg"]{color:red;}
</style>

显式指定继承

*{border-box:inherit;}
html{box-sizing:border-box;}
.some-widget{box-sizing:content-box;}

行级排版案例

块级排版案例，块级和行级结合起来，浏览器会创建匿名盒子

flex-grow

四、课后个人总结：

本章有什么知识点不容易掌握？

css的求值过程：声明值-层叠值-指定值-计算值-使用值-实际值
什么地方容易与其他内容混淆？

百分数是相对于容器的content-box的高度

绝对定位的元素嵌套的元素为子元素创建了新的常规流

保持好奇心，注意CSS的新特性

五、引用参考：

课程
多查MDN、W3C

理解 CSS ｜ 青训营笔记