CSS

丈墨...大约 27 分钟

CSS

在学习前端基础—— CSS 的一些笔记

简介

美化网页，布局网页

两个主要部分构成：选择器以及一条或多条声明

h1 {
  color: red;
}

代码风格：展开格式；一般用小写字母；冒号后面保留一个空格，选择器与大括号间留一个空格

选择器

按照不同需求选出不同的标签

分类：

基础选择器:标签选择器、类选择器、id 选择器、通配符选择器

复合选择器

标签选择器：选择同一类的所有标签
类选择器：想要差异化的选择不同的标签，单独选一个或者某几个标签

.类名 {

属性 1：属性值 1；

...

}

需要用class 属性来调用

类选择器-多类名：一个标签多个类名

<div class="red font35">内容</div>

class 中可以写多个类名，用空格隔开

使用场景：对标签元素，可以调用公共类和独有类，节省代码，统一修改较方便

id 选择器：(只能调用一次)

#id名 {

属性：属性值

...

}

通配符选择器：

使用“*”定义，表示选取页面中所有的标签

\* {

属性：属性值；

...

}

字体属性

字体系列：

使用 font-family 属性定义文本的字体系列

 {
  font-family: "微软雅黑/Microsoft YaHei" ；;
}

注：各个字体之间使用英文状态下的逗号隔开；一般情况下，如果有空格隔开的多个单词组成的字体，加引号；尽量使用系统默认自带的字体，保证可以在浏览器中正常显示，常见的字体：body{font-family: "Microsoft YaHei",tahoma,arial,"Hiragino San GB";};尽量用英文字体，多个字体时，依次使用，直到浏览器能够正常显示为止。

使用 font-size 属性定义

 {

font-size： 20px;

}

不同浏览器默认字体大小不一致，尽量给一个明确值大小；在 body 中指定整个页面的字体大小，标题标签比较特殊，需要单独指定文字大小；谷歌浏览器默认字体大小为 16px

字体粗细:

使用 font-weight 设置

 {
  font-weight: 700;
} //不要带单位，一般都是用数字来设置，400——normal，700——bold

字体样式：

用 font-style 来设置

 {
  font-style: normal;
} //normal为默认值，italic——显示斜体样式

平时很少给文字加斜体，相反，会给斜体标签（em,i）改为不倾斜

字体的复合属性：

把文字样式综合来写，节约代码

body {
  font: font-style font-weight font-size/line-height font-family;
}

必须按照此顺序书写，每个属性间用空格隔开；不需要设置的属性可以省略（取默认值），但是必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

文本属性

定义文本的外观，比如文本的颜色、对齐、缩进、行间距。

文本颜色

color 属性定义文本颜色，用预定义的颜色值（表示颜色的单词）、十六进制（最常用）、RGB 代码（color: rgb(255,0,0);）

对齐文本

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

div {
  txet-align: center;
}

属性值：left——左对齐（默认值）；right——右对齐；center——（在盒子中）居中

装饰文本

txet-decoration 属性规定添加到文本的装饰，比如下划线、删除线、上划线

div {
  text-decoration: underline;
}

属性值：none——默认，没有装饰线；underline——下划线，链接 a 自带下划线；overline——上划线；line-through——删除线

文本缩进

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

div {

text-indent： 10px;//可以是负值

基本上写为：

txet-indent： 2em；

}

em 是一个相对单位，就是当前元素一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小

行间距(由上间距、下间距、文本高度组成)

line-height 属性用于设置行间的距离，可以控制文字与行之间的距离

p {
  line-height: 26px;
}

CSS 引入方式

三种样式表（按书写位置或者引入方式）

内部样式表（内嵌式）

是将 css 写在 html 页面的内部，单独放在一个 style 标签中

style 标签理论上可以放在 html 文档的任何地方，但是一般放在 head 标签中；通过这种方式，可以方便控制整个页面的元素样式设置；代码结构清晰，但是并没有实现结构与样式完全分离；平时练习时常用

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

