CSS笔记

fafu-yimu

已于 2023-11-06 23:54:45 修改

阅读量319

点赞数 2

文章标签： css 笔记前端

于 2023-11-06 23:50:12 首次发布

本文链接：https://blog.csdn.net/a92183/article/details/134257410

版权

CSS笔记

本笔记为作者学习时整理的笔记

CSS 字体属性

1.字体类型

font-family 定义字体类型

例如：

div {
	font-family: "微软雅黑";
}

div {
    font-fomily: "Microsoft Yahei";
}

/* 常见字体 */
"Microsoft YaHei"、"tahoma"、"arial"、"Hiragino Sans GB"

2.字体大小

font-size 定义字体大小

例如：

div {
    font-size: 20px;
}

/* 谷歌浏览器默认的字体大小为16px */

3.字体粗细

font-weight 定义字体粗细

例如：

div {
    font-weight: bold; 
}

div {
    font-weight: normal;
}

/* 默认值为normal(400) 粗体bold(700) 可用数字代替*/

4.字体风格(倾斜)

font-style 定义字体风格(倾斜)

例如：

div {
    font-style: normal;
}

div {
    font-style: italic;
}

/* 默认值为normal标准字体  italic倾斜 */

5.字体复合写法

font 字体复合写法

例如：

div {
    font: font-style font-weight font-size font-family;
}

div {
    font: 字体是否倾斜 字体是否加粗 字体大小 字体类型;
}

div {
    font: italic 700 20px "Microsoft YaHei";
}

/* 连写不能更换顺序,空格隔开 
   除了font-size和font-family必须保留  其他均可省略 */

CSS 文本属性

1.文本颜色

color 文本颜色

例如：

div {
    color: red;
}

2.文本对齐

text-align 文本对齐

例如：

div {
    text-align: center;
}

div {
    text-align: left;
}

div {
    text-align: right;
}

/* left左对齐(默认)  right右对齐  center居中对齐 */

3.文本装饰

text-decoration 文本装饰

例如：

div {
    text-decoration: none;
}

div {
    text-decoration: underline;
}

div {
    text-decoration: overline;
}

div{
    text-decoration: line-through;
}

/* none没有装饰线(默认)  underline下划线  overline上划线  line-through删除线 */

4.文本缩进

text-indent 文本缩进

例如：

div {
	text-indent: 10px;   
}

div {
    text-indent: 2em;
}

/* 2em缩进两个文字 */

5.行间距(行高)

line-height 行间距(行高)

例如：

div {
    line-height: 26px;
}

/* 文本默认16px 则上间距和下间距分别为(26-16)÷2=5 */

CSS Emmet语法

CSS 复合选择器

1.后代选择器

任意后代

元素1 元素2 {
    
}

ul li {
    
}

/* 最终选择的是元素2  
元素2可以是儿子,也可以是孙子,只要是元素1的后代即可 */

2.子选择器

只选亲儿子

元素1>元素2 {
    
}

div>p {
    color: pink;
}

<div>
    <p>亲儿子1</p>
    <p>亲儿子2</p>
    <span>
        <p>孙子</p>
    </span>
</div>

以上写法只有亲儿子1和亲儿子2的颜色会改变，孙子不会改变

3.并集选择器

通过英文逗号( , )隔开批量定义标签样式

元素1,元素2,元素3 {
    
}

div,ul,p {
    
}

4.链接伪类选择器

通过冒号( : )表示添加特殊效果

常用链接伪类选择器

LVHA顺序声明，即：link visited hover active

/* 未点击的链接*/
a:link {
    color:red;
}

/* 点击过的链接 */
a:visited {
    color:green;
}
/* 鼠标经过的链接 */
a:hover {
    color:pink;
}
/* 鼠标按下还未弹起鼠标的链接 */
a:active {
    color:purple;
}

工作时常用的链接伪类选择器写法

/* 所有的链接  gary灰色*/
a {
    color:gray;
}

/* 鼠标经过链接时  由灰色变成红色 */
a:hover {
    color:red;
}

5.:focus伪类选择器

:focus伪类选择器用于选取获得焦点(光标)的表单元素

