标签：浮动 入门 样式 标签 元素 盘点 选择器 CSS 属性

CSS入门知识盘点

• CSS
• • CSS语法规范
  • CSS代码风格
• CSS选择器
• • 基础选择器
  • • 标签选择器
    • 类选择器
    • • 类选择器——多类名
    • id选择器
    • 通配符选择器
  • 字体属性
  • • 字体系列
    • 字体大小
    • 字体粗细
    • 字体样式
  • 复合属性
  • 文本属性
  • • 文本颜色
    • 对齐文本
    • 装饰文本
    • 文本缩进
    • 行间距
  • CSS引入方式
  • • 行内样式表（内联样式表）
    • 内部样式表
    • 外部样式表
  • Chrome调试工具
  • • 使用调试工具
  • Emmet语法
  • 快速格式化代码
  • 复合选择器
  • • 后代选择器（重）
    • 子选择器
    • 并集选择器（重）
    • 伪类选择器
    • • 链接伪类选择器
  • 元素显示模式
  • • 块元素
    • 行内元素
    • 行内块元素
    • 元素显示模式转换
    • • 单行文字垂直居中
  • CSS的背景
  • • 背景图片
    • 背景平铺
    • 背景位置
    • • 方位名词
    • 背景附着
    • 背景色半透明
  • CSS三大特性
  • • 层叠性
    • 继承性
    • • 行高的继承性
    • 优先级
    • • 权重叠加
• 网页布局
• • • 页面布局整体思路
    • 头部制作
    • 搜索框
  • 盒子模型
  • • 边框
    • 内边距
    • 外边距
    • • 外边距合并
      • • 相邻块元素垂直外边距的合并
        • 嵌套块元素垂直外边距的塌陷
    • 清除内外边距
  • 传统网页的三种布局
  • 标准流
  • 浮动
  • • 为什么需要浮动？
    • 什么是浮动？
    • 浮动特性
    • • 脱标
      • 在一行显示
      • 行内块元素特性
    • 浮动布局注意点
    • • • 浮动元素与父级元素搭配使用
        • 一个元素浮动，其余元素也跟着浮动
  • 清除浮动
  • 定位
  • • 为什么需要定位？
    • 定位组成
    • • 定位模式
      • 边偏移
    • 静态定位（static）
    • 相对定位（relative）
    • 绝对定位
  • 元素的显示与隐藏
  • • display属性
    • visibility可见性
    • overflow溢出
  • 字体图标
  • • 优点
    • 字体图标的下载
    • 字体图标的引入
  • CSS用户界面样式
  • • 鼠标样式cursor
    • 表单轮廓和防止拖拽文本域
    • • 轮廓线outline
      • 文本域
  • vertical-align属性
  • 清除图片底侧空白缝隙
  • 溢出的文本省略号显示
  • • 单行文本溢出
    • 多行文本溢出
    • CSS初始化

CSS

使用场景：美化，布局页面

又叫层叠样式表，CSS样式表，级联样式表，它也是一种标记语言

CSS语法规范

主要由两部分组成：选择器及一条或多条声明，声明内包含属性和属性值

属性和属性值以键值对的形式出现；属性和属性值用：分隔；每条声明后跟；

CSS代码风格

采取展开式写法

内容全为小写

属性值前面，冒号后面，保留一个空格

选择器和大括号中间，保留一个空格

VSCode里alt+shift+f直接规范代码格式

CSS选择器

根据不同需求把不同标签从里面选出来，即选择标签，分为基础选择器和复合选择器

基础选择器

标签选择器

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

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

优点：能快速为页面中不同类型的标签设置统一样式

缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

差异化选择不同的标签，单独选择一个或几个标签

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

类选择器使用“.”进行标识，后面紧跟类名

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

类选择器——多类名

可以给一个标签指定多个类名，从而达到更多的选择目的，即一个标签多个名字

<div class="red font20">登录</div>

用法：

在标签class属性中写多个类名

多个类名中间必须用空格分开，这样这个标签可以分别具有这些类名的样式

优点：

可以把一些标签元素相同的样式放到一个类里面

这些标签可以调用公共的类，业可以调用自己独有的类

节省css代码，方便修改，相当于合并同类项

id选择器

#nav{
	属性1:属性值1;
	...
}
<div id="nav">id选择器</div>

id选择器和类选择器的区别：

①类选择器好比人的名字，同一个人（class）可以有不同的名字（类名），不同的人（class）也可以使用同一个名字（class）。

②id选择器好比人的身份证号，每个人的id都是唯一的，不得重复

