CSS 知识点

原创已于 2022-11-06 11:59:09 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-11-06 11:52:16 首次发布

这篇博客详细介绍了CSS的基础知识，包括选择器的作用、分类，字体属性、文本属性和引入方式。深入讨论了CSS复合选择器、元素显示模块、背景属性、盒子模型以及浮动和定位等核心概念。此外，还涵盖了Emmet语法、CSS的三大特性、显示和隐藏元素，以及一些实用技巧如鼠标样式、字体文件和精灵图。

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

5 行间距格式：需要使用字体的标签名（类，id）{line-height：20px}

4 表格的粗细边框（collapse）编辑

1 浮动元素经常和标准流父级搭配使用（标准流最基本布局方式）

css是层叠样式表的英语简称

规则：由选择器以及一条或多条声明

注：一般在<head>中写<style>.<style>中写css

css语法规范

代码风格

1 样式格式书写

书写格式

2 样式大小写

样式大小写

3 空格规范

选择器

1 选择器的作用

根据不同需求把不同的标签选择出来

2 选择器分类

分为基础选择器和复合选择器两大类

基础选择器是由单个选择器组成的，包括标签选择，类选择器，ID选择器和通配符选择器

（1 标签选择器：指用HTML标签作为选择器，按名称分类为其中一类标签指定统一CSS样式

优点：快速统一放置同类型样式缺点：不能差异化设置

标签选择器语法

（2 类选择器（与函数调用相识）

如果想差异化选择不同的标签，单独一个或者几个标签可以使用类选择器

.类名（自定义）{宽，高，颜色} （自定义函数相似）

用class属性来调用

口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用

类选择器注意事项

多类名使用方式（可以增加代码的复用率）

（3 id选择器

使用方法与类选择器一样#：定义 id：调用

区别：id选择器只能调用一次，被使用过一次就失效了

（4 通配符选择器

选取页面中所有元素

基础选择器总结

CSS字体属性

CSS fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如倾斜）

1 字体系列

格式：需要使用字体的标签名（类，id）{font-family：字体名，字体名}

多个字体同时定义时，按顺序选择。第一有就选一，第一没有就选二

2 字体大小

格式：需要使用字体的标签名（类，id）{font-size：大小 px（像素点）}

3 字体粗细

格式：需要使用字体的标签名（类，id）{font-weight：数字}

4 文字样式

格式：需要使用字体的标签名（类，id）{font-style：normal}

5 复合属性（节约代码）

格式：需要使用字体的标签名（类，id）{文字样式粗细大小字体}

字体属性总结

文本属性

CSS text（文本）属性可以定义文本颜色，文本对其，装饰文本，文本缩进，行间距

1 文本颜色

格式：需要使用字体的标签名（类，id）{color：颜色}

2 对齐文本

格式：需要使用字体的标签名（类，id）{text-aligm：senter}

3 装饰文本

格式：需要使用字体的标签名（类，id）{text-decoration：underline}

4 文本缩进

格式：需要使用字体的标签名（类，id）{text-inden：20px}

5 行间距格式：需要使用字体的标签名（类，id）{line-height：20px}

文本属性总结

CSS引入方式（书写位置）

1 内部样式表（嵌入式）

2 行内样式表（行内式）

3 外部样式表（链接式）

把css代码放在其他.css文件夹里，书写位置变了但代码组成方式不变

可以在.css书写多个代码

引入方式（书写位置）总结

emmet语法

1 快速生产HTML结构语法

2 快速生成css样式语法

3 快速格式化代码

CSS复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

*复合选择器可以更准确，更高效的选择目标元素（标签）

*符合选择器是由两个或多个基础选择器通过不同方式组成的

*常用有：后代选择器，子选择器，并集选择器，伪类选择器

1 后代选择器（空格）重要

2 子选择器（>）重要

3 并集选择器（，）重要

用于集体声明，竖着写代码，最后一个不加“，”

4 伪类选择器（：）

用于向其他选择器添加特殊效果

（1 链接伪类选择器（按顺序编写L>V>H>A）

/* 链接伪类选择器 */

.box ul li a:hover{

color: greenyellow;

text-decoration: underline}

（2 :focus伪类选择器

选取获得焦点的表单元素（控件）

复合选择器总结

元素显示模块

1 块元素

2 行内元素

3 行内块元素

4 元素显示模式转换

特殊情况下，一个模式需要转换到另一个模式

如：想增加<a>的触发范围

转换代码（直接写在选择器声明里）

元素显示模式总结

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

1 背景颜色

2 背景图片

3 背景平铺

4 背景图片的位置

*当位置是方位名词

*当位置是精确单位

*参数是混合单位

5 背景图像固定（背景附着）

6 背景复合写法

7 背景半透明

背景总结

CSS的三大特性

1 层叠性（覆盖性）

2 继承性

优先级

！important写在声明后面

注：如果是复合选择器权重是会叠加的，但是不会进位

盒子模型

1 看透网页布局的本质

2 盒子模型的组成

3 border（边框）

*边框的复合写法

4 表格的粗细边框（collapse）

5 内边距（padding）

*内边距复合写法

*设置内边距会影响到盒子大小

6 外边距（margin）

*外边距水平居中

7 外边框合并与塌陷

合并

两个相邻盒子都有外边距就保留大的边距省略小的

嵌套塌陷问题

8 清除内外边距

9 ps测量像素

圆角边框（重点）

可以使盒子变成圆角

