CSS扫盲

1. 引入CSS样式表

要书写css样式，那css样式书写的位置在哪呢？

1.1 行内式

概念：称行内样式、行间样式.

是通过标签的style属性来设置元素的样式

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

案例：

<div style="color: red; font-size: 12px;">玛卡巴卡</div>

注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

1.2 内部样式表

概念：

称内嵌式

是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法格式如下：

<head>
<style type="text/CSS">
    div {
      color: red;
      font-size: 12px;
   }
</style>
</head>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/css" 在html5中可以省略。
- 只能控制当前的页面
缺点：

没有彻底分离

1.3 外部样式表

概念：

称链入式

是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

2. CSS基础选择器

2.1 标签选择器

概念：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

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

作用：

标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：

是能快速为页面中同类型的标签统一样式
缺点：

不能设计差异化样式。

2.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：

类名选择器

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

标签

<p class='类名'></p>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

2.3 类选择器特殊用法- 多类名

注意：

我们可以给标签指定多个类名，从而达到更多的选择目的。
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

2.4 id选择器

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签
```
<p id="id名"></p>
```

元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上。

2.5 通配符选择器

概念

通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意：

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

2.6 基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

基础选择器我们一共学了4个，每个都有自己的价值，可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。

尽量少用通用选择器 *
尽量少用 ID 选择器
不使用无具体语义定义的标签选择器 div span

3.font字体

3.1：font-size:大小

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

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

3.2 ：ont-family:字体

作用：

font-family属性用于设置哪一种字体。
p{ font-family:"微软雅黑";}

3.3：font-weight:字体粗细

在html中如何将字体加粗我们可以用标签来实现

使用 b 和 strong 标签是文本加粗。

属性值描述

normal 默认值（不加粗的）

bold 定义粗体（加粗的）

100~900 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

提倡：

我们平时更喜欢用数字来表示加粗和不加粗。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

3.4：font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

字体倾斜除了用 i 和 em 标签，还可以使用css实现

属性作用

normal 默认值，浏览器会显示标准的字体样式 font-style: normal;

italic 浏览器会显示斜体的字体样式。

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

3.5：font:综合设置字体样式

font属性用于对字体样式进行综合设置

基本语法格式如下

选择器 { font: font-style font-weight font-size/line-height font-family;}

固定顺序不能打乱，空格隔开，不需要设置的属性可以省略，font-size和font-family属性必须保留，否则该font属性不生效

font总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

4.外观属性

4.1：color:文本颜色

作用：color属性用于定义文本的颜色，取值方式有以下三种

表示表示属性值

预定义的颜色值 red，green，blue ...

十六进制 #FF0000，#FF6600，#29D794 ...

RGB代码 rgb(255,0,0)或rgb(100%,0%,0%) ...

表示表示	属性值
预定义的颜色值	red，green，blue ...
十六进制	#FF0000，#FF6600，#29D794 ...
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%) ...

4.2：text-align:文本水平对齐方式

作用：text-align属性用于设置让盒子里面的文本内容水平居中

属性解释

left 左对齐（默认值）

right 右对齐

center 居中对齐

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

4.3：line-height:行间距

作用：行与行之间的距离，即字符的垂直间距，一般称为行高。

一般情况下，行距比字号大7.8像素左右就可以了。

默认字体大小16px，line-height: 24px;

4.4：text-indent:首行缩进

作用：text-indent属性用于设置首行文本的缩进

建议：

建议使用em作为设置单位。

如果是汉字的段落， 1em 就是一个汉字的宽度：text-indent: 2em;

4.5：text-decoration 文本的装饰

作用：text-decoration 通常我们用于给链接修改装饰效果

值描述

none 默认。定义标准的文本。取消下划线（最常用）

underline 定义文本下的一条线。下划线也是我们链接自带的（常用）

overline 定义文本上的一条线。（不用）

line-through 定义穿过文本下的一条线。（不常用）

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

5. CSS复合选择器

5.1：后代选择器

作用：更能锁定一个元素，比如：.className h3 {color:orange}

外层标签写在前面，内层标签写在后面，中间用空格分隔

父级子级{属性:属性值;属性:属性值;}

5.2：子元素选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

.className>h3{color:red;}

5.3：交集选择器(不怎么使用)

由两个选择器构成，找到的标签必须同时匹配两个选择器

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如div.className{color:orange}

5.4：并集选择器（常用）

作用：实现一个样式，在多处使用

