CSS基础全解析：选择器、字体样式与布局机制-优快云博客

本文链接：https://blog.youkuaiyun.com/hehao1421771020/article/details/119276310

本文详细介绍了CSS的基础知识，包括CSS的引入方式（行内式、内嵌式、外部样式表）、选择器（基础选择器、复合选择器、伪类选择器）以及字体样式。此外，还讲解了标签显示模式（display属性）、CSS背景、三大特性（层叠性、继承性、优先性）和盒子模型。进一步探讨了浮动、定位和布局机制（标准流、浮动、定位）。最后，阐述了元素的显示与隐藏以及字体图标的应用和优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思维导图

CSS引入方式

行内式（内联式）
通过标签的style属性来设置元素的样式
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
- 缺点: 没有实现样式和结构相分离。
```
<h3 style="color:blue; font-size:16px;"> 内容 </h3>
```
内部样式表
也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
- style标签一般位于head标签中，理论上他可以放在HTML文档的任何地方
- type="text/css"在html5中可以省略
- 只能控制当前的页面
- 缺点： 没有彻底分离结构与样式
```
<head>
<style type="text/CSS">
	h3 { 
  		color: blue;
  		font-size: 16px; 
	}
</style>
</head>
```
外部样式表

也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
```
h3 {
 	color: blue;
 	font-size: 16px;
}
```

CSS选择器

CSS基础选择器

标签选择器
不能设计差异化样式

 h3 {
 	color: blue;
 	font-size: 16px;
 }

类选择器
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
```
.nav {
	font-size: 16px;
	color: blue
}
```
id选择器
元素的id值是唯一的，只能对应于文档中某一个具体的元素，缺点是只能使用一次
```
#submit {
	font-size: 16px;
	color: blue
}
```
通配符选择器
选择所有的标签，会匹配页面所有的元素，降低页面响应速度，不建议随便使用，通常用来清除HTML默认边距
```
* {
	margin: 0;
	padding: 0;
}	```
```

CSS复合选择器

后代选择器
子孙后代均可选择

.nav h3 {
	color: blue;
	font-size: 16px;
}

子元素选择器
只能选择作为某元素的子元素
```
.nav>h3 {
	color: blue;
	font-size: 16px;
}
```
并集选择器
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式
```
.one, 
p , 
#test {
	color: #F00;
}  
```
伪类选择器
用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照LVHA的顺序。否则可能引起错误
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标移动到链接上
- a:active 鼠标选定未弹起的链接
- input:focus 选中的表单元素

字体样式

字体基础属性

font-size
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

单位说明
em 相对于当前对象内文本的字体尺寸
px 像素，最常用
cm 厘米
mm 毫米
in 英寸，2.54cm
pt 点，1/72英寸
font-family
用于设置字体，指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准
- 可以直接写中文，但字符编码不匹配会产生乱码，所以尽量写英文代替
font-weight

属性值说明
normal 默认值
bold 粗体，使用较少
100~900 使用最多，400等价于normal，700等价于bold
复合写法
使用font属性时，必须按上面语法格式中的顺序书写，其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用
```
选择器 { 
	font: font-style  font-weight  font-size/line-height  font-family;
}
```
文字阴影
文字阴影通过text-shadow属性实现
```
选择器 {text-shadow: h-shadow v-shadow blur color;}
```
属性值说明
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色
外观属性

属性值说明
text-align 水平对齐方式
line-height 行高
text-indent 首行缩进
text-decoration 下划线\删除线等

单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用
cm	厘米
mm	毫米
in	英寸，2.54cm
pt	点，1/72英寸

属性值	说明
normal	默认值
bold	粗体，使用较少
100~900	使用最多，400等价于normal，700等价于bold

属性值	说明
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色

属性值	说明
text-align	水平对齐方式
line-height	行高
text-indent	首行缩进
text-decoration	下划线\删除线等

标签显示模式（display）

块级元素block

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
- 独占一行
- 高度，宽度，外边距以及内边距都可控
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
  注意： 只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6、dt它们都是文字类块级标签，里面不能放其他块级元素。
行内元素inline

有的地方也称为内联元素,常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
- 相邻行内元素在一行上，一行可以显示多个
- 高度、宽度直接设置是无效的
- 默认高度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素
行内块元素inline-block

在行内元素中有几个特殊的标签——<img>、<input >、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
- 和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度，行高，外边距以及内边距都可以控制

CSS背景

背景属性
属性值说明
background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺
background-position 背景位置
background-attachment 背景固定还是滚动

属性值	说明
background-color	背景颜色
background-image	背景图片
background-repeat	背景平铺
background-position	背景位置
background-attachment	背景固定还是滚动

复合写法
按一下方式,没有顺序要求

选择器 {background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;}

精灵图
将图片聚合为一张大图，通过位置和背景切片成为小图

CSS三大特性

层叠性
- 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠。
继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号。
- 想要设置一个可继承的属性，只需将它应用于父元素即可
- 文本相关属性均可继承，如text-，font-，line-这些元素开头的可以继承，以及color属性
优先性
复合选择器权重叠加即可，不进位，并不是二进制
选择器权重
继承或者 * 0,0,0,0
标签选择器 0,0,0,1
类，伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 style=“” 1,0,0,0
!important ∞，如div { color: pink !important; }

选择器	权重
继承或者 *	0,0,0,0
标签选择器	0,0,0,1
类，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important	∞，如div { color: pink !important; }

盒子模式

盒子由border、padding、margin、content、四部分组成

CSS三种布局机制

三种布局机制

标准流
- 块级元素会独占一行，从上向下顺序排列，常用元素有：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行，常用元素有：span、a、i、em
浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效

浮动

什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘（块级元素纵向排列找标准流，横向排列找浮动）
```
	选择器 {float: 属性值;}
