深入CSS学习笔记

选择器优先级

<hl class=="title">拉森火山国家公园</hl> 
<article> 
<style>
    .title { color: blue; }
    article hl { color: red; }
</style>

选择器的特异度specificity

"#" id
"." 伪类
"E" 标签

继承

继承指的是某些CSS属性的值如何从父元素传递（或"继承"）给其子元素。文字相关的属性都可以继承，模型则不可以继承。

显示继承

通过inherit关键字将不可继承的属性变为可继承。

初始值

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

布局（layout）是什么？

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

布局

常规流：行级，块级，表格，FlexBox，Grid布局
浮动：float/clear
绝对定位：absolute

盒子模型

屏幕截图 2023-01-18 222707.png

属性

width

指定content box宽度
取值为长度、百分比、auto（由浏览器根据其他属性决定）
百分数相对于容器的content box宽度

hight

指定content box高度
取值为长度、百分比、auto（由浏览器根据其他属性决定）
百分数相对于容器的content box宽度
容器有指定的高度时，百分数才生效

padding

指定元素四个方位的内边距
百分数相对于容器宽度

border

设置边框样式，粗细，颜色

margin

指定元素四个方位的外边距
取值为长度、百分比、auto
百分数相对于容器宽度

flexbox布局

Flexbox（Flexible Box）是一个CSS布局模型，它允许在复杂布局和对齐方面提供更有效的方法，尤其是当内部项目的大小未知或动态变化时。以下是关于Flexbox布局的基本信息。

基本概念：
- 容器（Container）：使用display: flex或display: inline-flex的元素。
- 项目（Items）：容器中的子元素。
容器属性：
- display: 设置为flex（块级）或inline-flex（内联级）以启用Flex布局。
- flex-direction: 定义主轴的方向。值：row, row-reverse, column, column-reverse。
- flex-wrap: 设置是否换行。值：nowrap, wrap, wrap-reverse。
- flex-flow: flex-direction和flex-wrap的简写属性。
- justify-content: 设置主轴上的对齐方式。值：flex-start, flex-end, center, space-between, space-around, space-evenly。
- align-items: 设置交叉轴上的对齐方式。值：flex-start, flex-end, center, baseline, stretch。
- align-content: 多行时设置交叉轴上的对齐方式。值：flex-start, flex-end, center, space-between, space-around, stretch。
项目属性：
- order: 设置项目的排列顺序。默认为0，数值越小越前。
- flex-grow: 设置项目的增长比例，默认为0。
- flex-shrink: 设置项目的缩小比例，默认为1。
- flex-basis: 设置在分配额外空间之前，项目占据的主轴空间。默认值auto。
- flex: 是flex-grow, flex-shrink 和 flex-basis的简写。默认值 0 1 auto。
- align-self: 允许单独项目有与其他项目不同的对齐方式。值：auto, flex-start, flex-end, center, baseline, stretch。可以设置子项弹性：容器有剩余空间时会伸展，空间不够时会收缩。

其他

flex-grow:有剩余空间时的伸展能力。
flex-shrink:容器空间不足时的收缩能力
flex-basis:没有伸展或收缩时的基础长度

总结

CSS还有很多其他的特性和功能，其中盒子模型算是最基本的也是最受欢迎的，所以我会在接下来的实践中来巩固所学习的知识内容，完成更优秀的效果。

深入css学习