/* 鼠标点击表单时的动作--->背景颜色变黄色 */
input:focus {
    background-color:yellow;
}

CSS 元素显示模式

1.块级元素

常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等等，其中<div>是最典型的块元素

块级元素特点：

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

注意：

文字类的元素内不能使用块级元素
<p>标签里面不能放块级元素，特别是<div>
同理，<h1>~<h6>都是文字类块级标签，里面不能放其他块级元素

2.行内元素

常见的行内元素有：<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签是最典型的行内元素，也称内联元素。

行内元素特点：

相邻的行内元素在一行上，一行可以显示多个
高、宽直接设置是不生效的，需要转化为块级元素
默认宽度就是它本身内容的宽度
行内元素直接容纳文本或其他行内元素

注意：

链接里不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换为块级元素最安全

3.行内块元素

常见的行内块元素有：<img>、<input>、<td>，它们同时具有块元素和行内元素的特点。

行内块元素特点：

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

4.显示模式的转换

转换为块元素：display:block; 占一行可设置宽高和内外边距

转换为行内元素：display:inline; 一行显示多个宽高不生效

转换为行内块元素：display:inline-block; 一行显示多个可设置宽高和内外边距

CSS 背景

1.背景颜色

background-color 背景颜色

例如：

div {
    background-color: pink;
}

div {
    background-color: transparent;
}

/* 默认为transparent透明 */

2. 背景图片

background-image 背景图片

例如：

div {
    background-image: none;
}

div {
    background-image: url(图片路径)
}

/* 默认为none无背景图  url() 指定路径图片*/

3.背景平铺

background-repeat 背景平铺

例如：

div {
    background-repeat: repeat;
}

div {
    background-repeat: no-repeat;
}

div {
    background-repeat: repeat-x;
}

div {
    background-repeat: repeat-y;
}

/* 默认为repeat 在横向和纵向上平铺 
   no-repeat 不平铺
   repeat-x  在横向上平铺
   repeat-y  在纵向上平铺 */

4.背景图片位置

background-position 背景图片位置

例如：

div {
    background-position: 40px 20px;
}

div {
    background-position: right top;
}

div {
    background-position: center 20px;
}

参数是精确数值

第一个为X坐标，第二个为Y坐标
如果只指定一个，该数值则为X坐标，另一个默认垂直居中

参数是方位名词

如果两个都是方位名词，则前后顺序无所谓
如果只指定一个方位名词，则另一个值默认水平居中

参数是混合单位

第一个值是X坐标，第二个为Y坐标

5.背景图片固定

background-attachment 背景图片固定

例如：

div {
    background-attachment: scroll;
}

div {
    background-attachment: fixed;
}

/* scroll背景图片随内容滚动   fixed背景图片固定 */

6.背景图片复合写法

background 背景复合

例如：

div {
    background: 背景颜色 背景图片路径 背景平铺 背景图片滚动 背景图片位置
}

div {
    background: transparent url(图片路径) no-repeat fixed center top
}

/* 没有特定的书写顺序 通常以 背景颜色、背景图片路径、背景平铺、背景图片滚动、背景图片位置  这样来写*/

7.背景半透明

background 背景半透明

例如：

div {
    background: rgba(0, 0, 0, 0.3);
}

注意：

最后一个参数是alpha透明度，取值范围在0~1之间
通常习惯把0.3的0省略掉，写成background: rgba(0, 0, 0, .3)
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS的三大特性

层叠性、继承性、优先级

1.层叠性

2.继承性

3.优先级

优先级注意点：

权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表(直接在body里的标签加style)为1000，!important无穷大。
继承的权重是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.边框

border边框

例如：

div {
    border: 边框粗细  边框样式  边框颜色;
}

div {
    border: 1px solid pink;
}

/* 1.书写顺序没有要求   2.可把边框分开写*/

div {
    border-top: 1px solid red;
}

边框样式可以设置以下值：

none：没有边框（默认值）
solid：边框为单实线（最常用）
dashed：边框为虚线
dotted：边框为点线

边框会影响盒子实际大小：

边框辉额外增加盒子的实际大小，因此我们有两种方案解决

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要 width/height 减去边框宽度