在元素标签内部的 style 属性中设定 css 样式，适合于修改简单样式。

<div style="color: red; font-size: 12px;">内容</div>

外部样式表

实际开发中使用，样式单独写到 css 文件中，之后把 css 文件引入到 html 页面中使用

使用 link 标签引入这个文件：

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

Chrome 调试工具

Ctrl+滚轮可以放大开发者工具代码大小
左边是 html 元素结构，右边是 css 样式
右边 css 样式可以改动数值（左右箭头或者直接输入）和查看颜色
Ctrl+0 复原浏览器大小
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

Emment 语法

快速生成 HTML 结构语法

生成标签：直接输入标签名按 tab 键即可
如果想要生成多个相同的标签，加上*就行，eg: div*3
如果有父子级关系的标签，用>就可以，eg： ul>p
如果有兄弟关系的标签，用+就可以，eg： div+p
如果生成的标签带有类名或者 id 名字，直接在后面分别加上‘.demo’或者‘#two’ 再 tab 键
如果生成的类名想要有顺序，可以使用自增符号 $,eg: .demo$ *5
想要同时输入标签内容，可以直接加上{}，里面写标签内部的内容

快速生成 css 样式语法

采用简写形式即可，eg: w200 按 tab 生成：width:200px，lh26 按 tab 生成：line-height：26px

快速格式化代码

当我们保存文件时自动格式化代码：

文件--->【首选项】---->【设置】
搜索 emmet.include
再 settings.json 下的【用户】中添加以下语句：

"editor.formatOnType":true,"editor.formatonsave": true
  //只需要设置一次即可，以后都可以自动保存格式化代码了
;

CSS 的复合选择器

建立再基础选择器之上，由基础选择器组合形成，常用有：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

又称包含选择器，选择父元素里面的子元素

语法：元素一元素二

元素一二中间用空格隔开，元素一是父，元素二是子（儿子、孙子等等），选择到的是元素二

元素一二可以是任意基础选择器

子选择器

只能选择某元素的最近一级子元素，就是只选亲儿子

语法：元素 1>元素 2

大于符号隔开，元素 1 是父级，元素 2 是子级，选定的是元素 2

并集选择器

选择多组标签，同时设置样式

语法：元素 1,元素 2

任何形式的选择器都行，用英文逗号隔开，表示选择的是元素 1 和元素 2

约定的语法规范，并集选择器是竖着写，并且最后一个选择器后面不加逗号

伪类选择器
- 用于向某些选择器加特殊效果，比如给链接加特殊效果
  分类：链接伪类、结构伪类等等
  1. 链接伪类选择器
  a:link //选择所有未被访问（没有被点击过）的链接
  a:visited//选择访问过的链接
  a:hover//选择鼠标经过的链接
  a:active//选择的是鼠标正在按下还没有弹起鼠标的那个链接
  注意事项：
  - 为了确保生效，按照 LVHA 的顺序声明：link;visited;hover;active
  - 因为 a 链接在浏览器中有默认的样式，所以在实际工作中要给链接单独指定样式
    实际常用写法：a {}和 a:hover {}

2.focus 伪类选择器

获取焦点（光标）的表单元素

一般来说 input 类表单才能获取：

input:focus { background-color:yellow;}

CSS 的元素显示模式

什么是元素显示模式：不同的元素标签以什么方式显示，HTML 元素一般分为块元素和行内元素

块元素：

特点：独占一行；高度、宽度、内外边距都可以控制；宽度默认是容器（父级宽度）的 100%；是一个容器及盒子，里面可以放行内或者块级元素

注：文字类元素里面不能使用块级元素，eg:p 标签，标题标签里面不能放 div 等块级元素

行内元素

特点：相邻行内元素在一行上，一行可以显示多个；高、宽直接设置是无效的；默认宽度就是本身文本的宽度；行内元素只能容纳文本或其他行内元素

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

