CSS小结

HTML（超文本标记语言）： HTML 是用于创建网页结构的标记语言。它定义了页面的内容，如标题、段落、列表等。
CSS（层叠样式表）： CSS 是用于控制网页的外观和布局的样式表语言。它通过定义样式，如颜色、字体、间距等，来装饰和排列HTML元素。
JavaScript： JavaScript 是一种高级的编程语言，它使得网页具有互动性和动态性。通过JavaScript，你可以在网页中添加事件、处理用户输入、修改DOM（文档对象模型）等。

把HTML比作成鸟，那么CSS就是鸟的五颜六色的羽毛，而js就是鸟的动作飞。这3者的结合，使得我们可以创建出丰富、交互式的网页。

2. 引入样式表的3种方式

2.1 内联样式（Inline Styles）

<标签名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名>

<p style="color: blue; font-size: 16px;">蓝色</p>

2.2 内部样式表（Internal Stylesheet）

<head>

        <style type="text/CSS">

                选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

        </style>

</head>

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>

2.3 外部样式表（External Stylesheet）

<head>

<link rel="stylesheet" href="styles.css">

</head>

<!-- styles.css -->
p {
  color: red;
  font-size: 20px;
}


<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段红色的文字</p>
</body>
</html>

2.4 三种样式表总结

样式表	优点	缺点	控制范围
内联样式	书写方便，权重高	适用于单个元素	只能控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离，不具备跨页面重用的能力	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入，可以被多个页面共享使用	控制整个站点

3. CSS选择器

标签选择器

标签选择器是指用HTML标签名称作为选择器。特点：快速为页面中同类型的标签统一样式，这也是缺点，不能设计差异化样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2;}

p { color: red }

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.其最大的优势是可以为元素对象定义单独或相同的样式，可以根据需求选择一个或者多个标签。其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; }

<!-- index.html -->
<p class="blue">蓝色</p>

<!-- styles.css -->
.blue{ color:blue }

ID选择器

ID选择器使用“#”进行标识，后面紧跟id名，元素的id值是唯一的，只能对应于文档中某一个具体的元素。其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; }

<!-- index.html -->
<div id="myDiv">这是一个带有唯一ID的DIV元素</div>

<!-- styles.css -->
#myDiv { color: blue; }

通配符选择器

通配符选择器用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。一般用法是下面这种取消所有元素的内外边距。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; }

* {
  margin: 0; 
  padding: 0;
}

属性选择器（CSS3）