2.表格的细线边框

border-collapse合并边框

可以控制让表格之间的边框重叠起来而不是两个边框紧挨

div {
    border-collapse: collapse;
}
/* 合并 */

3.内边距

padding内边距

控制边框与内容之间的距离

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

例：

div {
    padding：5px;  1个值，代表上下左右都有5像素内边距
}

div {
    padding: 5px 10px;  2个值，代表上下内边距是5像素，左右内边距是10像素
}

div {
    padding: 5px 10px 20px;  3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
}

div {
    padding: 5px 10px 20px 30px;  4个值，上5像素 右10像素 下20像素 左30像素  顺时针
}

注意事项：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

内边距padding设置多少，就给对应盒子的 width/height 减去多出来的内边距大小

4.外边距

margin外边距

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

margin-left：左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

外边距的典型应用：

外边距可以让块级元素水平居中，但是需满足以下两个条件：

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

div {
    width: 960px;
    margin：0 auto;
}

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

外边距合并问题：

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

清除内外边距：

为什么要清除内外边距？

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

* {
    padding: 0;
    margin: 0;
}

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

5.去除无序列表li的小圆点

list-style 列表风格

li {
    list-style: none;
}

6.圆角边框

border-radius外边框圆角

div {
    border-radius: 5px;
}

参数值可以为数值或者百分比的形式
如果是正方形，先要变成一个圆，只需要把数值修改为高度或宽度的一般即可，或者直接写50%
可以直接给4个值，分别代表左上角、右上角、右下角、左下角顺时针
也可分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

7.盒子阴影

box-shadow盒子阴影

div {
    box-shadow: 10px 10px 10px -6px rgba(0,0,0,.3);
}

8.文字阴影

text-shadow文字阴影

div {
    text-shadow：10px 10px 10px rgba(0,0,0,.3);
}

CSS浮动

传统网页布局的三种方式

普通流(标准流)
浮动
定位

1.标准流

块级元素会独占一行，从上向下顺序排列
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

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

常用行内元素：span、a、i、em

2.浮动

float浮动

浮动可以实现的效果：

可以让多个块级元素一行内排列显示
可以让多个块级盒子水平排列成一行
可以让两个盒子实现左右对齐

div{
    float: none;
}

div {
    float: left;
}

div {
    float: right;
}

/* none不浮动(默认)  left左浮动  right右浮动 */

3.浮动的特性

加了浮动之后的元素会具有很多特性：

浮动的元素会脱离标准流(脱标)
浮动的元素会有一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

浮动的元素会脱离标准流(脱标)

加了浮动的元素会浮起来，如果后面有标准流，该标准流就会升到前面一个浮动元素的位置上，此时变成浮动元素在上，后面的标准流在下

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

如果多个盒子都设置了浮动(left)，则它们会按照属性值一行内显示并且顶端对齐排列

注意：浮动的元素是相互贴紧靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

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

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后就会具有行内块元素相似的特性。

如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨在一起的
行内元素同理

4.浮动的常见场景

在实际开发中，会见到浮动元素经常和标准流父级搭配使用

网页布局：

第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
第二准则：先设置盒子的大小，之后设置盒子的位置

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

4.常见网页布局

浮动布局注意点：

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

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2）一个元素浮动了，理论上其他的兄弟元素也要浮动

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

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5.清除浮动

为什么要清除浮动？

因为所有父盒子不是必须都要有高度的，例如商品列表页面和新闻文章详情页，具体给多少高度是不能确定的。

当父盒子不给高度的时候，子盒子给了浮动，由于浮动不占位置，就会影响后续的标准流盒子
由于浮动元素不在占用原标准流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子去自动检测高度。这时父级便有了高度，就不会影响下面的标准流了

清除浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

在实际工作中，几乎只用clear: both

div {
    clear: both;
}

div {
    clear: right;
}

div {
    clear: left;
}

/*  left不允许左侧有浮动元素(清除左侧浮动的影响) 
	right不允许右侧有浮动元素(清除右侧浮动的影响)
	both同时清除左右两侧浮动的影响           */

6.清除浮动的方法