任何形式的选择器，都可以作为并集选择器的一部分,逗号隔开

.className,#id,p {color:orange}

5.5：链接伪类选择器

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果

当要同时使用多个的时候，建议顺序按照下面得来，有坑

a:link /* 未访问的链接 */

a:visited /* 已访问的链接 */

a:hover /* 鼠标移动到链接上，这个用得多*/

a:active /* 选定的链接 */

6.标签显示模式

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。典型代表分别就是div和span

6.1：块级元素的特点（div）

独自占用一行

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

宽度默认是容器（父级宽度）的100%（没有指定，则撑不开）

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

注意

文字类块级标签里面不能放其他块级元素。比如p和h1~h6、dt

5.2：行内元素的特点（span）

相邻行内元素在一行上，一行可以显示多个。

高、宽直接设置是无效的。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或则其他行内元素。

注意

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

5.3：行内快元素

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

默认宽度就是它本身内容的宽度。

高度，行高、外边距以及内边距都可以控制。

注意

<img />、<input />、<td>，是三个行内元素，有些资料说明为：行内快元素

6.4：三种模式转换和总结

块转行内：display:inline;

行内转块：display:block;

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

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

7.行高

何谓行高？

所以行高 = （1~2） + （7~9+ 4~5） + 5~6

也就是上距离 + 内容高度 + 下距离

7.1：单行文本垂直居中

文字的行高等于盒子的高度，可以实现：单行文本在盒子中垂直居中对齐。

如果行高大于高度文字会偏下。

如果行高小于高度文字会偏上。

8.background（背景）

8.1：背景颜色（color）

默认的值是 transparent 透明的

8.2：背景图片（image ）

background-image : url(images/test1.png);

参数作用

none 无背景图（默认的）

url 使用绝对或相对地址指定背景图像

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

8.3：背景平铺：repeat

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

参数作用

repeat 背景图像在纵向和横向上平铺（默认的）

no-repeat 背景图像不平铺

repeat-x 背景图像在横向上平铺

repeat-y 背景图像在纵向平铺

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

8.4：背景位置：position

background-position : length || length

background-position : position || position

参数值

length 百分数 | 由浮点数字和单位标识符组成的长度值

position top | center | bottom | left | center | right 方位名词

注意：

必须先指定background-image属性

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。

如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

如果只指定了一个方位名词，另一个值默认居中对齐。

如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y

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

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

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

8.5：背景附着（attachment）

这个名词不是很见名知意：设置背景是滚动的还是固定的

background-attachment : scroll | fixed

参数作用

scroll 背景图像是随对象内容滚动

fixed 背景图像固定

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

8.6：背景简写

background：属性的值的书写顺序官方并没有强制标准的，建议依照下面书写

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

语法：
background: orange url(image.jpg) repeat-y  scroll center top ;

8.7：背景透明（Css3）

语法：
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha 透明度取值范围 0~1之间

我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);

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

因为是CSS3 ，所以低于 ie9 的版本是不支持的。

9.CSS三大特性

9.1：CSS层叠性

当多个样式对同一元素设置时，后面的样式覆盖前面的样式

CSS层叠性：长江后浪推前浪，前浪死在沙滩上

9.2：CSS继承性

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

text-，font-，line-这些元素开头、以及color属性可以继承

9.3：CSS优先级

这个就得说说了，有时候我们设置某个元素的样式，但却没有生效的原因就在这

因为我们使用的选择器的权重低于另一个选择器的权重，就无法产生覆盖

每个选择器的权重如下：

标签选择器计算权重公式

继承或者 * （这个得特别注意一下） 0,0,0,0

每个元素（标签选择器） 0,0,0,1

每个类，伪类 0,0,1,0

每个ID 0,1,0,0

每个行内样式 style="" 1,0,0,0

每个!important 重要的 ∞ 无穷大

有多个基础选择器组合而成时，权重加法个位对个位，十位对十位，五进制一说

十位的一个1 大于个位的999+，哈哈哈哈哈，比如（0,0,1,0） > (0,0,0,11)

标签选择器	计算权重公式
继承或者 * （这个得特别注意一下）	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

10.CSS重点之一：盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

盒子的厚度我们成为盒子的边框（border）

盒子内容与边框的距离是内边距

盒子与盒子之间的距离是外边距

10.1：盒子边框（border）

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

border : 1px solid orange;

属性作用

border-width 定义边框粗细，单位是px