行内块元素

特殊的几个标签——img、input、td,同时具有块元素和行内元素的特点

特点：相邻行内块在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）；默认宽度就是文本内容的宽度（行内元素特点）；高度、行高、内外边距都可以控制（块级元素特点）

元素显示模式转换

一个模式元素需要另一个模式的特性，eg：想要增加链接 a 的触发范围

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

单行文字垂直居中

css 没有提供文字垂直居中的代码，但是可以使用一个小技巧来实现：

让文字行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

CSS 的背景

背景颜色

background-color: 颜色值/transparent（默认值）;

背景图片

添加

实际开发中常见于 logo 或者一些小图片或者超大的背景图片或者精灵图，优点：便于控制位置

添加语法：background-image : none(默认值)/url(路径)；

背景平铺

默认图片是自动平铺的

语法：background-repeat:repeat/no-repeat/repeat-x/repeat-y;

背景图片位置

语法：background-position：x y;//xy 可以是方位名词，也可以是精确单位

（1）方位名词：xy 没有顺序关系，如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐

参数：top center bottom left center right

（2）精确单位：x 表示水平，y 表示竖直，如果只指定一个数值，那该数值一定是坐标，另一个默认垂直居中

参数：百分数，像素值

（3）混合单位：方位名词和精确单位混合使用，第一个是 x 坐标，第二个是 y 坐标

背景图片固定

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

语法：background-attachment: scroll(滚动，是默认值)/ fixed(固定)

背景的复合性写法：（在实际开发中，更提倡这种写法）

节约代码量，将以上属性写在一个属性中；虽没有特定的书写顺序，但是有一般约定的顺序

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

背景色半透明：（只是背景色半透明，盒子里面的内容不受影响）

语法：background：rgba(0,0,0,0.3);

最后一个参数是 alpha（α）透明度，取值在 0~1 之间

CSS 的三大特性

层叠性、继承性、优先性

层叠性

相同的选择器设置相同样式，此时样式就会有一个层叠（有冲突）

原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行那个
其他的样式不冲突，就不会别层叠
2.继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

恰当地使用继承可以简化代码，降低 css 样式的复杂性
可以继承某些样式（text-，font-，line-这些元素开头的可以继承，以及 color 属性）

行高的继承性

body{

    font:12px/1.5 Microsoft YaHei;

}

行高可以跟单位也可以不跟单位；如果子元素没有设置行高，则会继承父元素的行高为 12*1.5；

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

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

优先级

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

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

//其中“！important”直接加在属性值的后面就行，eg：color： red!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

CSS 的盒子模型

盒子模型

网页布局的本质：
1. 准备相关网页元素，基本都是盒子 Box
2. 利用 css 设置盒子样式，然后摆放到相应位置（核心）
3. 往盒子里面装内容
盒子模型（Box Model）的组成：

边框(border)、内容(content)、内边距(padding)、外边距(margin)

边框：（会影响盒子大小）
属性有粗细（像素值）、样式（主要是 solid、dashed-虚线、dotted-点线）、颜色
语法：border-width||border-style||border-color
复合写法：
```
border: 1px solid red; //没有顺序，但是一般这样写
```
也可以分开写：
```
border-top: 1px solid red; //只设置上边框，其他的同理（下为bottom）
```
表格的细线边框：

控制相邻单元格的边框

语法：border-collapse：collapse;//表示相邻边框合并在一起

内边距（会影响盒子大小）

边框与内容的距离

简写：

这 4 种情况开发中都会遇到

如果盒子本身没有指定 width（此时会默认为 100%）/height 属性，此时 padding 就不会撑开盒子大小

外边距（margin）

控制盒子与盒子之间的距离

简写方式与 padding 是完全一样的

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

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

语法：margin：0 auto；//最为常用

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

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

清除内外边距：

