CSS基础知识总结

3次阅读

共计 7252 个字符，预计需要花费 19 分钟才能阅读完成。

一个人至少拥有一个梦想, 有一个理由去坚强。

总结了 CSS 相关的知识点，????‍不对的地方还请告诉我哦

1.1 行内式（内联样式）

其基本语法格式如下：

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

如下???? 所示：

<div style="color: red; font-size: 12px;"> 青春不常在，抓紧谈恋爱 </div>

注意：
- style 其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用 ; 隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

1.2 内部样式表（内嵌样式表）

其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器（选择的标签）{ 
      属性 1: 属性值 1;
      属性 2: 属性值 2; 
      属性 3: 属性值 3;
    }
</style>
</head>
<style>
     div {
         color: red;
         font-size: 12px;
     }
</style>

注意：
- style 标签一般位于 head 标签中，当然理论上他可以放在 HTML 文档的任何地方。
- type=”text/css” 在 html5 中可以省略。
- 只能控制当前的页面

1.3 外部样式表（外链式）

其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css 文件路径">
</head>

注意：
- link 是个单标签
- link 标签需要放在 head 头部标签中，并且指定 link 标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为 CSS 样式表。我们都可以省略
href	定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。

CSS 选择器分为基础选择器和复合选择器：

2.1 标签选择器：

标签选择器可以把某一类标签 全部 选择出来比如所有的 div 标签和所有的 span 标签，但是缺点是不能差异化设置样式。

2.2 类选择器：

可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

语法：

类名选择器

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

标签

<p class='类名'></p>

注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

2.3 id 选择器：

元素的 id 值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

其基本语法格式如下：

id 选择器

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

标签
```
<p id="id 名"></p>
```

2.4 通配符选择器：

通配符选择器用 * 号表示，* 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法格式如下：

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

例如下面的代码，使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距，一般设置在 CSS 文件的开头，但是现在也有使用 body，都可以的????

* {
  margin: 0;                    /* 定义外边距 */
  padding: 0;                   /* 定义内边距 */
}

3.1 后代选择器

作用：选择元素或元素组的子孙，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，如下???? 所示（可以选择 class 后面的所有 h3 标签）：

3.2 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。
注意哦，这里的子元素，简单的说就是亲儿子????，不包括孙子、重孙子之类的哈

3.3 属性选择器

选择带有特殊属性的标签的选择器
例：

<div>
      <input type="text" name=""id="" value="" />
</div>

div [type="text"]{background-color: chartreuse;}

如???? 所示：此时我们选择的是 div 下面的 type 属性等于 text 的内容，所以 input 框会改变颜色。

3.4 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格，如 div.p。

例：

<div class="int">
    <span> 交集选择器 </span>
</div>

