CSS基础&进阶|青训营笔记

InifniteZ1
160 阅读5分钟

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

CSS是如何工作的

首先加载HTML 然后解析HTML 在解析HTML后同时开始加载CSS，解析CSS和创建DOM树；经过解析的CSS添加样式到DOM节点，最终呈现页面

选择器Selector 

通配选择器
标签选择器
id选择器
类选择器
属性选择器 [某些属性] [disabled]{} input[type="password"]{} a[href^="#"]{} 表示名称里含有# a[href$=".jpg"] 选择后缀
伪类选择器 a:link{}通过一个标签的不同状态来选择样式 a:first-child{}选择不同的子元素

颜色的表示方式 

1.RGB 2.HSL 3.直接键入颜色 #.alpha 不透明度

字体 font-family 

serif 衬线体 -宋体
Sans-Serif无衬线体 -微软雅黑
Curisve 手写体 -楷体
Fantasy -Papyrus
Monospace 等宽字体 -Consolas

使用Web Fonts @font-face{} 其从浏览器上下载字体 可能会导致性能损失

white-space
[white-space - CSS（层叠样式表） | MDN (mozilla.org)]

调试CSS
右键点击页面，选择检查 ctrl+shift+i

CSS进阶

CSS继承

若子元素无指定显式，则继承父元素的属性

显式继承

子元素指定显式

初始值

CSS中，每个属性都有一个初始值 background-color的初始值为 transparent margin-left的初始值为 0 可以使用initial关键字显式重置为初始值 background-color:initial

filitering 对应用到该页面的规则用选择器匹配，属性有效，符合当前media等条件进行筛选
-> 层叠值 Cascaded value 在层叠过程中最高优先级的值
defaulting 当层叠值为空的时候，使用继承或初始值
-> 指定值 Specified Value，经过cascading和defaulting 之后，保证指定值一定不为空
resolving 相对值或者关键字转化为绝对值（em -> px/相对路径 -> 绝对路径）
-> 计算值 Computed Value 一般来说，浏览器在不进行实际布局的情况下，所能得到的最具体的值，比如60%
formatting 将计算值进一步转换（关键字，百分比等都转为绝对值）
-> 使用值 Used Value 进行实际布局时使用的值，不在会有相对值或关键字（比如：400.2px） constrain 将小数值转换为整数值

CSS布局

  • 确定内容的大小和内容的算法
  • 依据元素 容器 兄弟节点和内容等信息来计算

常规流:行级 块级 表格布局 FlexBox Grid布局

盒模型

width height 指定的均为content box 高度 auto的取值由内容计算而来 百分数相对于容器的content box 高度（容器有指定高度时生效）
padding 指定内边框的宽度
border 边框的粗细 样式 宽度
margin 指定外边距宽度 可使用margin:auto水平居中

overflow 属性
overflow属性指定如果内容溢出一个元素的框，会发生什么。

属性值

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

box-sizing 属性
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

默认情况下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

语法

box-sizing: content-box|border-box|inherit:

值说明
content-box默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注：  border-box 不包含 margin。
inherit指定 box-sizing 属性的值，应该从父元素继承
块级行级
Block Level BoxInline Level box
不和其他盒子并排摆放，使用所有的盒模型属性和模型中的width，height不适用
生成块级盒子生成行级盒子，内容分散在多个行盒中
body article div main section h1-h6 p ul li等span em strong cite code
display:blockdisplay:inline

display 属性

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中;可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略\

行级排版上下文

  • lnline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

  1. 盒子在一行内水平摆放
  2. 一行放不下时，换行显示
  3. text-align 决定一行内盒子的水平对齐
  4. vertical-align决定一个盒子在行内的垂直对齐
  5. 避开浮动元素

块级排版上下文

  • Block Formatting Context(BFC)

  • 默写容器会创建换一个BFC

    • 根元素
    • 浮动 绝对定位 inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root;

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC盒子内的margin不会与外面的合并
  • BFC不会和浮动元素重叠

关于flex布局  [flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)]
关于grid布局  [grid - CSS（层叠样式表） | MDN (mozilla.org)]
浮动  [float - CSS（层叠样式表） | MDN (mozilla.org)]
由于flex布局和grid布局的存在 float现在只用于文字环绕效果
定位  [position - CSS（层叠样式表） | MDN (mozilla.org)]

写在最后

在本节课中，我最大的收获就是学到了CSS中高阶的理解与知识
这些是我从前没有学到过的，并且将为我的编程生涯提供极大的便利 感谢青训营

avatar
文章
阅读
粉丝