border-style solid(实线)、dashed(虚线)、dotted(点线)

border-color 边框颜色

属性	作用
border-width	定义边框粗细，单位是px
border-style	solid(实线)、dashed(虚线)、dotted(点线)
border-color	边框颜色

盒子边框写法总结表

很多时候，我们是可以单独给4个边框分别指定的。

上边框下边框左边框右边框

border-top-style:样式; border-bottom-style:样式; border-left-style:样式; border-right-style:样式;

border-top-width:宽度; border- bottom-width:宽度; border-left-width:宽度; border-right-width:宽度;

border-top-color:颜色; border- bottom-color:颜色; border-left-color:颜色; border-right-color:颜色;

border-top:宽度样式颜色; border-bottom:宽度样式颜色; border-left:宽度样式颜色; border-right:宽度样式颜色;

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

表格的细线边框

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0

但是两个单元格之间的边框会出现重叠，从而使边框变粗

table{ border-collapse:collapse; } //表示相邻边框合并在一起。

圆角边框

border-radius:length;  /* 可以是数值也可以是百分比 */
border-radius: 50%;    /* 实现正方形变圆圈 */

盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影；
　　
前两个属性是必须写的。其余的可以省略。

外阴影 (outset) 是默认的但是不能写想要内阴影可以写 inset
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

10.2：内边距（padding）

属性作用

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

内边距就是边框与内容之间的距离，内容大小是不是变的，所以，当我们指定了高宽后，再指定内边距，当内边距增大时，盒子也会随着增大，如果不想盒子变大，控制盒子高宽减小对应的值即可，如果我们没有知道高宽，使用内边距也不会撑开盒子

看到这里，我们就应该知道一个：盒子的高和宽 = 文本高/宽 + 内边距 + 边框

内边距简写

值的个数表达意思

1个值 padding：上下左右内边距;

2个值 padding: 上下内边距左右内边距；

3个值 padding：上内边距左右内边距下内边距；

4个值 padding: 上内边距右内边距下内边距左内边距；

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

10.2：外边距（margin）

margin就是控制盒子和盒子之间的距离

属性作用

margin-left 左外边距

margin-right 右外边距

margin-top 上外边距

margin-bottom 下外边距

margin值的简写（复合写法）跟 padding 完全相同。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

块级盒子水平居中

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

然后就给左右的外边距都设置为auto
text-align: center; /* 文字,行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 即可 */

10.3：其他相关

清除元素默认的内外编剧
* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

外边距合并

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

场景就是两个块级盒子，上面的设置了下边距，下面的设置了上边距，但是两个盒子之间的距离并不是两个外边距的和，而是两个外边距中的最大值（外边距塌陷）

解决方式：

尽量只给一个盒子设置外边距

嵌套块元素垂直外边距的合并

(前提)：对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

(问题)：父元素的上外边距会与子元素的上外边距发生合并

(结果)：合并后的外边距为两者中的较大者

(解决方案)：

可以为父元素定义上边框。

可以为父元素定义上内边距

可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题

11.CSS布局的三种方式

11.1：普通流 (标准流)

块级元素会独占一行，从上向下顺序排列；

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

常用元素：span、a、i、em等

11.2：浮动(float)

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

转成行块的话，会有两个问题

块级元素是一行显示了，但是中间有缝隙

不能精准控制每个块级元素的位置，比如左右对齐

语法：选择器 { float: 属性值; }

属性值描述

none 元素不浮动（默认值）

left 元素向左浮动

right 元素向右浮动

浮动的特点

漂浮在普通流的上面。脱离标准流，不占位置，俗称 “脱标”

float属性会改变元素display属性

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似，只是元素之间没有空白缝隙。

浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

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

浮动的运用

浮动和标准流的父盒子搭配

我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐

不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；

普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

建议：

如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

清除浮动
(浮动带来问题) ：父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

(清除浮动的本质)：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
(清除浮动的几种方法)：
选择器{clear:属性值;}    //一般我们只使用:both

| 属性值 | 描述                                       |
| ------ | ------------------------------------------|
| left   | 不允许左侧有浮动元素（清除左侧浮动的影响）  |
| right  | 不允许右侧有浮动元素（清除右侧浮动的影响）  |
| both   | 同时清除左右两侧浮动的影响（）             |
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style="clear:both"></div>
/*这个缺点也很明显：会添加许多没意义的标签*/
可以给父级添加： overflow为 hidden| auto| scroll  都可以
/*这个缺点也很明显：当内容增多时不会自动换行而是隐藏掉*/
使用after伪元素清除浮动
 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
