CSS如何运行

  1. 浏览器载入HTML文件（比如从网络上获取）。
  2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。（通过html建立树（dom））
  3. 浏览器将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。

冲突的规则

层叠

两个同样的选择器会优先后面这一条

优先级

继承

父元素能被子元素继承
有些样式是不能被继承的：比如widths margins, padding, 和 borders 不会被继承

继承控制

inherit：设置该属性会使子元素属性和父元素相同，‘开启继承’
initial：设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。

!important

强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。

下面则是css所有选择器规则的详解

选择器

第二层-CSS - 图1

  • 如果要定义不止一个声明，则需要用分号将每个声明分开。
  • 如果值为若干单词，则要给值加引号：

p {font-family: “sans serif”;}

  • 用逗号将需要分组的选择器分开。

选择多类样式

  1. <p class="important warning">
  2. This paragraph is a very important warning.
  3. </p>

类型选择器、类、ID选择器

类型选择器：某个元素，例如

等

  1. h1 {    //元素选择器，选择某个元素
  2.   color: blue;
  3. }

类选择器：以点号显示

  1. .special {  //类选择器，在标签中通过class=''，进行匹配
  2.   color: blue;
  3. } 
  5. *.important {color:red;}//结合通配符选择器
  7. p.important {color:red;}//结合元素选择器

ID选择器：
ID选择器只能使用一次
#类选择器和 ID 选择器可能是区分大小写的。注意大小写要匹配

  1. #unique { }  //id选择器

通配符选择器

与文档中任何元素匹配

  1. * {color:red;}

标签属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
可以只对有 href 属性的锚（a 元素）应用样式：

  1. a[href] {color:red;}
  2. a[href][title] {color:red;}//连接属性选择器
  4. planet[moons="1"] {color: red;}//可以为属性定义值，属性与属性值必须完全匹配，否则会匹配不上
  6. p[class~="important"] {color: red;}//根据部分属性值选择，需要加上波浪号

特定属性选择类型

  1. *[lang|="en"] {color: red;}//选择 lang 属性等于 en 或以 en- 开头的所有元素。

根据特定属性选择

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

后代、子元素、相邻兄弟选择器

后代选择器：
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
例如如下，仅在标题1中斜体时起作用，无论嵌套多深都能应用。

  1. h1 em {color:red;}

子元素选择器：
只能应用于某个元素的子元素

  1. h1 > strong {color:red;}

相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
（两个相邻元素中的下一个元素是被选中的）

  1. h1 + p {margin-top:50px;}

伪类与伪元素