额外标签法(隔墙法)，是W3C推荐的做法
父级添加overflow属性
父级添加:after伪元素
父级添加双伪元素

额外标签法(隔墙法) 不常用

在浮动元素末尾添加一个空的标签(块级元素)。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <div class="clear"></div> -->
        <!-- 浮动元素末尾添加一个空的span标签 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

</html>

父级添加overflow属性

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

优点：代码简洁

缺点：无法显示溢出的部分

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>
</html>

父级添加:after伪元素

:after方式是额外标签法的升级版，也是给父元素添加

优点：没有增加标签，结构更简单

缺点：无法照顾低版本浏览器

代表网站：百度、淘宝、网易等

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { /* IE6、7 专有 */
    *zoom: 1;
}

父级添加双伪元素

也是给父元素添加

优点：代码更简洁

缺点：无法照顾低版本浏览器

代表网站：小米、腾讯等

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

清除浮动总结：

为什么要清除浮动？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了

清除浮动的方式	优点	缺点
额外标签发(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden	书写简单	无法显示溢出部分
父级:after伪元素	结构简单	由于IE6、7不支持:after，兼容性问题
父级双伪元素	结构简单	由于IE6、7不支持:after，兼容性问题

CSS属性书写顺序

布局定位属性：display / position / float / clear / visibility / overflow（建议display第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

例如：

.jbc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin：0 10px;
    padding: 20px 0;
    font-family: "Microsoft YaHei";
    color: pink;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}

页面布局分析

必须确定页面的版心(可视区)，我们测量可得知
分析网页中的行模块，以及每个行模块中的列模块
制作HTML结果。遵循 先有结构，后有样式的原则
运用盒子模型原理，通过div+css布局来控制网页的各个模块

CSS定位

css定位可以做什么？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口的时候，盒子是固定在屏幕的某个位置的

浮动和定位的区别？

浮动可以让多个块级盒子一行没有缝隙地排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个父盒子内移动位置或者固定在屏幕地某个位置，并且可以压住其他盒子

定位=定位模式+边偏移

定位模式：

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

边偏移(相对于父元素)：

top: 80px 顶端偏移量
bottom: 80px 底部偏移量
left: 80px 左侧偏移量
right: 80px 右侧偏移量

1.静态定位static

静态定位是元素的默认定位方式，无定位的意思

div {
    position: static;
}
/* 静态定位按照标准流特性摆放位置，它没有边偏移 
   静态定位在布局时很少用到  */

2.相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)

div {
    position: relative;
    top: 100px;
    left: 100px;
}
/* 相对定位是 相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
   原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
*/

特点：不脱标，最典型的应用是给绝对定位当爹的

3.绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)

div {
    position：absolute;
    top: 100px;
    left: 100px;
}
/* 如果祖先元素没有定位，则以浏览器为准来定位(Document文档)
   如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级有定位的祖先元素为参考点移动位置
   绝对定位不再占有原先的位置
*/

特点：脱标

4.子绝父相的由来

子级是绝对定位的话，父级要用相对定位

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子
父盒子需要加定位来限制子盒子再父盒子内的显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

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

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

5.固定定位fixed

固定定位是元素固定于浏览器可视区的位置

主要使用场景：可以让该元素在浏览器页面滚动时不改变位置

div {
    position: fixed;
    top: 100px;
    left: 40px;
}
/* 以浏览器的可视窗口为参照点移动元素
   跟父元素没有任何关系
   不随滚动条滚动(会直接固定在页面上)
*/

特点：脱标

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

让固定定位的盒子left：50%，走到浏览器可视区(也可以看做版心)的一半位置
让固定定位的盒子margin-left：版心宽度的一半距离，反向走版心宽度的一半位置

这时候就可以让固定定位的盒子贴着版心右侧对齐

6.粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合

div {
    position: sticky;
    top: 0;
}
/* 以浏览器的可视窗口为参照点移动元素(固定定位特点)
   粘性定位占有原先的位置(相对定位特点)
   必须添加top、left、right、bottom其中一个才有效
   跟页面滚动搭配使用。兼容性较差 IE不支持
*/

特点：不脱标

定位的总结

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