语法：border-radius：length（半径长度）参数可以是数值也可以是百分比

正方形改圆把数值设为高度的一半，矩形设高度的一半。四个值可以按顺时针简写。分开写如border-top-left-radius：length（左上角）

.box {width: 200px;

height: 100px;

background-color: greenyellow;

border: 1px solid black;

/* 四个边角可以不一样大 radius：半径（圆的半径） */

border-radius: 10px 20px 30px 40px;}

盒子阴影（重点）

盒子阴影不占空间，不影响其他盒子

.box {width: 200px;

height: 100px;

background-color: greenyellow;

box-shadow: 10px 10px 5px 10px rgba(0, 0, 0, 0.3);}

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，外部改为内部阴影

浮动（float）

float属性用于创建浮动框，将其移到某一边，直到左右边缘或者另一个浮动框边缘。

.box {width: 100px;

height: 100px;

background-color: greenyellow;

float: left;}

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

#实际开发中会包含多种布局方式，可以让多个块级元素在一行排列显示

1 浮动元素经常和标准流父级搭配使用（标准流最基本布局方式）

先用标准流定一个大盒子在把里面子元素浮动起来

标准流：块级元素独占一行，往下排列。行内元素往右排，碰到父元素自动换行

2 浮动的特性（重难点）

（1 脱离标准流（最重要特性）

a 脱离标准流的控制（浮）移动到指定位置（动）。俗称脱标

b 浮动的盒子不再保留原先的位置，不会影响前面的标准流，只会影响后面的。

c 在一行内显示且顶端对齐

d 任何元素都可浮动，浮动元素具有行内块元素的特性。块元素没设宽度浮动起来大小就由内容来决定。浮动元素之间是没有间隙的

3 清除浮动

本质：清除浮动元素造成的影响

（1 清除浮动的原因

由于父亲盒子很多情况下不方便给高度，但是子盒子浮动又不占用原文档流，会影响到下面的标准流盒子排版

（2 清除浮动的方法

.clear{clear:both}

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

a 额外标签法（隔墙法）

在最后一个浮动元素后面添加一个额外块标签，添加清除浮动样式。工作可能用到实际不常用

b ：overflow（给父级添加）

将其属性值设置为hidden，auto，scroll。

c ：after伪元素法（给父亲添加）

：after是额外标签法的升级版。没有添加标签，结构更简单,但是要照顾低版本。

.clearfix:after{

    content:"";

    display:block;

    height：0；

    clear:both;

    visibility:hidden;}

d 双伪元素清除浮动（给父亲添加）

.clearfix:before,.clearfix:after{

    content:"";

    display:table;}

.clearfix:after{

      clear:both;}

/*照顾低版本*/

.clearfix{

     *zoom:1; }

总结

为什么清除浮动？

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

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

CSS属性书写顺序（重要）

建议遵循以下顺序

1.布局定位属性：display /position/ float / clear / visibility/overflow （建议 display第一个写，毕竟关系到模式）

2.自身属性:width/height / margin/ padding/border/ background

3.文本属性:color/font/text-decoration/text-align/vertical-align/white- space/ break-word

4.其他属性（CSS3 ） : content/cursor / border-radius/ box-shadow / text-shadow/ backgrounddinear-gradient...

页面布局整体思路

为了提高网萸制作的癖，布局时通常有以下的整体思路:

1 .必须确定页面的版心（可视区），我们测量可得知.

2 .分析页面中的行模块，以及每个行模块中版J模块.其实页面布局第一准则.

3 .一行中的列模块经常浮动布局先确定每个列的大小，之后确定列的位置.页面布局第二椒!J

4 .制作HTML结构.我们还是遵循，先有结构，后有样式的原则.结构永远最重要.

5 .所以缕清布局结构，再写代码尤为重要.这需要我们多写多积累.

CSS定位

可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

定位的组成：定位=定位模式+边偏移定位模式用于一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

1 定位模式

值	语义	特点
static	静态定位	无定位
relative	相对定位	参照自己原来的位置进行移动。不脱标继续保留自己原来的位置注：子绝父相
absolute	绝对定位	以祖先元素定位，如果祖先无定位则以浏览器为准定位(document文档）。脱标不再占有原来位置注：子绝父相
fixed	固定定位	以浏览器的可视窗口为参照点移动元素。不随滚动条滚动。固定定位不占有原先的位置。
sticky	sticke;top:80px	粘性定位占有原先位置（相对定位），当达到偏移量触发值变为固定定位。

2 边偏移

边偏移属性	示例	描述
top	top:80px	顶部偏移量，定义元素相对于父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于父元素左边线的距离
right	right:px	右侧偏移量，定义元素相对于父元素右边线的距离

3 定位的叠放顺序

z-index:权重值

.fixed {

position: fixed;

top: 45%;

left: 20px;

z-index: 99999;

}

显示和隐藏元素

1 display属性（用的最多）

display:none;隐藏对象（隐藏元素后不再占有原来的位置）

display:block;除了转换块元素，同时还有显示元素的意思

2 visibility属性

visibility:visible；元素可见

visibility:hidden；元素隐藏（继续占有原来的位置）

3 overflow属性

:visible不剪切内容也不添加滚动条

:hidden不显示超过对象尺寸的内容，超出部分隐藏

:scroll不管是否超出，总是显示滚动条

:auto超出自动显示滚动条，不超出不显示滚动条

鼠标样式

cursor:pointer

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

行内块与文字对齐方式（行内块垂直对齐）

vertical-align:top

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