③二者最大的不同是在使用次数上：类选择器在修改样式中使用次数比较多；id选择器一边用于页面唯一性的元素上，常与JS搭配

口诀：样式#定义，结构id调用。只能调一次，别人勿使用。

通配符选择器

CSS中，通配符选择器用“*”定义，表示选取页面中的所有元素（标签）

通配符选择器不需要调用，自动就给所有元素使用样式

字体属性

字体系列

各种字体间必须用英文状态下的逗号隔开

一般情况下，如果有空格隔开的多个单词组成的字体，加引号

尽量使用系统默认自带字体

最常见字体：Microsoft YaHei, tachoma, arial,Hiragino Sans GB

字体大小

px是最常用单位

谷歌浏览器默认文字大小16px

不同浏览器默认显示字号大小可能不一样，尽量用明确值

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

字体粗细

属性	属性值
normal	默认不加粗
bold	加粗
100-900	400等同于normal 700等同于bold 数字后不跟单位

字体样式

属性	属性值
normal	默认，显示标准样式
italic	倾斜

平时很少设置斜体，反而要给em,i 标签改为不倾斜字体

复合属性

字体属性把文字样式综合起来写

使用font属性，必须按 font-style，font-weight，font-size/line-height,font-family书写，不能更换顺序，各属性用空格隔开

不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用

文本属性

文本属性可以设置文本的颜色，对其文本，装饰文本，文本缩进，行间距等

文本颜色

div {
    color: red;
}

属性值	描述
预定义颜色值（英文单词）	red,green……
十六进制	#FF0000,#FF6600……
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

对齐文本

text-align设置元素文本对齐方式

div {
    text-align: center;
}

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

装饰文本

text-decoration对文本进行修饰

div {
    text-decoration: underline;
}

属性值	描述
none	默认（没有装饰线，也最常用）
underline	下划线，其中链接a 自带下划线
overline	上划线（几乎不用）
line-through	删除线（也不常用）

重点需要掌握如何添加下划线，如何删除下划线

文本缩进

text-indent指定文本的第一行缩进，通常是段落的首行缩进

div {
    text-indent: 10px;
}

设置该属性，所有元素的第一行都可以设置一个给定的长度，甚至长度可以是负值

div {
    text-indent: 2em;
}

em是相对单位，也就是当前元素一个文字的大小

若当前元素没有设置大小，剩余会按照父元素的一个文字大小

行间距

line-height属性设置行高，控制文字行与行之间的距离

p {
    line-height: 26px;
}

CSS引入方式

三大类：行内样式表（行内式）；内部样式表（嵌入式）；外部样式表（外链式）

行内样式表（内联样式表）

就是在元素标签内部的style属性设置CSS样式

<div style="color:red; font-size:20px;">这是一个内联样式</div>

该方法书写方便，权重高。但是由于书写繁琐，并没有体现出结构和样式相分离的思想，不推荐大量使用

内部样式表

就是写到HTML页面内部，将所有CSS代码抽出来，单独放到一个style标签中

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

style标签理论上可以放在html文档的任何地方，但一般会放在文档的head标签中

代码结构清晰，但没有完全实现样式和结构相分离

使用内部样式表设定CSS，通常被称为嵌入式引用，这也是练习时常用的方式

外部样式表

分两步

1.新建后缀名为.css的样式文件，把所有css代码放入此文件中

2.在HTML页面中，使用 link标签引入文件

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

属性	作用
rel	定义当前文档和被链接文档之间的关系，需要指定为stylesheet，表示被链接的是一个样式表文件
href	定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径

该方法完全实现结构和样式相分离。使用外部样式表设定css,通常被称为外链式或链接式引用，这是开发中最常用的方式

Chrome调试工具

使用调试工具

1. Ctrl+滚轮，放大开发者工具的大小
2. Ctrl+0复原浏览器大小
3. 点击元素，右侧如果没有样式引入，极可能是类名或者样式引入错误
4. 如果有样式，但样式有黄色感叹号提示，则为样式书写错误

Emmet语法

重点：如果生成的div类名是有顺序的，用自增符号$

快速格式化代码

shift+alt+f

复合选择器

复合选择器建立在基础选择器基础上，对基本选择器进行组合

• 复合选择器可以更精确，更高效的选择目标元素
• 常用的复合选择器包括后代选择器，子选择器，并集选择器，伪类选择器等等

后代选择器（重）

后代选择器又称包含选择器，可以选择父元素里面的子元素，写法就是把外层标签写在外面，内层标签写在里面，中间空格分隔，当标签发生嵌套时，内层标签就成了外层标签的后代