网页元素很多都带有默认的内外边距，而且不同浏览器的默认值也不一致，因此在布局前，首先要清除网页元素的内外边距

语法：* {

    padding:0;//清除内边距

    margin:0;//清除外边距

}//CSS文件的第一句代码

注：行内元素为了照顾兼容性，尽量只设置左右内外边距（上下的直接设置不起作用），但是转换为块级元素或者行内块元素就可以了

PS 基本操作

小知识：去除无序列表里面的小圆点，list-style: none;

圆角边框

设置元素外边框为圆角

语法：border-radius：length；

盒子阴影

为盒子添加阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

//前两个值是必须的，其他的可以省略

注：

默认的是外阴影（outset），但是不可以设置这个单词，否则会导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

为文本添加阴影

语法：text-shadow：h-sahdow v-shadow blur color;

CSS 浮动

浮动

传统网页布局的三种方式
网页布局本质——用 css 来摆放盒子
- 普通流（标准流/文档流）
  就是标签按照规定的默认方式排列
- 浮动
- 定位
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
什么是浮动：
用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘
语法：选择器{float：属性值；}//none-不浮动（默认），left-元素向左浮动，right-元素向右浮动
浮动特性：
1. 浮动元素会脱离标准流（脱标）
  - 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
  - 浮动的盒子不在保留原先的位置
2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对其排列
  注：浮动元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子就会另起一行对齐
3. 浮动元素会具有行内块元素特性
  任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
  - 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加宽度后，它的大小根据内容来决定
  - 浮动的盒子中间没有缝隙，是紧挨着一起的
  - 行内元素同理
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则
一浮全浮
一个元素浮动了，理论上其余的兄弟元素也要浮动，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

why 清除浮动
由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子
清除浮动的本质：
本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
语法：
选择器{clear：属性值}
//实际开发中几乎用 clear：both
策略：
闭合浮动：只让浮动在父盒子内部影响，不影响负责父盒子外面的其他盒子
方法：
- 额外标签法（隔墙法）（不常用）
  在浮动元素末尾添加一个空的标签，eg：<div style="clear:both"></div>，或者其他标签（如<br/>）
  优点：通俗易懂，书写方便；缺点：添加许多无意义的标签，结构化较差
- 父级添加 overflow 属性
  给父级元素添加 overflow 属性，值可以设置为 hidden、auto 或 scroll
  优点：代码简洁；缺点：无法显示溢出的部分
- 父级添加 after 属性（百度、淘宝、网易）
  ：after 方式是额外标签法的升级版，也是给父元素添加
  优点：没有增加标签，结构更简单；缺点：照顾低版本浏览器
```
.clearfix（类名）:after {
  content: "";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;
}

.clearfix {
  //IE6、7专有

  *zoom: 1;
}
```

//使用此方法时只需要将此段代码复制使用就行



- 父级添加双伪元素（小米、腾讯）

  也是给父元素添加

  优点：代码更简洁；缺点：照顾低版本浏览器
  ```css
  .clearfix:before,.clearfix:after {

  content:"";

  display:table;

  }

  .clearfix:after {

  clear:both;

  }

  .clearfix {

  *zoom: 1;

  }

  //直接复制使用
  ```

PS 切图

常见图片格式
图层切图
图层切图、切片切图、PS 插件切图
- 图层切图：
  最简单的切图方式：右击图层——>快速导出为 PNG
  但是很多情况下，我们需要合并图层再导出：
  1. 选中（shift）需要的图层：图层菜单——>合并图层（ctrl+e）
  2. 右击——>快速导出
- 切片切图
  1. 利用切片选中图片：利用切片工具手动划出
  2. 导出选中的图片：
    文件菜单->导出->存储为 web 设备所用格式->选择我们要的图片格式->存储（选所切中的图片）
- PS 插件切图
  详情见：https://www.bilibili.com/video/BV14J4114768?p=193&spm_id_from=pageDriver&t=260.8open in new window

