前端 | 青训营笔记

小太阳William
58 阅读4分钟

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

深入CSS

上一节我学过了CSS的基础知识，下面来更加深入地学习CSS。

当不同的选择器匹配到同样的样式时：

选择器的优先级

特异度：id>（伪）类>标签

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

一般来说，在CSS里面，和文字相关的一些属性都是可以继承的，但是跟盒模型相关的一些属性都是不可继承的，例如宽度。

想要让不可继承的值等同于父级即 可继承 ↓

显式继承

使用inherit关键字

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

初始值

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

CSS求值过程（非常复杂）

image.png image.png 最终得到实际值（渲染时实际生效的值，比如400px）

布局（Layout）

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

image.png

布局相关技术

常规流

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内
  • 常规流中的盒子，在某种排版上下文中参与布局
1.块级

body、article、div、main、section、h1~6、p、ul、li

  • Block Formating Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root；
  • BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠
2.行级

span、em、strong、cite、code

  • Inline Formating Context（IFC）
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平排放
    • 一行放不下时，换行显示
    • text-align 水平对齐
    • vertical-align 垂直对齐
    • 避开浮动（float）元素* image.png
display属性

display：block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行（行级→块级）

3.表格布局
4.FlexBox（一维）
  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向（→ ← ↑ ↓）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
justify-content属性

image.png

align-items属性

image.png

Flexibility属性

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

flex-grow 伸展

flex-shrin 收缩

flex-basis 没有伸展或收缩时的基础长度

flex三值合并的缩写

image.png

5.Grid布局（二维）

image.png

浮动

float-left图片环绕文字效果

绝对定位

position属性

static 默认值，非定位元素 relative 相对自身原本位置偏移，不脱离文档流 absolute 绝对定位，相对非static祖先元素定位 fixed 相对于视口绝对定位

盒模型

注意：容器有指定的高度时，height百分数才生效

border

三种属性（width、style、color）四个方向（top、right、bottom、left）

当四条边框颜色不同时 常用技巧： 当把容器的宽度、高度都设置为0时，就只剩下边框，再根据需要把其中的一些三角形设置成不同的颜色和粗细做成各种各样的形状，比如倒三角形（把其中的一些三角形设置成透明的）。

margin

  • 使用margin:auto水平居中

  • margin collapse 第一个元素的下边距是100，第二个元素的上边距也是100，这两个元素中间实际的间距只会取这两者中间的一个比较大的间距100，而不是简单相加。

    • 在文字排版时较方便。

学习CSS的几点建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