一定记住相对定位、绝对定位、固定定位的两大特点：1.是否占有位置(是否脱标) 2.以谁为基准点移动位置
学习定位的重点是子绝父相

7.定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

div {
    z-index: 1;
}

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

8.定位的拓展

1.绝对定位的盒子居中

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

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

2.定位特殊特性

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

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

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

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

4.绝对定位(固定定位)会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位)会压住下面标准流所有的内容

浮动产生的目的最初是为了做文字环绕效果的。

网页布局总结

1、标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2、浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3、定位

定位最大的特点是有层叠的概念，可以让多个盒子前后叠压来显示，如果想要元素自由地在某个盒子内移动就用定位布局

元素的显示与隐藏

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

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

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分进行处理

1.display属性

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

display：none；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思

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

2.visibility可见性

visibility属性用于指定一个元素应该是可见还是隐藏

visibility：visible；元素可见
visibility：hidden；元素隐藏

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

如果隐藏的元素想要原来的位置，就用visibility：hidden

如果隐藏的元素不想要原来的位置，就用display：none

3.overflow溢出

overflow属性指定了如果内容溢出一个元素的边框(超过其指定高度和宽度)时，会发生什么

overflow：visible；默认让它超出，不加滚动条
overflow：hidden；不显示超出的内容，超出的部分会隐藏掉
overflow：scroll；不管是否超出，总是显示滚动条
overflow：auto；超出自动显示滚动条，不超出不显示滚动条

CSS高级

1.精灵图 sprites

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求把大图加载出来即可。

如何在大图中选取到要的小图？

把盒子的宽高设置和小图一样大，然后定位小图左上角的位置，取负值，就可以拿到该图片

div {
  width: 60px;
  height: 60px
  background: url(images/sprites.png) no-repeat -182px -106;
}

如果需要同时获取一张大图中的很多小图，可以采用以下写法：

/* 父盒子可以直接把公共的部分抽取出来*/
span {
  display: inline-block;
  background: url(images/abcd.jpg) no-repeat;
}

/* 子盒子中单独设置位置 */
.p1 {
  width: 100px;
  height: 112px;
  background-position: -493px -276px;
}

.p2 {
  width: 60px;
  height: 108px;
  background-position: -327px -142px;
}

2.字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图的缺点：

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

字体图标可以解决以上问题

如何选取使用哪个？

如果遇到一些结构和样式比较简单的小图标，就用字体图标
如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的下载

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

使用步骤：

把下载包里的fonts文件夹放到页面根目录下
在下载包里的style.css中的@font-face { }的内容引入页面中的css
给对应需要用到字体的标签定义字体，在对应标签的css样式中，需要把font-family这个属性写进去
如果后期字体图标不够用，可以把selection.json重新上传到，选中想要的新图标，重新下载

3.CSS三角

把宽高都设置为0

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: orangered skyblue gold yellowgreen;
}

如果要单独拿出来一个三角形，可以这么写：

先给所有的border都设置为透明，然后要显示的单独设置颜色即可

div {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: skyblue;
}

4.CSS用户界面样式

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式cursor

li {
  cursor: default; /* 默认样式 */
}

li {
  cursor: pointer; /* 小手样式 */
}

li {
  cursor: move; /* 移动样式 */
}

li {
  cursor: text; /* 文本样式 */
}

li {
  cursor: not-allowed; /* 禁止样式 */
}

轮廓线outline

给表单添加outline：0 或者outline：none 样式之后，就可以去掉鼠标点击输入框后表单默认的蓝色边框

<style>
	input {
		outline: none;
	}
</style>

<!-- 取消表单轮廓 -->
<input type="text">

防止拖拽文本域resize

给文本域添加resize：none，就可以让文本域无法拖拽

<style>
  textarea {
    resize: none;
  }
</style>

<!-- 防止文本域拖拽 -->
<textarea name="" id="" cols="30" rows="10"></textarea>

5.vertical-align属性应用

经常用于设置图片或者表单(行内块元素)和文字垂直对齐

只对行内元素或者行内块元素有效

img {
  vertical-align: baseline;
}

img {
  vertical-align: top;
}