元素1 元素2 { 样式声明 }

表示选中元素1里面的所有元素2，元素2就成了元素1的后代元素，其中元素1和元素2可以时任意基础选择器

子选择器

子选择器（子元素选择器）只能做为某元素的最近一级子元素

div > p { 样式声明 }   /*选择div里面所有最近一级的p标签元素*/

并集选择器（重）

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

ul,div { 样式声明 }   /* 选择 ul 和 div 标签元素*/

逗号理解为和，并集通常用于集体声明

伪类选择器

伪类选择器用于向某些选择器添加特殊效果，如为链接添加特殊效果，或选第一个，第n个元素

特点：用 : 表示，如: hover :first-child

链接伪类选择器

注意事项：为确保生效，按照LVHA的顺序声明即 : link , : visited , : hover , : active简记为love，hate

focus伪类选择器，中间不能加空格

焦点就是光标，一般情况input类表单元素才能获取，这个选择器主要针对表单而言

input:focus {
    background-color: yellow;
}

元素显示模式

块元素

常见块元素有h1-h6,p,div,ul,ol,li等，其中div是最典型的块元素

特点：

1. 独占一行

2. 高度，宽度，外边距以及内边距都可以控制

3. 宽度默认是容器的100%

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

注意：

1.文字类元素不能使用块级元素

2.p标签主要用于存放文字，p里面不能放块级元素，特别不能放div

3.同理，h1-h6等都是文字类块级元素，里面不能放其他块级元素

行内元素

常见行内元素a , strong , b , em , i , del , s , ins , u , span，其中span标签是最典型的行内元素，行内元素也称内联元素

特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高，宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或者其他行内元素

注意：

链接里不能再放链接

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

行内块元素

行内元素中有几个特殊的标签——img，input，td它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素

特点：

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

元素显示模式转换

元素模式的转换，就是一个模式的元素需要另一种模式的特性

行内元素转换为块级元素：display: block

块级元素转换为行内元素：display: inline

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

单行文字垂直居中

CSS中并没有文字垂直居中的代码，让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

行高分三个部分，文字本身高度+上空隙+下空隙

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

CSS的背景

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

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

背景图片

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰的小图片或者超大的背景图片，非常便于控制位置

background-image : none | url (url)

背景平铺

在HTML页面上对背景图像进行平铺，即background-repeat属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景位置

方位名词

background-position改变图片在背景中的位置

background-position: x y;

两个参数：如果都是方位名词，则两个值前后顺序无关，left top 和top left效果一致

背景附着

background-attachment设置背景图像是否固定或者随着页面其余部分滚动（视差滚动）

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

背景色半透明

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

r即red；g即green；b即blue；a即alpha透明度，取值范围在0-1之间

习惯上例子中的0.3用.3来表示

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

该属性为CSS3新增属性，IE9+版本支持

CSS三大特性

层叠性，继承性，优先级

层叠性

给相同的选择器设置相同的样式，此时一个样式会覆盖另一个冲突的样式。层叠性用来解决样式冲突

层叠性原则：就近原则，哪个样式离结构近，执行哪个样式

继承性

CSS中的继承：子标签会继承父标签的某些样式如文字颜色和字号

恰当地继承可以简化代码，降低CSS样式的复杂性

子元素可以继承父元素的样式比如text-,font-,line-等等以及color属性

行高的继承性