/* 代表网站：百度，网易，淘宝 */
使用双伪元素清除浮动
.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
/*代表网站 : 小米、腾讯*/

11.3：定位(position)

将盒子定在浏览器的某一个位置，由的漂浮在其他盒子的上面

标准流元素 (最下面) --> 浮动元素 --> 定位元素 (最上面)

定位 = 定位模式 + 边偏移

定位模式：就是一种模式，各有各得特点，下面祥说

边偏移：我们定位的盒子，是通过边偏移来移动位置的

边偏移

边偏移属性示例描述

top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。

bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。

left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。

right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离

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

定位模式

语法：选择器 { position: 属性值; }

值语义

relative 相对定位

static 静态定位

absolute 绝对定位

fixed 固定定位

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

11.3.1：静态定位

就是默认的定位方式，就是不需要定位，相当于none，不做说明

11.3.2：相对定位

相对定位是元素相对于它原本在标准流中的位置来偏移。
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

11.3.3：绝对定位

绝对定位是元素以带有定位的父级元素来移动位置
父元素没有定位，则以浏览器为准定位
- 这里一般我们会将父元素设置为相对定位，因为相对定位既有定位，且还占用标准流的空间，不会影响其他的标准流的盒子布局（子绝父相）
完全脱标 —— 完全不占位置；

11.3.4：固定定位

固定定位是绝对定位的一种特殊形式
完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。

11.3.5：定位的运用

绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

实现方式：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

margin-left: -100px;：让盒子向左移动自身宽度的一半。

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序,数值越大，越靠上

z-index 只能应用于相对定位、绝对定位和固定定位的元素

定位改变display属性

display是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块

可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

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

12.CSS使用技巧

12.1.元素的隐藏与显示

display 显示

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。
且隐藏之后，不再保留位置。

实际开发场景：

配合js，鼠标经过，显示下拉菜单

overflow 溢出

设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值描述

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

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

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

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

实际开发场景

清除浮动

隐藏超出内容，不允许内容超出父级盒子

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

12.2.CSS用户界面样式

鼠标样式：cursor
- 设置在对象上移动的鼠标指针采用何种系统预定义的光标形状
- ```
<li style="cursor:pointer">我是小手</li>
```

属性值描述

default 小白默认

pointer 小手

move 移动

text 文本

not-allowed 禁止

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

轮廓线： outline
- 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
- 比如输入框的边框都是有的，一般我们会把他去掉
- ```
<input  type="text"  style="outline: 0;"/>
```
防止拖拽文本域： resize
- 实际开发中，我们文本域右下角是不可以拖拽的
- ```
<textarea  style="resize: none;"></textarea>
```

12.3.垂直对齐

垂直对齐：vertical-align
- 有宽度的块级元素水平居中对齐，是margin: 0 auto;
- 让文字水平居中对齐，是 text-align: center;
- vertical-align 垂直居中对齐，它只针对于行内元素或者行内块元素，不影响块级元素中的内容对齐， 通常用来控制图片/表单与文字的对齐
- ```
vertical-align : baseline |top |middle |bottom 
/* baseline ：图片和文字实现基线对齐*/
/* top      ：图片和文字实现顶部对齐*/
/* middle   ：图片和文字实现垂直居中对齐*/
/* bottom   ：图片和文字实现底部对齐*/
```
去除图片低侧的空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

然后基线和底线之间的缝隙就会留白，看起来局势个白色的缝隙

解决方案：

改变vertical-align，不为基线对齐

给img 添加 display：block; 转换为块级元素就不会存在问题了。

12.4.溢出的文字省略号显示

white-space：设置对象内文本显示方式，可以设置强制一行显示内容
white-space:normal ；默认处理方式
white-space:nowrap ；强制在同一行内显示，直到文本结束或遇到br才换行。

text-overflow：设置是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切 
text-overflow：ellipsis ； 当文本溢出时显示省略标记（...）

上面两个配合实现则可实现溢出的文字省略号显示

先强制一行显示：white-space:nowrap；
超出的本文隐藏：overflow: hidden;
设置溢出的用...代替：text-overflow：ellipsis；

posted @ 2018-12-29 14:28 鞋破露脚尖儿阅读(301) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

鞋破露脚尖儿