```
属性值说明
none 不浮动
left 向左浮动
right 向右浮动
浮动的特性
- 脱离标准普通流的控制(浮)，移动到指定位置（动），不占位置，俗称脱标（
- 不占位置指浮动的盒子不再保留原先的位置，移动到的位置也占，若还有盒子会和未浮动的盒子叠压，但浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流，不会叠压住前面的。压后面的也不会压住文字、图片
  ，浮动的初衷是做文字环绕效果）
- 如果多个盒子设置了浮动，则会按照属性值一行内显示并且顶端对齐排列，显示不开自动换行
- 浮动元素相互紧靠，不产生缝隙
- 浮动的元素具有行内块元素的相似特性（无需转化即可设置宽、高）
浮动的使用策略
- 先用标准流在父元素排列上下位置，内部子元素采取浮动排列左右位置
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动
三种常用网页布局
先用标准流在父元素排列上下位置，内部子元素采取浮动排列左右位置
清除浮动
父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子
- css清除浮动就是只让盒子在父盒子内生效
```
/*属性值left\right\both，实际工作中几乎只用both*/
选择器 { clear: 属性值; }
```
- 额外标签法（隔墙法）： W3C推荐的做法是通过在浮动元素末尾添加一个空的块元素标签例如 <div style=”clear:both”></div>，或则其他标签<br />等（不常用）
  - 优点：通俗易懂，书写方便
  - 缺点：添加许多无意义的标签，结构化较差
- 父级添加overflow属性： 可以给父级添加overflow属性，属性设置为hidden、 auto、scroll 都可以实现
  - 优点：代码简洁
  - 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
- **父级添加after伪元素：**after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
  - 符合闭合浮动思想,结构语义化正确，无需添加标签
  - 由于IE6-7不支持:after，使用zoom:1触发hasLayout。
  - 代表网站：百度、淘宝、网易
```
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* IE6、7 专有 */
.clearfix {
	*zoom: 1;
}
```
- 父级添加双伪元素
  - 代码更简洁
  - 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
  - 代表网站：小米、腾讯
```
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
*zoom: 1;
}
```

属性值	说明
none	不浮动
left	向左浮动
right	向右浮动

定位

什么是定位
将盒子定在某一个位置自由的漂浮在其他盒子(包括标准流和浮动)的上面。定位=定位模式+边偏移，定位模式决定定位方式，边便宜决定元素最终位置
定位模式
定位模式决定定位的方式，他通过CSS的position属性来设置

position值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

position值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移
边偏移就是定位合作移动到最终位置，有 top、bottom、left和right4个属性

position值	语义	语义
top	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离
top	`top: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离
top	`top: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

div{
	position: relativr;
	left: 100px;
	top: 100px;
}

静态定位
元素默认定位方式，无定位的意思
- 按照标准流特性摆放元素位置，它没有边偏移
- 很少用到
```
选择器 {position: static;}
```
相对定位
相对定位是元素相对于它原来在标准流中的位置来说的
- 相对于自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
```
选择器 {position: relative;}
```
绝对定位
绝对定位是元素以带有定位的祖先元素来移动位置的
- 完全脱标-完全不占位置；
- 无祖先元素或祖先元素没有定位，则以浏览器为准定位(Document文档)
- 祖先有定位，则以最近一级有定位的祖先的左上角为基点
子绝父相
- 子级使用绝对定位，父级则需使用相对定位
  - 子级绝对定位不占位置，可以放父盒子的任何一个地方不影响兄弟盒子
  - 父盒子需要加相对定位限制盒子在父盒子内显示
固定定位
是元素固定于浏览器可视区的位置，主要使用场景是在浏览器滚动时元素的位置不会改变
```
选择器 {position： fixed;}
```
- 以浏览器的可视窗口位参照点移动元素
- 跟父元素无任何关系
- 不随滚动条滚动
- 不占原先的位置，即脱标
粘性定位
相对定位和固定定位的混合(与页面滚动搭配使用，兼容性差，IE不支持)
```
选择器 {position： sticky;}
```
- 以浏览器的可视窗口位参照点移动元素
- 占有原先的位置
- 必须添加top、left、right、botton中的一个才有效果
定位叠放次序
应用z-index层叠等级属性可以调整盒子的堆叠顺序
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位 -无效
浮动的一些特性
- 具有浮动类似特性，行内元素可设置高度和宽度，块级元素不给宽度或高度默认为内容大小
- 脱标的盒子不会触发外边距塌陷
- 绝对定位会压住盒子，包括里面的文字、图片等所有内容，浮动不会

CSS书写顺序

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
/*布局定位属性*/
display: block;
position: relative;
float: left;
/*自身属性*/
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
/*文本属性*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
/*其他属性*/
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

元素的显示与隐藏

display
- display: none 隐藏对象，隐藏后不占原来的位置，通常搭配JS使用做特效
- display: block 除了转换位块级元素之外，同时还有显示元素的意思
visibility
- visibility: visible
- visibility: hidden，隐藏后继续不占原来的位置占有原来的位置
overflow
overflow属性指定了如果内容溢出一个元素的框时会发生扫码
- visible 不剪切内容也不添加滚动条
- hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
- scroll 不管超出与否，总显示滚动条
- auto 超出滚动条，未超出不显示滚动条

字体图标

使用图片的缺点
- 即使使用精灵图文件本身还是比较大
- 图片放大缩小会失真
- 图片一旦制作完成更换困难
字体图标的特性iconfont
展示的是图标，显示的是字体
- 轻量级，字体加载出来图标就会马上渲染出来，减少服务器请求
- 灵活性，本质是字体可以随意更改颜色、阴影、透明效果、旋转等
- 兼容性，几乎所有浏览器都支持
精灵图和字体图标使用
- 结构样式较简单使用字体图标
- 结构样式复杂使用精灵图
使用
- 下载
- 添加字体声明
- 复制添加到HTML
- 给元素指定字体，设置属性

overflow属性指定了如果内容溢出一个元素的框时会发生扫码 - visible不剪切内容也不添加滚动条 -hidden不显示超过对象尺寸的内容，超出的部分隐藏掉 -scroll不管超出与否，总显示滚动条 -auto` 超出滚动条，未超出不显示滚动条

字体图标

使用图片的缺点
- 即使使用精灵图文件本身还是比较大
- 图片放大缩小会失真
- 图片一旦制作完成更换困难
字体图标的特性iconfont
展示的是图标，显示的是字体
- 轻量级，字体加载出来图标就会马上渲染出来，减少服务器请求
- 灵活性，本质是字体可以随意更改颜色、阴影、透明效果、旋转等
- 兼容性，几乎所有浏览器都支持
精灵图和字体图标使用
- 结构样式较简单使用字体图标
- 结构样式复杂使用精灵图
使用
- 下载
- 添加字体声明
- 复制添加到HTML
- 给元素指定字体，设置属性