body{
    font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素行高的1.5

此时子元素的行高是：当前子元素文字大小的1.5倍

行高1.5这样的写法优势就是里面的子元素可以根据自己的文字大小自动调整行高

优先级

一个元素同时指定多个选择器时，会有优先级的产生

其中==选择器相同执行层叠性，选择器不同，z则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器或伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style	1，0，0，0
! important	无穷大

权重是由4组数字组成，但不会有进位

可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器

等级判断从左往右，如果某一位数值相同，则判断下一位数值

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

权重叠加

如果是符合选择器则会有权重叠加，需要计算权重

• 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

网页布局

1.准备好相关网页元素，元素基本都是box

2.利用css设置好盒子样式，然后摆放到相应位置

3.往盒子里加内容

页面布局整体思路

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

2.分析页面中的行模块，以及每个行模块中的列模块，这是第一布局准则

3.一行中的模块经常浮动布局，先确定每个列的大小之后再确定列的位置，这是页面布局第二准则

4.制作html结构，遵循先有结构，后有样式的原则，结构永远最重要

头部制作

导航栏开发注意点：

实际开发中，我们不会直接用a标签，而是用li包含a的做法

1.li+a语义更清晰，一看就是有条理的列表型内容

2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）

搜索框

搜索框默认两个部分组成：input输入框和button按钮

思路：

套一个父盒子，然后配置宽度总和一致的input输入框和button按钮

需要注意的是，input输入框和button按钮均为行内块元素，默认中间会存在一部分空隙，会把框内的button按钮挤下去，不在一行显示

解决方法：给两个元素都添加浮动

盒子模型

border边框，content内容，padding内边距，margin外边距

边框

属性	作用
border-width	定义边框粗细，单位px
border-style	边框的样式
border-color	边框颜色

合并边框：border-collapse

注意：边框会额外增加盒子的实际大小，有两种方案解决

1.测量盒子大小的时候，不量边框

2.若测量时包含边框，则需要width/height减去边框高度

内边距

padding，设置内容和边框的距离

值的个数	表达含义
padding: 5px	上下左右都有5像素内边距
padding: 5px 10px	上下内边距5像素，左右内边距10像素
padding: 5px 10px 20px	上5像素 左右10像素 下内边距20像素
padding: 5px 10px 20px 30px	上5像素 右10像素 下20像素 左30像素 顺时针

如果盒子已经设置了宽度和高度，padding会影响盒子的实际大小，会撑大盒子

解决方法：让width/height减去多出来的内边距大小

外边距

margin用于设置盒子和盒子之间的距离

margin可以让块级盒子水平居中，但盒子必须指定宽度，且左右外边距都设置为auto

外边距合并

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

主要分两种情况：相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的塌陷

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

当上下两个相邻的块元素相遇时，如果上面的元素设有margin-bottom，下面的元素有margin-top，则它们之间的垂直边距不是margin-top和margin-bottom的和，这种取两值中较大值的现象称为相邻块元素垂直外边距的合并

解决方案：只给其中一个盒子设置margin值

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

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

解决方案：①给父元素定义上边框 ②给父元素定义上内边距 ③给父元素添加overflow:hidden,当然还有其他方法，比如添加浮动，固定，绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素有很多默认的内外边距，且不同浏览器默认的也不一致，因此在布局前我们要清楚网页元素的内外边距

* {
    padding: 0;
    margin: 0;
}

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

传统网页的三种布局

标准流（普通流，文档流），就是标签按照规定好的默认方式进行排列，标准流是最基本的布局方式

浮动

定位

实际的网页开发中，一个页面基本包含了这三种布局方式

网页布局标准：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

标准流

所谓标准流，就是标签按照规定好默认样式排列

像块级元素，行内元素等等这些都是标准流布局，标准流就是基本的布局方式

标准流，浮动，定位都是用来摆盒子的，把盒子摆放到合适位置，布局也就完成了，一般一个页面基本均包含这三种布局方式

浮动

为什么需要浮动？

①当我们选择把多个块级元素摆放到一行时会比较难，虽然转为行内块元素可以让其在一行内显示，但之间会有较大空隙，不好控制

②当实现两个盒子的左右对齐时等等这些很多的布局效果，标准流无法完成，此时用浮动来进行布局，因为浮动可以改变元素标签的默认排列方式

浮动最典型的应用：让多个块级元素在一行显示

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

float属性用于创建浮动框，将其移动到一边，直达票左边缘或右边缘触及包含块或另一个浮动框的边缘

属性	属性值
none	元素不浮动
left	向左浮动
right	向右浮动

浮动特性

1.浮动元素会脱离标准流（脱标）

2.浮动的元素会在一行内显示并且在元素顶部对齐

3.浮动元素具有行内块元素的特性

脱标

设置浮动属性的元素会脱离标准流的控制，移动到指定位置，且浮动的盒子不会再保留原先的位置

在一行显示

在一行显示，盒子均设置浮动属性，浮动的元素是紧靠在一起的，如果父级宽度装不下这些盒子，多出的盒子会另起一行对齐

行内块元素特性

如果块级元素没有设置宽度，默认宽度和父级一样宽，但添加浮动之后，它的宽度由内容来决定

浮动的盒子中间没有空隙，紧挨在一起

浮动布局注意点

浮动元素与父级元素搭配使用

为了约束浮动元素的位置，网页布局一般采取的策略：

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

一个元素浮动，其余元素也跟着浮动

一个盒子里面如果有多个盒子，如果其中一个盒子动了，其他兄弟盒子也会浮动，但注意：浮动的盒子只影响其后面的标准流，不影响其前面的标准流

清除浮动

定位

为什么需要定位？

1.要实现某个元素可以自由的移动位置，并且压住其他盒子，这用标准流或者浮动很难实现

2.当滚动窗口的时候，盒子是固定在屏幕某个位置的

当面临上述情况时，我们需要用定位来实现

定位组成

将盒子固定在一个位置，定位就是在放盒子

定位=定位模式+边偏移

定位模式

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

边偏移

就是定位的盒子移动到最终位置，有top， bottom， left， right 四个属性

这些属性只有在定位存在的时候才可以使用，标准流和浮动不能使用这四种属性

静态定位（static）

静态定位按照标准流特性摆放位置，它没有边偏移

静态定位在布局时很少用到

相对定位（relative）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（以自我为中心）

特点：相对于原来的位置移动，原来在标准流中的位置依然占有，后面的盒子依然视其为标准流，相对定位没有脱标

绝对定位

在元素移动时，相对于祖先元素来说

特点：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位祖先元素为参考点进行移动

元素的显示与隐藏

类似网站广告，当点击关闭就不见了，但是当重新刷新页面时，会重新出现

本质：让一个元素在页面中隐藏或者显示出来

display属性

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

display：none； 隐藏对象

display：block；除了转换为块级元素，还有显示元素的意思

display隐藏元素后，不占有原来的位置

到后面应用会极其广泛，搭配JS可以做很多网页特效

visibility可见性

属性	属性值
inherit	继承上一个父对象的可见性
visible	对象可见
collapse	隐藏表格的行或列
hidden	对象隐藏

隐藏元素后，继续占有原来的位置

overflow溢出

对溢出的部分进行显示和隐藏

属性	属性值
visible	不剪切内容也不加滚动条
auto	在需要剪切内容时添加滚动条
hidden	不显示超过对象尺寸的内容
scroll	总是显示滚动条

字体图标

使用场景：显示网页中通用，常用的一些小图标

精灵图的缺点：

1.图片文件本身比较大

2.图片放大缩小会失真

3.图片制作完毕想要更换非常麻烦

字体图标iconfont展示的是图片，实际上是文字，可以很好的解决上述问题

优点

轻量级：一个字体图标比一系列图像要小，一旦字体加载了，马上会渲染出来，减少服务器的请求

灵活性：本质是文字，可以随便改变颜色，产生阴影，透明效果，旋转等

兼容性：几乎支持所有的浏览器，可以放心使用

但是字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

字体图标的下载

参考网站：icomoon和iconfont

字体图标的引入

TTF（TrueTypeFont）字库名称，是Apple公司和Microsoft公司共同推出的字体文件格式，随着windows的流行，已经变成最常用的一种字体文件表示方式。

下载下的字体文件放在对应文件根目录下，让它们在一个目录下

CSS用户界面样式

所谓界面样式，就是更改一些用户操作样式，以便更好地提高用户体验

鼠标样式cursor

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

表单轮廓和防止拖拽文本域

轮廓线outline

outline: none;

文本域

resize: none;

vertical-align属性

使用场景：设置图片或者表单（行内块元素）和文字垂直对齐

用于设置一个元素的垂直对齐方式，只针对行内元素和行内块元素有效

vertical-align: baseline| top| middle| bottom

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

清除图片底侧空白缝隙

为什么会有空隙？答：行内块元素会和文字的基线对齐

解决方法：

方法一：给图片添加vertical-align: middle|top|bottom属性

方法二：把图片转换为块级元素 display：block；

溢出的文本省略号显示

单行文本溢出

满足三个条件：

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

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

2.超出的部分隐藏

overflow: hidden;

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

text-overflow: ellipsis;

多行文本溢出

有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

解决方法

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit -box;
/*限制在一个块元素显示的文本的行数*/
-webkit -line -clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit -box -orient: vertical;

CSS初始化

不同浏览器对有些标签的默认值是不同的，伪类消除不同浏览对html文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

CSS初始化是指重设浏览器的样式（CSS reset）

border: 0; /*照顾低版本浏览器，如果图片外面包含了链接会有边框的问题*/
-webkit -font -smoothing :antialiased; /*抗锯齿形，文字放大后不会有太大的锯齿，让文字更清晰，是CSS3样式*/

unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样可以有效避免浏览器解释CSS代码时候出现乱码的问题

例子：

黑体：\9ED1\4F53

宋体：\58BB\4F53

微软雅黑：\5FAE\8F6F\96C5\9ED1

标签：浮动,入门,样式,标签,元素,盘点,选择器,CSS,属性
来源： https://blog.csdn.net/weixin_52377956/article/details/120403147

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。