前端基础CSS易忘知识

小小小帮手

已于 2024-02-16 15:48:37 修改

阅读量849

点赞数 25

文章标签： css 前端

于 2024-02-16 15:47:13 首次发布

本文链接：https://blog.csdn.net/weixin_43957009/article/details/135662949

版权

笔记来源：B站pink老师

视频链接：BV14J4114768

1 CSS基础选择器

1.1 通配符选择器

通配符选择器使用 "*" 定义，它表示选取页面中所有元素（标签）

1.2 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav {color:red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color:red;}

2 CSS字体属性

2.1 常见字体

font-family：'Microsoft YaHei',toboma,arial,'Hiragino Sans GB','微软雅黑'

2.2 字体大小

1、标题标签比较特殊，需要单独指定文字大小。

2、不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

3、可以给body指定整个页面文字大小

2.3 文字加粗

font-weight:

正常：400 或 normal

加粗：700 或 bord

2.4 字体的符合属性

font: font-style font-weight font-size/line-height font-family

顺序不得更换

2.5 文本颜色

表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色pink
十六进制	#FF0000
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

2.6 对齐文本

text-align属性用于设置元素内文本内容的对齐方式

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

补充：是盒子里面的行内元素对齐。盒子里面只有文字，那就是盒子里面的文字对齐方式

2.7 装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认。没有修饰线（最常用）
underlie	下划线。链接a自带下划线(常用)
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

重点：添加下划线和删除下划线。

2.8 文本缩进

1、text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。可以用px或者em。

2、浏览器默认的文字大小是16px。

3、该长度可以是负值。

4、em是一个相对位置，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

2.9 行间距

1、line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

2、行间距=上间距+文本高度+下间距

2.10 文本属性总结

属性	表示	注意
color	文本颜色	十六进制简写形式#fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离 text-indent：2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

3 CSS引入方式

3.1 外部样式表

<link rel="stylesheet" href="css文件路径">

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

4 综合案例

4.1 案例2-新闻页面

1、冷门标签 <hr>，作用：下划线.

2、当给body { font:16px} 设置全部文本大小时，除了标题的大小要单独设置以外，其余文字统一设置为16px。

3、按钮标签 <button></button>

4、想要图片居中对齐，则是让它的父亲 p标签添加水平居中的代码

5 Chrome调试工具

1、ctrl + 0 复原浏览器大小

6 Emmet 语法

6.1 快速生成HTML结构语法

1、生成标签直接输入标签名字按tab键即可比如 div 然后tab键，就可以生成<div></div>

2、如果想要生成多个相同标签加上* 就可以了比如 div*3 就可以快速生成3个div

3、如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

4、如果有兄弟关系的标签，用 + 就可以了比如 div + p

5、如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了

6、如果生成的div类名是有顺序的，可以用自增符号 $ 如： .demo$*5 结果是：5个自增的div，class为demo

7、如果想要在生成的标签内部写内可以用 {} 表示

div{$}*5 结果是五个自增的div

6.2 CSS简写

1、每个标签的首字母，如：text-align:center; 可以直接敲tac

2、w100 可以直接显示 width:100px;

7 CSS的复合选择器

7.1 链接伪类选择器

1、a:link 选择所有未被访问的链接

2、a:visited 选择所有已被访问的链接

3、a:hover 选择鼠标指针位于其上的链接

4、a:active 选择活动链接（鼠标按下未弹起的链接）

注意事项:

1、书写顺序：按照 LVHA （记忆法：love hate 或者 lv 包包 hao）

2、因为a链接在浏览器中有默认样式，所以需要给链接单独指定样式

7.2 :focus 伪类选择器

这个选择器针对表单元素来说

input:focus {
    background-color: yellow;
}

7.3 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最后一级元素	只选亲儿子	较少	符号是逗号 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav .header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{}和a:hover 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

8 CSS 的元素显示模式

8.1 什么是元素显示模式

元素（标签）以什么方式进行显示，HTML元素一般分为块元素和行内元素两种类型。

8.2 块元素

<div> 是最典型的块元素

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

独占一行、可以控制长度、宽度默认是父级容器宽度的100%

注意：

1、文字类的元素内不能使用块级元素

2、<p>标签用于防文字，不能放块级元素（div）

3、<h1>~<h6>是文字类的块元素，不能放其他块元素

8.3 行内元素

<span>是最典型的行内元素（也称内联元素）

1、一行显示多个

2、高宽设置无效

3、默认自身高度

4、行内元素只容纳行内元素或文本

注意：

1、链接标签里面不能再放链接标签

2、<a>可以放块级元素，将<a>转化成块级模式最安全

8.4 行内块元素

<img /> <input /> <td> 同时具有块元素和行内元素的特点。行内块元素

1、行内块元素在一行上，他们之间会有空白缝隙

8.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

8.6 元素模块转化

1、转块级 display：block;

2、转行内元素 display:inline;

3、转行内块元素 display：inline-block;

9 Snipaste 工具使用方法

官网：Snipaste

F1 截图

F3 固定

shift 切图颜色RGB和16进制转化（这个快捷键改不了，跟输入法按键切换冲突）

综合案例

1、案例3-小米商城

1、注意：将a设置成块级元素

2、单行文字垂直居中代码：让文字的行高等于盒子的高度

原因：行高=上空隙+文字本身高度+下空隙

行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，文字偏下。

10 CSS背景

10.1 背景颜色

background-color

一般情况下默认值transparent（透明），可以手动设置背景颜色为透明色

10.2 背景图片

background-img:url()

实际开发常见用于logo或者一些装饰性的小图片或者超大背景图。（精灵图也是用背景做的）