属性选择器是根据元素的属性和属性值来选择元素的方法。其基本语法格式如下：

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且值以val开头的E元素
E[att$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val"]	匹配有att属性且值中含有val的E元素

button[type="button"] {
  background-color: blue;
  color: white;
}

<button type="button">Click me</button>

div[class^=color] { /*  class^=color 选取具有以 "color" 开头的类名的所有元素 */
    color: blue;
}
<div class="color1">属性选择器</div>
<div class="4color">属性选择器</div>  /* 不匹配 */

div[class$=color] { /*  class$=color 选取具有以 "color" 结尾的类名的所有元素 */
    color: blue;
}
<div class="color1">属性选择器</div> /* 不匹配 */
<div class="4color">属性选择器</div>

div[class*=color] { /*  class*=color 选取所有类名中包含 "color" 的元素，不管位置 */
    color: blue;
}
<div class="color1">属性选择器</div> 
<div class="4color">属性选择器</div>

伪类选择器

用于选择处于特定状态或特定位置的元素的方式。伪类以冒号 : 开头，用于为元素添加一些特定的样式或行为，这些样式或行为通常是用户行为所触发的，比如鼠标悬停、点击等。

链接伪类选择器

链接伪类选择器用于为链接元素的不同状态（未访问、已访问、悬停、活动）定义样式。以下是常用的链接伪类选择器：

a:link {text-decoration: none;}  /* 选择所有未被访问的链接 */
a:visited {color: blue;}    /* 选择所有已被访问过的链接 */
a:hover {color: red;}     /* 选择在鼠标悬停在链接上时的状态 */
a:active {color: green;}   /* 选择在链接被点击时的状态  */

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。其基本语法格式如下：

选择器1 选择器2 {属性1:属性值1; 属性2:属性值2; }

ul li { color: blue; }   /* 选择ul里面所有li */

子元素选择器

子元素选择器只能选择作为某元素的直接子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话这里的子指的是 亲儿子 不包含孙子重孙子之类。

选择器1 > 选择器2 { 属性1:属性值1; 属性2:属性值2; }

ul > li { color: blue; }

并集选择器

并集选择器（Union Selector）可以同时选择多个不同类型的元素或相同类型的多个元素，然后为它们应用相同的样式。并集选择器的语法是将多个选择器用英文逗号 , 分开，表示同时选择这些元素。

选择器1,选择器2 {属性1:属性值1; 属性2:属性值2; }

h1, h2 {
  color: blue;
}

结构伪类选择器(CSS3)

结构伪类选择器基于元素在文档树中的位置或在父元素中的位置来选择元素。

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

n可以是数字，关键字和公式：

n 如果是数字，就是选择第n个子元素，里面数字从1开始。
n 可以是关键字：even偶数，odd奇数
n 可以是公式（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）：2n表示偶数，2n+1表示奇数，5n表示5的倍数，-n+5表示前5个数。

nth-child和区别：

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

伪元素选择器(CSS3)

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

使用场景：清除浮动
.clearfix:after{
    content: "";        /* 伪元素必须写的属性 */
    display: block;     /* 插入的元素必须是块级 */
    height: 0;          /* 不要看见这个元素 */
    clear: both;        /* 核心代码清除浮动 */
    visibility: hidden;  /* 设置为不可见 */
}

4 3种显示模式

块级元素（Block-level Elements）

块级元素以新行开始，占据父元素的整个宽度（除非设置了宽度）。
块级元素可以包含其他块级元素和行内元素。
常见的块级元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
<div>
  <h1>标题</h1>
  <p>段落</p>
</div>

行内元素（Inline Elements）

行内元素只占据它对应标签的边框所包含的空间，不会独占一行。
行内元素不能包含块级元素，只能包含其他行内元素或文本。
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
<p>这是一段 <span>内联元素</span></p>

行内块元素（Inline-block Elements）

行内块元素会保持其块级元素的特性，但在行内元素中显示，不会独占一行。
行内块元素可以包含其他行内块元素或行内元素。
常见的行内块元素有 <img>、<button>、<input> 等。
<div>
  <button>按钮</button>
  <input type="text">
</div>

区别

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素（特殊: a里面可以放块级元素）

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

显示模式转换 display

块转行内：display: inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

5 CSS三大特性：继承、层叠、优先

层叠

样式冲突：

优先级规则： 样式表中的选择器具有特异性，高特异性的样式会覆盖低特异性的样式。例如，ID选择器的特异性高于类选择器，类选择器的特异性高于标签选择器。
后来者居上： 如果两个样式规则具有相同的特异性，后定义的规则会覆盖先定义的规则。
!important： 如果一个样式规则被标记为重要（使用 !important 关键字），它将覆盖所有其他规则，即使其他规则具有更高的特异性。

样式不冲突：

正常继承： 子元素会继承父元素的一些样式属性，例如字体、颜色等。
按照规则应用： 如果样式没有冲突，将会按照样式规则的特异性和源码顺序来依次应用。

继承

继承性是指子元素会继承父元素的某些样式属性。例如，如果父元素设置了text-，font-，line-这些元素开头的都可以继承，以及color属性，除非子元素自身定义了相应的样式。

优先级

优先级决定了当多个规则应用到同一个元素时，哪一个规则会被优先使用。通常，具有更高特异性的规则会覆盖具有较低特异性的规则。

CSS特殊性（Specificity）

特异性是一个用于度量选择器权重的值。它是一个非负整数，通常用四个部分（千位、百位、十位、个位）来表示。特异性的计算方式如下：

选择器	选择器权重
继承或 *	0,0,0,0
标签（元素）选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式<div style="...">	1,0,0,0
!important	∞无穷大

权重叠加：如果是复合选择器，则权重叠加，需要计算权重

6 盒子模型

盒子模型（Box Model）是CSS中用来描述和布局元素的一种概念。

每个HTML元素可以看作一个矩形的“盒子”，这个盒子包括了内容（content）、内边距（padding）、边框（border）和外边距（margin）这四个部分。

具体来说：

内容（Content）： 盒子中实际包含的内容，比如文字、图片等。
内边距（Padding）： 内容与边框之间的空间。内边距可以是透明的，也可以有背景色。
边框（Border）： 内容和内边距之外的边框。边框的样式、颜色和宽度可以进行设置。
外边距（Margin）： 盒子与相邻元素之间的空间，用于控制元素之间的距离。

这四个部分共同构成了一个完整的盒子。在CSS中，可以通过设置相应的样式来调整盒子模型的各个部分，从而实现页面的布局和样式设计。

外边距合并塌陷问题

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案：只给一个盒子添加 margin 值

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。（浮动的盒子不会有外边距合并的问题）

解决方案： ①可以为父元素定义上边框②可以为父元素定义上内边距③可以为父元素添加overflow:hidden

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样计算盒子大小的方式就发生了改变
可以分成两种情况：
1.box-sizing:content-box 盒子大小为 width+ dding+ border（以前默认的）
2.box-sizing:border-box盒子大小为 width
如果盒子模型改为box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

7 浮动（float）

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。语法： 选择器{float: 属性值}

属性值	描述
none	元素不浮动（默认值）
left	元素向左移动
right	元素向右移动

设置了浮动（float）的元系最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）（脱标）
浮动的盒子不再保留原先的位置

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定；
浮动的盒子中间是没有缝隙的，是紧挨看一起的（行内元素同理）

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响，主要为了解决父级元素因为子级浮动引起内部高度为0 的问题，如果交盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级盒子有了高度，就不会影响下面的标准流盒子。

清除浮动

语法

选择器{clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两边浮动的影响

额外标签法（隔墙法，W3C推荐）

额外标签法会在浮动元素末尾添加一个空的标签。例如<divstyle="clear:both"></div>，或者其他标签（如<br/等）。
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：这个空标签必须是块级元素

父级添加overflow

可以给父级设置： overflow: hidden|auto|scroll

优点：代码简洁

缺点：无法显示需要溢出的元素

:after伪元素法

after方式是额外标签法的升级版。也是给父元素添加

.clearfix:after{
    content: "";
    display: "block";
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{   /* IE6 7专有 */
    *zoom:1
}

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

双伪元素清除浮动

给父元素添加

.clearfix:before,.clearfix:after { 
    content: "";
    display: table;   /* 触发BFC, BFC可以清除浮动 */
}
.clearfix:after {
   clear: both;
}
.clearfix {
    *zoom: 1;
}

优点：代码更简洁

缺点：兼容性问题

总结

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级添加overflow	书写简单	溢出隐藏
:after伪元素法	结构语义化正确	IE6-7不支持:after,兼容性问题
双伪元素清除浮动	结构语义化正确	IE6-7不支持:after,兼容性问题

8 定位

静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：选择器{ position: static;}

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局种很少用到

相对定位

相对定位是元素在移动位置的时候，相对于它原来的位置来说。

语法：选择器{ position: relative;}

特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位

绝对定位是元素在移动位置的时候，是相对于它相先元素来说的。
语法：选择器（position：absolute;}
特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档），
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

子绝父相
子级是绝对定位的话，父级要用相对定位。

子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

绝对定位的盒子水平/垂直居中

普通的盒子是左右/上下margin 改为 auto就可，但是对于绝对定位就无效了

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

固定定位

特点：

要有宽度
以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系。
固定定位也是脱标的，不随滚动条滚动，不再占有原先的位置。其实固定定位也可以看做是一种特殊的绝对定位。

粘性定位

类似于相对定位和固定定位的结合体。元素会根据用户的滚动位置变化而改变定位方式。具体来说，当元素在屏幕中可见时，它的行为类似于相对定位，当用户滚动页面超过了指定的阈值时，它会变为固定定位，直到用户滚动回指定的位置。

语法：选择器{ position: sticky;top: 10px;}

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效

定位总结

定位模式	是否脱标	移动位置
静态static	否	不能使用边偏移
相对定位relative	否	相对于自身位置移动
绝对定位absolute	是	相对于定位父级移动位置
固定定位fixed	是	相对于浏览器移动位置
粘性定位sticky	否	相对于浏览器移动位置

脱标的盒子不会触发外边距塌陷，浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

脱标与浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片。但是绝对定位（固定定位）造成的脱标会压住下面标准流所有的内容。

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（Z轴）。
语法：选择器 (z-index:1;）

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

9 元素显示与隐藏

display

display属性用于设置一个元素应如何显示

div{
    display:none；   /* 隐藏元素，不再占有原来的位置 */
    display：block； /* 除了转换为块级元素之外，同时还有显示元素的意思 */
}

visibility

visibility属性用于指定一个元素应可见还是隐藏

div{
    visibility：visible； /* 元素可视 */
    visibility：hidden；  /* 元素隐藏 */
}

visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none

overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，都不会让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow: hidden，因为它会隐藏多余的部分。

10 vertical-align 图片、表单、文字垂直对齐

vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

vertical-align : baseline |top |middle |bottom

值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

郁宇风、黄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS小结

样式表优点缺点控制范围内联样式书写方便，权重高适用于单个元素只能控制一个标签内部样式表部分结构和样式相分离没有彻底分离，不具备跨页面重用的能力控制一个页面外部样式表完全实现结构和样式相分离需要引入，可以被多个页面共享使用控制整个站点清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差父级添加overflow书写简单溢出隐藏:after伪元素法结构语义化正确IE6-7不支持:after,兼容性问题双伪元素清除浮动。
复制链接

扫一扫