CSS 属性书写顺序（重点）

让自己看起来更加的专业

页面布局整体思路

导航栏注意点：

CSS 定位

定位

为什么要学定位：
定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子
定位的组成
定位=定位模式（决定定位方式）+边偏移（决定元素位置）
- 定位模式
  用 position 属性设置，static——静态定位，relative——相对定位，absolute——绝对定位，fixed——固定定位
  - 静态定位（了解）
    默认定位方式，无定位的意思，按照标准流摆放位置，没有边偏移，很少用到
    语法：{position：static}
  - 相对定位（重要）
    语法：选择器 {position：relative；}
    特点：相对于自己原来的位置移动；移动后原来的位置继续占有，后面的盒子依旧以标准流的方式对待它
  - 绝对定位（重要）
    语法：选择器 {position：absolute；}
    特点：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考来移动；绝对定位不再占有原来的位置
    注：子绝父相——父级需要占有位置，因此是相对定位；子盒子不需要占有位置，则是绝对定位
  - 固定定位（重要）
    语法：选择器{position：fixed；}
    特点：以浏览器的可视窗口作为参照点移动；跟父元素没有任何关系；不随滚动条滚动；不占有原先的位置（可视为特殊的绝对定位）
    小技巧——固定在版心右侧位置：
  - 粘性定位
    语法：选择器 {position：sticky；top：10px；}
    特点：以浏览器可视窗口为参照点移动元素；占有原先位置；必须添加 top、left、right、bottom 中的一个才有效
    兼容性差，IE 不支持
- 边偏移
  有 top，bottom，left，right4 个属性，直接给像素值，要在定位的盒子中才能使用
定位叠放次序
语法：选择器 {z-index：1；}
数值可以是正负整数或 0，默认是 auto，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位；只有定位的盒子才有 z-index 属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin：0 auto 水平居中
解决方法：left：50%：让盒子的左侧移动到父级元素的水平中心位置
margin-left：-100px：让盒子向左移动自身宽度的一半
定位的特殊性
绝对定位和固定定位也和浮动类似：行内元素添加绝对或者相对定位，可以直接设置高度和宽度；块级元素添加绝对或者相对定位，如果不给宽度或者高度，默认大小是内容的大小；脱标的盒子不会触发外边距塌陷
绝对（固定）定位会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流里面的文字/图片（因为浮动最初就是为了做文字环绕效果的），但是绝对（固定）定位会压住下面标准流里面所有内容

注：如果一个盒子既有 left 属性又有 right 属性，默认执行 left，同理，默认执行 top

元素的显示与隐藏

让一个元素在网页中隐藏或者显示出来

display 属性
属性值：none：隐藏对象/block：除了转换为块级元素之外，还有显示元素的意思
display 隐藏元素后，不再占有原来的位置
visibility 属性
属性值：visible：可见/hidden：隐藏
visibility 隐藏元素后，继续占有原来的位置
overflow 溢出
属性值：visible：可见/hidden：隐藏/scroll：溢出部分显示滚动条，不溢出时也显示/auto：溢出时显示滚动条，不溢出时不显示
一般情况下，都不会让溢出的内容显示出来，因为溢出的部分会影响布局，但是如果有定位的盒子，请慎用 overflow：hidden，因为他会隐藏想要显示的多余的部分

精灵图

使用目的
为了有效地减少服务器接收和发送请求的次数，提高网页的加载速度
精灵图（sprites）的使用
原理：针对小的背景图片使用（放到一张大图中）；主要借助于背景位置来实现——background-position；一般情况下精灵图都是负值。（注：网页中，x 轴右边走是正值，左边走是负值，y 轴同理）
缺点：图片文件还是比较大；图片放大缩小会失真；一旦图片制作完成想要更换非常复杂

字体图标

解决精灵图的一些缺点，用于显示常用的小图标，但是本质属于字体