便于控制位置。

10.2.1 背景平铺

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

10.2.3 背景图片位置

background-position：

1、参数是方位词，一个表示x轴方向，一个表示y轴方向，可以只写一个方位词。left top right bottom center.

如果只指定一个方位名词，另一个省略，则第二个值默认居中对齐

2、参数是精确单位

第一个肯定是x坐标，第二个一定是y坐标。

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

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

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll 或者 fixed

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

10.4 背景复合写法

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

10.5 背景色半透明

background: rgba(0, 0, 0, 0.3);

1、最后是透明度取值0~1，可以把 0.3 写成 .3

2、背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

10.6 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
backgroun-img	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat-repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标
background-attachment	背景附着	scroll(背景滚动) / fixed (背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3); 后面必须是4个值

背景图片使用场景：精灵图、logo 小图片或超大背景图，便于控制图片的位置。

11 CSS的三大特性

层叠性、继承性、优先级

11.1 继承性

行高的继承性

body {

font: 12px/1.5 Microsoft YaHei;

}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

11.2 优先级

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!improtant 重要的	∞ 无穷大

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

12 盒子模型

12.1 边框（border）

border: border-width || border-style || border-color

连写没有顺序

12.1.1 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse; // 相邻的边框合并在一起

collapse 单词是合并的意思

12.2 内边距

如何自核本身没有指定width/height属性，则此时padding不会撑开盒子大小。

12.3 外边距

12.3.1 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定宽度（width）

② 盒子左右的外边距都设置为auto

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

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

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可。

12.3.2 外边距合并

使用margin定义块元素的垂直外边距时，有时候会出现外边距的合并。

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

取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

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

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

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

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow: hidden

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。

12.4 清除内外边距

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

12.5 圆角边框

border-radius
参数值可以为数值或百分比的形式

情况1：圆形

设置为正方形高度/宽度的一半（或50%）

情况2：圆角矩形

设置为矩形宽度的一半(或50%)

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

12.6 盒子阴影

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

注意：

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列。

12.7 文字阴影

值	描述
h-shadow	必须，水平阴影的位置。允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

13 浮动

三种布局方式:

标准流（普通流/文档流）
浮动
定位

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

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

1. 脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）

2. 浮动的盒子不再保留原先的位置

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

13.1 浮动元素经常和标准流父级搭配使用

1、先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准则

2、浮动的盒子智慧影响浮动盒子后面的标准流，不会影响前面的标准流。

13.2 清除浮动

不方便给父盒子高度，子盒子必须浮动，处理方法：

clear: both; 清除浮动的策略是: 闭合浮动

方法：

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clea:both"></div>，或者其他标签（如<br />等）。

注意：要求这个新的空标签必须是块级元素。

2. 父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll。

（外边距合并也用了overflow）

3. 父级添加after伪元素

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

4. 父级添加双伪元素

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

14 学成在线案例

14.1 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 / background:linear-gradient

注意：

<button></button>是行内块元素

15 定位

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

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

15.1 子绝父相

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

15.2 固定定位

固定定位小技巧：固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

15.3 定位叠放次序 z-index

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

15.4 定位拓展

15.4.1 绝对定位盒子居中对齐

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;：让盒子向左移动自身宽度的一半。

15.4.2 定位特殊性

绝对定位和固定定位也和浮动类似。

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3.如果一个盒子既有left属性也有right属性，则默认会执行left属性，同理，又有top和bottom，会执行bottom

15.4.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

15.4.4 绝对定位（固定定位）会完全压住盒子

浮动的元素不会压住下面标准流的文字，绝对定位会压住下面标准流的文字。

浮动最初产生的目的：是让文字环绕着图片的

16 元素的显示与隐藏

16.1 display属性

display 属性用于指定一个元素应可见还是隐藏。
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。

16.2 visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。

16.3 overflow 溢出

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

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

17 CSS高级技巧

17.1 精灵图

移动背景图片位置，此时可以使用 background-position

17.2 字体图标

字体图标下载地址：

icomoon字库：http://icomoon.io
阿里iconfont字库：http://www.iconfont.cn/

17.2.1 字体图标的引入

1.把下载包里面的 fonts 文件夹放入页面根目录下。

2.在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

3. html 标签内添加小图标。

<span>  </span>

4. 给标签定义字体。

span {
 font-family: "icomoon";
}

17.2.2 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

17.3 CSS三角

div {
 width: 0;
 height: 0;
 line-height: 0; // 为了兼容性补充的，高版本浏览器可不写这句
 font-size: 0; // 为了兼容性补充的，高版本浏览器可不写这句
 border: 50px solid transparent;
 border-left-color: pink;
}

17.4 用户界面样式

17.4.1 鼠标样式 cursor

li {cursor: pointer}

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

17.4.2 轮廓线 outline

取消表单自带蓝色轮廓线。

input {outline: none; }

17.4.3 防止拖拽文本域 resize

textarea{ resize: none;}

17.5 vertical-align

vertical-align : baseline | top | middle | bottom

1、图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了

2、解决图片底部默认空白缝隙问题：

给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）
把图片转换为块级元素 display: block;

17.6 溢出的文字省略号显示

1. 单行文本溢出显示省略号--必须满足三个条件

/*1. 先强制一行内显示文本*/

white-space: nowrap; （默认 normal 自动换行）

/*2. 超出的部分隐藏*/

overflow: hidden;

/*3. 文字用省略号替代超出的部分*/

text-overflow: ellipsis;

2. 多行文本溢出显示省略号

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

17.7 常见布局技巧

1、margin负值运用