伪类
CSS 伪类用于向某些选择器添加特殊的效果。
为超链接定义状态的时候，位置不能变化，如下

  1. a:link {color: #FF0000}
  2. a:visited {color: #00FF00}
  3. a:hover {color: #FF00FF}
  4. a:active {color: #0000FF}
  1. input:focus
  2. {
  3. background-color:yellow;
  4. }

首个子对象

  1. p:first-child {font-weight: bold;}
  2. li:first-child {text-transform:uppercase;}

伪元素
CSS 伪元素用于向某些选择器设置特殊效果。

  1. selector:pseudo-element {property:value;}
  2. selector.class:pseudo-element {property:value;}//搭配使用

:first-line 用于向文本的首行设置特殊样式。
可用属性

  1. font
  2. color
  3. background
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. clear

:first-letter 用于向文本的首字母设置特殊样式：
可用属性

  1. font
  2. color
  3. background
  4. margin
  5. padding
  6. border
  7. text-decoration
  8. vertical-align (仅当 float 为 none 时)
  9. text-transform
  10. line-height
  11. float
  12. clear

可用的伪元素

属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。 2

运算符

最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了

元素的初代子元素。

  1. article > p { }

盒模型

块级盒子

外部显示类型为block（块）

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用

  • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

    内联盒子

    外部显示类型为inline（内联）

  • 盒子不会产生换行。

  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

    外部显示类型和内部显示类型

    决定一个元素默认的外部显示类型
    显示类型：通过display进行修改
属性 值 释义
display none 此元素不会被显示。
block 内部显示类型改为块级，子元素前后会带有换行符。
inline 内部显示类型改为内联，子元素前后没有换行符。
inline-block 内联和块的中间状态，行内块元素，使得width和height属性可以生效

标准盒模型

box概念：一切皆为盒子
标准盒模型只应用于div（块级盒子）

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

屏幕快照 2021-08-26 下午2.58.48.png

可用的属性
黄色底色代表CSS3的属性

属性 值 释义
padding
内边距		 padding-top 长度值或百分比值，不允许使用负值。可以按照上、右、下、左的顺序分别设置各边的内边距
padding-right
padding-bottom
padding-left
border
边框		 none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
border-radius
圆角边框		 px
box-shadow
边框阴影		 10px 10px 5px #888888；
border-image
边框图片		 url(border.png) 30 30 round；
单边 属性值 border-top-style 其余只改变位置到单词
border-top-color 透明边框颜色值：transparent
margin
外边距		 接受任何长度单位、百分数值甚至负值。

外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
第二层-CSS - 图3

溢出处理

属性 值 释义
overflow
溢出的内容
overflow-x，x轴方向
overflow-y，y轴方向		 scroll 不论是否需要，用户代理都会提供一种滚动机制。
auto 设置为浏览器自动处理溢出
hidden 隐藏溢出

布局

flex弹性盒子布局

用于设计横向或纵向的布局，相当于把原来的多行，变成多列放到一行内。

  1. display：flex，你只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。（给块元素设置flex布局）
  2. display：inline-flex，父元素与子元素加起来的宽度适应，下一行可以和父元素同一行。（给行内元素设置flex布局。）

flex属性也可以进行赋值
这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白

  1. .wrapper {
  2.     display: flex;
  3. }
  5. .wrapper > div {
  6.     flex: 1;  //flex值要设置给子元素
  7. }
  9. .wrapper > div {
  10.     flex: 1 200px;  //这个的意思是每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享
  11. }

flex模型

  1. 主轴：是沿着 flex 元素放置的方向延伸的轴
  2. 交叉轴：垂直于主轴的轴

    flex的属性

    | 属性 | 值 | 释义 | | —- | —- | —- | | flex-direction | column | 按列排列 | | | row | 按行排列 | | flex-wrap
    换行 | wrap | | | flex-flow
    上面两个属性的缩写 | row wrap | 空格分隔 | | align-items
    控制 flex 项在交叉轴上的位置。 | center | 垂直居中对齐 | | | flex-start | 默认值，flex位于开始处 | | | flex-end | flex位于结束 | | | space-around | flex项沿主轴均匀分布，留有空间 | | justify-content
    flex项在主轴上的位置 | center | 水平居中对齐 |

flex的值

  1. .col {
  2.   flex: 1 1 auto;//第一、二、三个值分别为flex-grow、flex-shrink、flex-basis
  3. }
属性 值 释义
flex-grow 数字 主尺寸
flex-shrink 数字 收缩规则
flex-basis auto/px 初始大小

grid网格布局

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr 1fr;
  4. }

网格布局，用于两个维度上的布局设计。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。

grid的属性

网格的特有单位：fr
fr分配的是可用空间，把固定的空间分配好了，剩下的空间则是fr自动适应。

属性 值 释义
grid-template-columns 200px 1fr 1fr 设定列的数量
repeat（3 1fr） 重复构建3个等宽轨道
grid-gap
gap（后面去掉了前缀）		 px（不能使用fr单位） 设定列的间隙（gutter）

minmax()函数

minmax(100px, auto)
释义：尺寸就至少为100像素，并且如果内容尺寸大于100像素则会根据内容自动调整
示例：自动使用多列填充

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  4.   grid-auto-rows: minmax(100px, auto);
  5.   grid-gap: 20px;
  6. }
  1. .wrapper {
  2.     display: grid;
  3.     grid-template-columns: 1fr 1fr 1fr;
  4.     grid-template-rows: 100px 100px;
  5.     grid-gap: 10px;
  6. }
  8. .box1 {
  9.     grid-column: 2 / 4;  //从哪里开始，到那里结束
  10.     grid-row: 1;
  11. }
  13. .box2 {
  14.     grid-column: 1;
  15.     grid-row: 1 / 3;
  16. }
  18. .box3 {
  19.     grid-row: 2;
  20.     grid-column: 3;
  21. }

最终效果
屏幕快照 2021-08-27 下午1.26.08.png

float浮动

使用float属性，会从正常布局流中移除该元素，其他内容会在该元素周围环绕。

属性 值 释义
float left 左浮动
right 右浮动
none 无浮动
inherit 继承父元素

清除浮动

  1. footer {
  2.   clear: both;
  3. }
属性 值 释义
clear left 停止任何活动的左浮动
right 停止任何活动的右浮动
both 停止任何活动的左右浮动

可能的问题

添加样式会导致布局崩溃，所以需要把盒模型改为替代盒模型
替代盒模型表示盒模型包括外边距、边框、内边距一起计算的高度和宽度，而标准盒模型则不包括外边距。

  1. * {
  2.   box-sizing: border-box;
  3. }

浮动的元素在父元素中所占的面积高度为0
如何修复？
在不需要浮动的元素和浮动元素之间加入一个空div，这个div使用清除浮动的样式。

定位

定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。
粘性定位：它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。（适合做导航栏）

属性 值 释义
position static 静态定位。默认
relative 相对定位。这对于微调和精准设计(design pinpointing)非常有用。
absolute 绝对定位：脱离文档流。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
如果绝对定位的父元素设置了相对定位，那么绝对定位的元素会根据父元素来进行定位。
fixed 固定定位。相当于绝对定位，根据视窗定位。
sticky 常用：创建滚动索引页面

元素重叠

属性 值 释义
z-index 默认为0，其余的可设为1，-1 将一个元素置于另一元素之后（类似图层）

多列布局

属性 值 释义
column-count 3 定义分隔成多少列
column-width px 尽可能的创建多列，剩余空间被现有的列平分
column-gap 任何长度单位 列间间隙
column-rule 类似border的值 列之间的分割线
break-inside avoid 如果列之间出现了内容折断，使用这个值可以取消折断 
  1. .container {
  2.   column-count: 3;//指定列的数量
  3. }
  4. .container {
  5.   column-width: 10em;//指定列的宽度
  6. }

响应式布局

一般都需要加上下面这个代码

  1. <meta name="viewport" content="width=device-width,initial-scale=1">

媒体查询

  1. @media media-type and (media-feature-rule) {
  2.   /* CSS rules go here */
  3. }

可以指定的媒体类型（media-type）

  1. all
  2. print
  3. screen
  4. speech

可以使用的媒体特征规则（media-feature-rule）

属性 值 释义
min-width px 视口大于某个单位
max-width px 视口小于某个单位
width px 视口等于某个单位

传统布局方式

传统布局使用float进行网格布局。

clac()函数

  1. .col.span4 {
  2.   width: calc((6.25%*4) + (2.08333333%*3)); //跨越的列数和间隔数
  3. }

CSS属性

外部样式表：通过链接进行引用。
内部样式表：中使用