优点
轻量级：一个图标字体比一系列图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器
注：不能替代精灵图技术，只是对工作中的图标部分技术的提升和优化；简单的图标用字体图标，复杂的用精灵图
字体图标的下载
网站：icomoon 字库 http://icomoon.io|阿里iconfont字库open in new window http://www.iconfont.cn/open in new window
字体图标的引入
- 把下载包里面的 fonts 文件夹放入页面所在的目录下（同级）
- 在 CSS 样式中全局声明字体：简单理解把这些字体文件通过 CSS 引入到我们页面中。（一定注意字体文件路径的问题）
  可以在下载包里面的 style.css 文件中复制放到 CSS 中
- HTML 标签内添加小图标（从下载包里面的 demo.html 中复制小图标）
- 给小图标指示声明的字体
字体图标的追加
如果之前下载的图标不够用，需要添加新的字体图标，则把压缩包里面的 selection.json 重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可

CSS 三角

网页中常见的三角形，直接用 CSS 画出来就可以了

代码

 {
  width: 0;

  height: 0;

  line-height: 0;

  font-size: 0; //这两句是为了兼容性问题

  border: 50px solid transparent;

  border-left-color: pink;
}

CSS 用户界面样式

就是更改一些用户操作样式，以便更好的用户体验

更改用户的鼠标样式——设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状
语法：选择器 {cursor：pointer；}
属性值：default：箭头（默认）/pointer：小手/move：移动/text：文本/not-allowed：禁止
表单轮廓线
取消表单默认的蓝色轮廓线（边框）
语法：input {outline：none/0；}
防止拖拽文本框
语法：textarea {resize：none;}

vertical-align 属性应用

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素。给图片/表单设置 middle 属性值，让文字与图片垂直居中对齐
语法：选择器 {vertical-align：baseline-默认，基线对齐|top-顶线对齐|middle-居中对齐|bottom-底线对齐}
解决图片底部默认空间缝隙问题
bug：图片底侧会有一个空白间隙，原因是行内元素会和文字的基线对齐
解决方法：
- 给图片添加 vertical-align：middle/top/bottom（推荐使用）
- 把图片转换为块级元素：display：block；

溢出的文字省略号显示

单行文本
- 先强制一行内显示文本：white-space：nowrap；（默认是 normal 自动换行）
- 超出部分隐藏：overflow：hidden；
- 省略号代替超出部分：text-overflow：ellipsis；

多行文本

语法：

overflow：hidden；

text-overflow：ellipsis；

//弹性伸缩盒子显示

dislpay：-webkit-box；

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

-webkit-line-clamp：2；

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

-webkid-box-orient：vertical；

注：此方法有较大的兼容性问题，更推荐后台人员来做这个效果

常见布局技巧

margin 负值的运用
让每个盒子左移一个像素——margin：-1px，这样相邻盒子就会压住边框，边框就不会加粗了
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，加相对定位（保留位置），如果有定位，则加 z-index），就可以达到鼠标经过边框变色的效果
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性

p273（在 B 站大学学的黑马前端open in new window，看完了基础部分，后面进阶的就没有继续学了）

昵称

邮箱

网址

按正序
按倒序
按热度

CSS

# CSS

# 简介

# 选择器

# 字体属性

# 文本属性

# CSS 引入方式

# Chrome 调试工具

# Emment 语法

# CSS 的复合选择器

# CSS 的元素显示模式

# CSS 的背景

# CSS 的三大特性

# CSS 的盒子模型

# CSS 浮动

# CSS 属性书写顺序（重点）

# 页面布局整体思路

# 导航栏注意点：

# CSS 定位

# 元素的显示与隐藏

# 精灵图

# 字体图标

# CSS 三角

# CSS 用户界面样式

# vertical-align 属性应用

# 溢出的文字省略号显示

# 常见布局技巧

预览:

CSS

简介

选择器