img {
  vertical-align: middle;
}

img {
  vertical-align: bottom;
}
/* baseline 默认基线对齐
   top 顶端对齐
   middle 居中对齐
   bottom 底部对齐
*/

图片、表单和文字对齐

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

只要给图片、表单这些行内块元素的vertical-align属性设置为middle就可以实现和文字居中对齐

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

bug原因：因为行内块元素默认基线对齐

解决办法：

给图片添加vertical-align属性
把图片转换为块级元素display：block

6.溢出的元素省略号显示

单行文本溢出显示省略号 --三步

div {
  /* 先强制一行内显示文本 */
  white-space: nowrap; （默认normal自动换行）
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文字用省略号代替超出的部分 */
  text-overflow: ellipsis;
}

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动的(移动端大部分是webkit内核)

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

HTML5新特性

1.新增的语义化标签

2.新增的多媒体标签

音频：
视频：

音频元素支持三种音频格式：MP3、Wav、Ogg

<!-- 浏览器会按照以下资源去解析 -->
<audio controls="controls">
		<source src="happy.mp3" type="audio/mpeg">
  	<source src="happy.ogg" type="audio/ogg">
</audio>
<!-- 也可这么写 -->
<audio src="文件地址" controls="controls"></audio>

常见属性：

属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	显示播放按钮
loop	loop	循环播放
src	文件路径	音频文件地址

谷歌浏览器把音频自动播放禁止了

视频元素支持三种视频格式：MP4、WebM、Ogg

<!-- 浏览器会按照以下资源去解析 -->
<video controls="controls" width="300">
		<source src="move.ogg" type="video/ogg">
		<source src="move.mp4" type="video/mp4">
</video>
<!-- 也可这么写 -->
<video src="文件地址" controls="controls"></video>

常见属性：

属性	值	描述
autoplay	autoplay	视频就绪后自动播放
controls	controls	显示播放按钮
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	循环播放
preload	auto(预加载) none(不预加载)	是否预加载(如果有autoplay,就忽略该属性)
src	文件地址	视频文件地址
poster	img地址	加载等待的画面图片
muted	muted	静音播放

谷歌浏览器把视频自动播放禁止了，需要添加muted来解决

3.新增的input类型

属性值	说明
type=“email”	限制只能输入email类型
type=“url”	限制只能输入url类型
type=“date”	限制只能输入日期类型
type=“time”	限制只能输入时间类型
type=“month”	限制只能输入月份类型
type=“week”	限制只能输入周类型
type=“number”	限制只能输入数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

重点记住：number tel search

4.新增的表单属性

属性	值	说明
required	required	表单必填，不能为空
placeholder	提示的文本	表单的提示信息，存在则默认值将不显示
autofocus	autofocus	自动聚焦到指定表单框
autocomplete	off/on	关闭输入记录/打开输入记录默认开启
multiple	multiple	可以选择多文件提交

可以使用以下方式修改提示文本的文字颜色

input::placeholder {
  color: pink;
}

CSS3新特性

1.新增选择器

属性选择器
结构伪类选择器
伪元素选择器

1.1属性选择器

属性选择器可以根据元素的特定属性来选择元素，这样就可以不用借助类或id选择器

/* 选中标签为input，且具有value属性 */
input[value] {
  color: pink;
}

/* 选中标签为input，且具有type=text属性 */
input[type=text] {
  color: pink;
}

/* 选中标签为div，且class属性必须以icon开头 */
div[class^=icon] {
  color: red;
}

/* 选中标签为section，且class元素必须以data结尾 */
section[class$=data] {
  color: blue;
}

/* 选中标签为div，且class元素中必须含有aaa */
div[class*=aaa] {
  color: skyblue;
}

注意：类选择器、属性选择器、伪类选择器的权重为10

1.2结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于父级盒子选择指定的子元素

first-child选择父元素中第一个孩子

first-of-type选择指定标签中的第一个孩子

/* 只匹配对应序号的孩子 */ 
/* 选择ul里面的第一个孩子(li) */
ul li:first-child {
  background-color: pink;
}
/* 选择ul里面的最后一个孩子(li) */
ul li:last-child {
  background-color: pink;
}
/* 选择ul里面的指定孩子(li) */
ul li:nth-child(3) {
  backgrond-color: skyblue;
}