div.int{background-color: #00FFFF;}

如???? 所示：此时我们选择的是 div 下面的类名称为 int 的元素，会改变元素的背景颜色。（一般实际中很少使用）

3.5 并集选择器

并集选择器（CSS 选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器 id 选择器等），都可以作为并集选择器的一部分。

例：.one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

3.6 链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第 1 个，第 n 个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。链接伪类选择器如下????:

a:link / 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 /

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a 是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中 <div> 标签是最典型的块元素。

块级元素的特点

（1）比较霸道，自己独占一行????

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

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

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：
- 只有文字才能组成段落，因此 p 里面不能放块级元素，特别是 p 不能放 div
- 同理还有这些标签 h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

链接里面不能再放链接。
特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上, 但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

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

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块：display: inline-block; < a > 元素一般利用 display 转换成 display:inline-block

background-color: transparent; 设置背景为透明色。

引入图片：background-image: url(../img/index.png);url 后不加引号。

background-position: x 坐标 y 坐标;

一般超大背景的图片采用的是水平居中对齐，纵向不用对齐。如???? 代码所示：

body{background-image: url(../img/sms.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

小图标在盒子内的定位：

实现的效果图：这里最重要的一句图标定位代码 background-position: 10px center;x 轴上距离为 10px，y 轴垂直居中

背景附着就是解释背景是滚动的还是固定的, 默认是滚动的

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

background: 背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll center top ;

alpha 是透明度参数，取值范围在 0 - 1 之间

在工作中适用范围较广，需要牢记的

<div class="alpha"></div>

.alpha{
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.2);
    }

层叠性

< div> 长江后浪推前浪，前浪死在沙滩上 < /div>

给以上文字设置两个 color 样式：此时显示出来的属性是 black 颜色属性，pink 会被覆盖掉。

继承性

继承性即子承父业，子标签会继承父标签的样式

<div>
    <p>CSS 继承性 </p>
</div>

div{color: pink;}

如???? 所示，我们并未设置 div 下的 p 的样式，仅设置了父级标签 div 的颜色为 pink，此时 p 继承父级元素 div 的样式，颜色也会表现为 pink

优先级 `重点`

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个 ID	0,1,0,0
每个行内样式 style=””	1,0,0,0
每个!important 重要的	∞ 无穷大

权重计算示例：

div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover —–—> 0,0,1,1
.nav a ——> 0,0,1,1

这里需要注意的一点是：继承的权重是 0

修改样式，一定要看该标签有没有被选中hin 重要

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。

2）如果没有选中，那么权重是 0，因为继承的权重为 0.

这一点看似简单，很容易绕晕哈，我们看下面这个例子：????

此时我们需要判断的是 p 元素的内容是什么样式，p 会继承父级元素的样式，但是继承的权重是 0，标签的权重是 1，另外由于 p 标签并未被选择，所以会表现出标签的样式。

如果 p 标签被选中了，则 id+ 标签选择器的权重为：0101，大于 p 标签的权重：0001，所以会显示为 pink 样式

下面有一套综合题，可以检验一下是否掌握了这个知识点哈

如???? 所示，文字会展现什么颜色呢
css 的权重依次为：0021，0101，0101，那就排除了蓝色，

第二个和第三个权重一样的情况下，我们会采取就近原则，pink 离的更近一些，则上图样式会表现为 pink，如果调换 yellow 和 pink 的 css 样式位置，则表现为 yellow。

还有一道特别容易混淆的题哦，

很多时候，我们看到有个！important 会自然的觉得权重最高，所以上述文字会显示绿色，但是是不对的哈，

第一步我们需要看文字是否被选中，如果未被选中则是继承，继承的权重是 0，我们可以看到前三个均选中了文字的，但是最后一个未选中，所以排除绿色 green，前三项的权重分别为：0200，0111，0022，所以颜色应该为蓝色。很重要的一点，不能混淆

盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

内盒尺寸计算：

宽度
Element Height = content height + padding + border（Height 为内容高度）
高度
Element Width = content width + padding + border（Width 为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

下面我们我们通过这个题来计算一下盒子实际的宽度和高度，加油呀????

div {

    width: 200px;

        height: 200px;

    border: 1px solid #000000;

    border-top: 5px solid blue;

    padding: 50px;

    padding-left: 100px;

     }

小伙伴们有结果了吗，我们来分析一下哦，

实际宽度 = width（200px）+ border（2px）+ padding（50px）+padding-left（100px）= 352px。

实际高度 = height（200px）+ border（1px）+ border-top（5px）+ padding（100px）= 306px。

肯定有小伙伴会疑惑????，为什么宽度里面算的内边距是 150 呢，这里有一个坑哈，因为单独设置了左内边距为 100px，所以宽度里面内边距是 150px，同理计算高度的时候，边框是一样的为 6px。

可以让一个块级盒子实现水平居中：

盒子必须指定了宽度（width）
给左右的外边距都设置为 auto

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ 
       width:960px; 
       margin:0 auto;
}

常见的写法，以下三种都可以。

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

普通流

块级元素会独占一行，从上向下 顺序排列；

 - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右 顺序排列，碰到父元素边缘则自动换行；

 - 常用元素：span、a、i、em 等

浮动

浮动最主要的价值是可以让多个块级元素在同一行内展示出来。

元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。

选择器 {float: 属性值;}

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

我们使用浮动的核心目的——让多个块级盒子在同一行显示。这个也是我们最常见的一种布局方式

一个完整的网页，是标准流 + 浮动 + 定位一起完成的。

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流，每个标准流单独占一行。

如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，避免引起其他的问题哈。

下面我们来看以下???? 几种情况：

以下所说的 div 结构均为此：

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>

当 a 盒子浮动，b 盒子也浮动的时候，a、b 两盒子会显示在同一行。
当 a 盒子不浮动，b 盒子浮动的时候，a 盒子即是标准的文档流，是很霸道的哈，他会单独占据一行，所以 b 盒子会依照 a 盒子为参考，b 盒子浮动。

清除浮动

我们为什么要清除浮动呢 ❓

父级盒子很多情况下，不方便给高度 ，但是子盒子浮动就不占有位置， 注意哦，浮动的盒子不占位置。最后父级盒子高度为 0，就影响了下面的标准流盒子，下面的标准流盒子会覆盖原本想展示的内容。

总结：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 准确地说，并不是清除浮动，而是 清除浮动后造成的影响。

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

清除浮动的方法

如下图所示，若父元素 nav 盒子没有设置高度，子元素均设置浮动，则会导致子元素浮动在正常文档流之外，父元素的高度为：0，影响之后正常的文档流，所以此时我们会清除浮动。

以下???? 所示的四种清除浮动的方式，均以此案例为参照

1. 额外标签法(隔墙法)

注意此处说的浮动元素是指浮动的最后一个元素哈

W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。

2. 父级添加 overflow 属性方法

可以给父级添加：overflow 为 hidden| auto| scroll 都可以实现。

一般我们会在父级元素样式后加：overflow：hidden。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3. 使用 after 伪元素清除浮动

此方式虽然代码多一点，但是不会改变 html 的结构

:after 相当于在结构后用 css 添加了一个新的标签。

/* 声明清除浮动的样式 */
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix{*zoom:1; /* ie6，7 专门清除浮动的样式 */}

4. 使用双伪元素清除浮动
跟第三种方式差不多哈，在盒子的前后插入一个盒子

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}