/* 先匹配标签再匹配序号 */
ul li:first-of-type {
    background-color: pink;
}
ul li:last-of-type {
    background-color: pink;
}
ul li:nth-of-type(3) {
    background-color: skyblue;
}

nth-child(n)和nth-of-type(n)可以选择一个或多个元素

n可以是数字，关键词和公式
如果是数字，则从1开始写起
如果是关键字：even偶数，odd奇数
如果是公式：n从0开始，但是第0个元素和超出的元素会被忽略

公式	取值
2n	0 2 4 6 8…偶数 0会忽略则取2 4 6 8…
2n+1	1 3 5 7 9…奇数
5n	0 5 10 15… 0会忽略则取5 10 15…
n+5	从第5个开始(包含第5个)一直取到最后
-n+5	前五个 5 4 3 2 1

区别：

nth-child只关注是父元素的第几个孩子（只有一步）
nth-of-type先匹配标签，再从该类型的标签中看看是否有该序号（有两步）

<head>
		<style>
        /* 先找p标签 在找p标签中的第3个 找不到*/
        section p:nth-of-type(3) {   
            background-color: pink;
        }
       /* 不看标签 直接找section的第3个孩子  则p2被改变背景颜色 */ 
        section p:nth-child(3) {
            background-color: pink;
        }
		</style>
</head>
	
<body>
  	<section>
        <span>span1</span>
        <p>p1</p>
        <p>p2</p>
  	</section>
</body>

1.3伪元素选择器

伪元素选择器可以利用CSS创建新的标签元素，而不需要写HTML标签，从而简化HTML结构

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注意：

before和after创建出来的元素是行内元素
新创建的元素在body代码里是找不到的，所以称为伪元素
语法：element::before{ }
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面创建元素
伪元素选择器和标签选择器一样，权重都为1

伪元素选择器使用场景1：伪元素字体图标

p::after {
    position: absolute;
    top: 8px;
    right: 10px;
    font-family: 'icomoon';
    content: '\ea43';
}

伪元素选择器使用场景2：防土豆效果

.tudou::before {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4) url(./images/arr.png) no-repeat center;
}
.tudou:hover::before {
  display: block;
}

伪元素选择器使用场景3：伪元素清除浮动

父级添加:after伪元素
父级添加双伪元素

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

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

2.CSS3盒子模型

CSS3中，可以通过box-sizing来指定盒子模型，可以解决内边距和边框撑开盒子的问题

box-sizing：content-box （默认）盒子实际大小为原先的width+padding+border
box-sizing：border-box 盒子实际大小为width

如果我们把盒子模型改为了box-sizing：border-box，那么padding和border就不会撑大盒子了

div {
  /* box-sizing: content-box; 默认撑开*/
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  padding: 20px;
  background-color: pink;
}
p {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  padding: 20px;
  background-color: skyblue;
}

3.CSS其他特性

图片变模糊

img {
  /* 括号里的数值越大，图片越模糊 */
  filter: blur(15px);
}
img:hover {
  filter: blur(0); /* 还原图片 */
}

计算盒子宽度

.father {
  width: 300px;
  height: 200px;
  background-color: pink;
}
.son {
  width: calc(100% - 30px);
  height: 30px;
  background-color: skyblue;
}

4.CSS3过渡

div {
  transition: 要过渡的属性 花费时间 运动曲线 何时开始；
}

属性(必填)：想要变化的css属性，宽度高度、背景颜色、内外边距都可以。如果想要所有属性都变化过渡，写一个all就可以
花费时间(必填)：单位是秒例如 0.5s
运动曲线(可以忽略)：默认是ease

linear匀速 ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速后减速
何时开始(可以忽略)：设置延迟触发时间默认是0s

重点：谁做过渡，给谁加

<head>
    <style>
        .bar {
            width: 200px;
            height: 20px;
            border: 1px solid red;
            border-radius: 10px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            transition: all 0.5s;
        }
        .bar:hover .bar_in{
            border-radius: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>