需要清除浮动的场景：

清除浮动说了这么多，那我们时候什么需要清除浮动呢????，以下是需要清除浮动的场景

父级元素没有高度
子元素盒子有浮动
影响下面元素的布局

正文完

前端

发表至：前端

2020-06-28

0

关于前端:前端WebSocket知识点总结

Vue-3教程适用于Vue-2用户

关于前端:Bootstrap-笔记

React-自定义一个交换类型拖放

GIT使用指南

CSS基础知识总结

1、引入 CSS 样式表（书写位置）

1.1 行内式（内联样式）

1.2 内部样式表（内嵌样式表）

1.3 外部样式表（外链式）

2、基础 CSS 选择器

2.1 标签选择器：

2.2 类选择器：

2.3 id 选择器：

2.4 通配符选择器：

3、复合 CSS 选择器

3.1 后代选择器

3.2 子元素选择器

3.3 属性选择器

3.4 交集选择器

3.5 并集选择器

3.6 链接伪类选择器

4、块级元素

5、行内元素

6、行内块元素

7、标签显示模式转换 display

8、css 背景

9、css 背景位置定位

10、背景附着

11、背景简写

12、背景半透明

13、CSS 三大特性

层叠性

继承性

优先级 `重点`

14、盒子模型（CSS 重点）

15、块级盒子水平居中

16、CSS 布局的三种机制

普通流

浮动

清除浮动

清除浮动的方法

需要清除浮动的场景：

站内搜索

CSS基础知识总结

1、引入 CSS 样式表（书写位置）

1.1 行内式（内联样式）

1.2 内部样式表（内嵌样式表）

1.3 外部样式表（外链式）

2、基础 CSS 选择器

2.1 标签选择器：

2.2 类选择器：

2.3 id 选择器：

2.4 通配符选择器：

3、复合 CSS 选择器

3.1 后代选择器

3.2 子元素选择器

3.3 属性选择器

3.4 交集选择器

3.5 并集选择器

3.6 链接伪类选择器

4、块级元素

5、行内元素

6、行内块元素

7、标签显示模式转换 display

8、css 背景

9、css 背景位置定位

10、背景附着

11、背景简写

12、背景半透明

13、CSS 三大特性

层叠性

继承性

优先级 重点

14、盒子模型（CSS 重点）

15、块级盒子水平居中

16、CSS 布局的三种机制

普通流

浮动

清除浮动

清除浮动的方法

需要清除浮动的场景：

站内搜索

优先级 `重点`