css内容
css 介绍
css全称为Cascading Style Sheets 翻译过来叫层叠样式表
作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆
语法
1.构建css的运行环境：在头部加入style标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>这是一个盒子</div>
</body>
</html>
2.选择对应的目标元素，使用大括号
<style type="text/css">
div{}
</style>
3.语法：属性：值; 键值对
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>这是一个盒子</div>
</body>
css字体、文本属性
1.字体属性
- font-size 设置字体的大小
取值方式：数字 + 像素单位px（像素就是一个长度单位）
多学一招:- 取值用偶数
- 默认是16px大小（3）
- 字体有多大，看字体的高度
- font-weight 设置字体的粗细
取值：normal 正常的（400）、bold加粗（700）、bolder(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字）
在实际工作中 用的最多的就是normal （不加粗）和bold（加粗） - font-style 设置字体的风格
取值：normal 默认 显示标准的字体样式 italic 字体倾斜 - font-family 设置不同的字体
取值： 宋体、微软雅黑、黑体、。。。等等
多学一招：- 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。
- 字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示
- 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号
<style type="text/css">
span{
font-family:"微软雅黑"; /* 字体 */
font-size:20px; /* 大小 */
font-weight:bold; /* 粗细 */
font-style:italic; /* 样式 */
}
</style>
2.文本属性
- 文本修饰
语法：text-decoration:值
取值：- underline 下划线
- overline 上划线
- line-through 删除线
- none 没有修饰-----------一般用在a标签上
- 文本转换
语法：text-transform:值
取值：- uppercas e转换成大写
- lowercase 转换成小写
- capitaliz e首字母大写
- 文本对齐方式
语法：text-align:值
取值：- left 左对齐---------------------默认
- center 居中对齐
- right 右对齐
- 首行缩进
语法：text-indent:值
取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整
多学一招：默认的文字大小是16px
3.字体颜色
语法：color:"颜色值"
<style>
a{color:red}
a{color:#666}
</style>
css注释
语法：/*注释的内容*/
css基本选择器
1.标签选择器
通过标签来选择元素，标签{css样式}
2.id选择器
通过id属性来选择元素，#id名{css样式}
注意：id选择要保证页面中的唯一性，这是语义
3.class类选择器
通过class属性选择元素，.类名{css样式}
多学一招：一个元素可以有多个类名
<style>
a{color:red}
#part{color:green}
.first{font-size:30px}
</style>
<body>
<a > 点击</a>
<span class="first" > 锄禾日当午</span>
<span id="part" > 汗滴禾下土</span>
</body>
4.复合选择器
- 标签选择器和类选择器一起使用
- 用多个类名选择一个元素
- 给多个元素设置同一种样式，每个元素中间用
，隔开:元素1，元素2
<style>
p.box{color:green;} /* 标签选择器和类选择器一起使用 */
.red.fz-50{color:red;font-size:50px;} /* 用多个类名选择一个元素 */
div,p{color:blue;} /* 给多个元素设置同一种样式 */
</style>
<body>
<p class="box">一个段落 </p>
<div class="red fz-50">一个盒子 </div>
</body>
常用选择器
1.通配选择器（了解）
给所有标签添加样式，*{css样式}
<style>
*{}
</style>
将页面中所有标签都选中
使用场景：通常设置*{padding:0;margin:0;}
2.后代选择器（掌握）
选择元素里面的元素，外层元素和内层元素中间用空格隔开：外层 内层{css样式}
3.子元素选择器（掌握）
选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式}
4.相邻元素选择器（了解）
选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}
哥哥+弟弟{} /*通过哥哥选择到弟弟 */
总结：
1.哥哥和弟弟中间用的符号：+
2.修饰的是弟弟标签
3.不能通过弟弟选哥哥
5.伪类
元素:link 正常连接时候的状态
元素:visited 点击以后的状态
元素:hover 当鼠标移动上去的状态-------重点、常用
元素:active 当鼠标按下去时候的状态
注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解
- 伪类是选择器，不是css的属性，不能写在{}中
- visited和link不能适用于普通标签，只有a标签才有
- hover和active是任何标签都可以有的
伪类选择器和类选择器一起使用
<style>
a.one:hove{color:red;}
</style>
<body>
<a class="one">百度</a>
</body>
伪对象选择器（了解）
first-letter：选择第一个字符
语法：元素:first-letter
first-line：选择第一行
语法：元素:first-line
所谓的元素，可以是标签名，还可以是类名.class名:first-letter/line{}
属性选择器
1.[属性名]
选择具有该属性的元素
[属性名]{}
2.[属性=值]（重点）
选择具有该属性且等于该值的元素
[属性名=属性值]{}
3.[属性~=值]（了解）
选择具有该属性，且值中包含该值的元素
多学一招：元素属性的值可以有多个
注意：这种场景适用于一个属性名对应多个属性的值
[属性名~=属性值]{}
4.[属性|=字符]（了解）
选择由连字符连接多个单词组成的属性值中的第一个单词
注意：这种场景适用于一个属性的值由连字符连接多个单词组成，且选择的是第一个
[属性名|=属性值]{}
5.[属性*=值]（了解）
选择属性的值中包含当前的值的元素
[属性名*=属性值]{}
<style>
input[value]{color:red;} /* 选择具有该属性的元素 */
input[name="username"]{color:red;} /* 选择具有该属性且等于该值的元素 username */
p[name~="song"]{color:red;} /* 属性有多个值 ，且值中包含该值的元素 second song */
[name|="zhang"]{color:blue} /* 属性中有连字符链接多个单词 zhang-san-feng */
[name*="o"]{color:green} /* 选择属性的值中包含当前的值的元素 name中标包含字母o的 元素 */
</style>
<body>
<input type="text" name="username">
<input type="text" name="password">
<input type="button" value="普通按钮">
<hr/>
<p name="first song">锄禾日当午</p>
<p name="second song">汗滴禾下锄</p>
<p name="song">谁知盘中餐</p>
<p name="last song">粒粒皆辛苦</p>
<hr/>
<input name="zhang san">
<input name="li-xiao-san" value="张小三">
<input name="zhang-san-feng">
<input name="li xiao si" value="李小四">
<input name="wanger xiao" value="王二小">
</body>
css尺寸、行高属性
1.尺寸属性
-
宽度
语法：width:值
取值：数字 + px/百分比/em -------------------------px代表像素，百分比代表浏览器宽度的百分比，em代表字符数
注意：1.div设置宽度为100%，其实和没设一样2.span标签设置宽度无效 -
高度
语法：height:值
用法和宽度一样
注意：div不设高度，默认是0
2.行高
行高控制的是文字与文字之间的上下距离 （行距）
语法：line-height:值
多学一招：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中，两者结合使用可以让单行文字在标签内部水平垂直居中，工作中经常用于让文字垂直居中（将行高设为盒子的高度）
line-height:数字px;
代表的一行的高度，放在段落中，可以理解为是行距
总结：
1.文字在行高中是垂直居中的
2.行高通常用于让文字在盒子中垂直居中
font简写
font: font-style font-weight font-size/line-height font-family
不建议修改顺序 并且不需要设置的属性可以不写 但是font-size和font-family必须指定，否则将不起作用
<style type="text/css">
div{
height:100px;
border:1px solid #000;
font:italic bolder 30px/100px "微软雅黑";
}
</style>
</head>
<body>
<div>今天明天和后天</div>
</body>
背景属性
1.背景颜色
语法：background-color:颜色值
2.背景图片
语法：background-image:url(图片路径)
3. 设置背景图片是否平铺
语法：background-repeat:值
取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认
4.设置背景图片位置
语法：background-position:水平位置，垂直位置
位置的取值可以为像素（相对左上角定点的位置），也可以为关键字：top left bottom right center
多学一招：
1.还可以使用百分比，不太常用：位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比，如下图：
2.在使用位置关键字的时候，关键字的前后顺序对结果不产生影响
3.可以只有一个值，代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素
4.当只有一个值，且值为上下左右关键字时，上下左右只能代表x轴或y轴之一，另一个方向默认为center
5.设置背景图片大小
语法：background-size:宽度 高度
宽高取值可以是像素也可以是百分比
6.综合使用
语法：background:颜色 url(图片路径) 平铺类型 位置/大小
多学一招：属性中的每个值顺序可以调整，且background可以为单独其中之一设置
7. 设置背景是否受滚动条的影响
语法：background-attachment:值
取值：
（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失----默认
（2）fixed不会受滚动条影响，一直保持在视线范围内
背景可以设置为透明
background:rgba(); /* a代表透明度，取值为0-1 */
背景和图片标签都可以让页面中显示图片，那有什么区别？
img和背景图片的区别：
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的 需要专门写宽高
一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）
8. 背景颜色渐变 (不常用)
①线性渐变
语法：
<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?
取值：
<point>
left： 设置左边为渐变起点的横坐标值。
right： 设置右边为渐变起点的横坐标值。
top： 设置顶部为渐变起点的纵坐标值。
bottom： 设置底部为渐变起点的纵坐标值。
<angle>： 用角度值指定渐变的方向（或角度）,单位deg。
<color-stop>： 指定渐变的起止颜色。 <color-stop>
<color>： 指定颜色。请参阅颜色值
<length>： 用长度值指定起止色位置。不允许负值
<percentage>： 用百分比指定起止色位置。
写法一：
代码：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:linear-gradient(red,black);
/* 表示颜色从上往下，从红色到绿色转换，各占50%(默认) */
}
</style>
| 效果图 |
|---|
 |
写法二：
代码
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:linear-gradient(to right,red,black);
/* 表示颜色的渐变方向(也是九宫格) */
}
</style>
| 效果图 |
|---|
 |
写法三：
代码
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:linear-gradient(45deg,red,black);
/* 表示中间的水平线顺时针旋转10度开始渐变 */
}
</style>
| 效果图 |
|---|
 |
| 角度示意图 |
|---|
 |
写法四：
代码
<style type="text/css">
div{
width:300px;
height:200px;
background:linear-gradient(red 20%,black 50%,pink);
/* 表示颜色渐变所占的百分比 */
}
</style>
| 效果图 |
|---|
 |
写法五：
代码
<style type="text/css">
div{
width:300px;
height:200px;
background:linear-gradient(to top right,red 20%,black 30%,pink);
/* 复合写法，表示颜色从左下角往右上角，从红色开始渐变到20%，再由黑色从20%渐变到30%，剩下的都是粉色 */
}
</style>
| 效果图 |
|---|
 |
颜色渐变方向有：to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】
②径向渐变
语法：
<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>：circle | ellipse
<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>：<length> | <percentage>
<color-stop>：<color> [ <length> | <percentage> ]?
取值：
<position>
<percentage>①： 用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①： 用长度值指定径向渐变圆心的横坐标值。可以为负值。
left： 设置左边为径向渐变圆心的横坐标值。
center①： 设置中间为径向渐变圆心的横坐标值。
right： 设置右边为径向渐变圆心的横坐标值。
<percentage>②： 用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②： 用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top： 设置顶部为径向渐变圆心的纵坐标值。
center②： 设置中间为径向渐变圆心的纵坐标值。
bottom： 设置底部为径向渐变圆心的纵坐标值。
<color-stop>： 指定渐变的起止颜色。
<shape>
circle： 指定圆形的径向渐变
ellipse： 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值 <size>
closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角
contain： 包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover： 覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner <shape-size>
写本文档时Firefox尚不支持<shape-size> <percentage>： 用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>： 用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 <color-stop>
<color>： 指定颜色。请参阅颜色值
<length>： 用长度值指定起止色位置。不允许负值
<percentage>： 用百分比指定起止色位置。
写法一：
代码
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:radial-gradient(orange,black);
/* 从中心点向四周扩散渐变 */
}
</style>
| 效果图 |
|---|
 |
多学一招：div如果是正方形，扩散的形状会是圆形
<div></div>
<style type="text/css">
div{
width:200px;
height:200px;
background:radial-gradient(orange,black);
}
</style>
| 效果图 |
|---|
 |
写法二：
代码
<div></div>
<style type="text/css">
div{
width:200px;
height:200px;
background:radial-gradient(orange 20%,black 30%,red 70%);
/* 代表颜色扩散到哪个位置停止渐变 */
}
</style>
| 效果图 |
|---|
 |
多学一招：除了使用百分比还可以使用具体像素设置停止渐变的位置
<div></div>
<style type="text/css">
div{
width:200px;
height:200px;
background:radial-gradient(orange 50px,black 30%,red 70%);
/* 橘色区域半径50px */
}
</style>
| 效果图 |
|---|
 |
因为50像素已经超过30%，所以橘色部分没有渐变（试试橘色和黑色都是30%）
写法三：
代码：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:radial-gradient(circle,orange 10%,black 50%);
/* 指定渐变的形状 */
}
</style>
| 效果图 |
|---|
 |
注意：指定形状的时候可以是circle圆形，也可以是ellipse椭圆
写法四：
代码：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:radial-gradient(circle 100px,orange 10%,black 50%);
/* 指定渐变的区域大小，因为是圆形，所以代表宽100px高也是100px */
}
</style>
| 效果图 |
|---|
 |
注意：如果指定的形状是圆形，那么指定区域大小的时候只需要一个值就好，可要是椭圆形的时候需要两个值，因为椭圆的宽和高不一样，否则直接不能显示页面
<style type="text/css">
div{
width:300px;
height:200px;
background:radial-gradient(ellipse 200px 100px,orange 10%,black 50%);
/* 指定椭圆形的区域大小需要两个值一个宽一个高 */
}
</style>
| 效果图 |
|---|
 |
写法五：
代码：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%);
/* 指定径向渐变的圆心 */
}
</style>
| 效果图 |
|---|
 |
多学一招：圆心默认在中心，或者使用关键字center
③重复线性渐变
语法：
repeating-linear-gradient(方向,颜色 结束百分比,...);
例：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:repeating-linear-gradient(to right bottom,red 10%,green 20%);
/* 渐变方向为右下角，指定每种颜色的结束位置，重复渐变 */
}
</style>
| 效果图 |
|---|
 |
④重复径向渐变
语法：
repeating-radial-gradient(形状 方向,颜色 结束百分比,...;
例：
<div></div>
<style type="text/css">
div{
width:300px;
height:200px;
background:repeating-radial-gradient(ellipse at center,red 10%,green 20%);
/* 渐变形状为椭圆，渐变中心为中心，指定每种颜色的结束位置，重复渐变 */
}
</style>
| 效果图 |
|---|
 |
注意：未指定颜色值的结束位置时，颜色是平均分配的
列表属性
1.list-style-type
设置列表前缀样式，通常设置为none，去掉前缀
语法：list-style-type:none
| 示意图 |
|---|
 |
2.list-style-image
将列表前缀设置为自定义图片
语法：list-style-image:url(图片路径)
| 示意图 |
|---|
 |
应用场景：通常在网页中，使用的列表都是要去除前面的符号，并且去除左边和上边的空间，所以，样式如下：
ul{
list-style:none;
padding:0;
margin:0;
}
内容溢出
语法：overflow:值
取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏
| 示意图 |
|---|
 |
总结：
overflow取值：
auto----自动生成滚动条（右边）
hidden----超出部分隐藏
scroll----右边和下边都有滚动条
设置水平方向溢出可以使用overflow-x，纵向溢出使用overflow-y，取值和overflow一样
重点：overflow:hidden;超出部分隐藏
css样式的分类
1.内部样式----内联样式
使用的是style标签
<style type="text/css">
/* 样式 */
</style>
多学一招：把页面的公共样式（不多的情况下）写在style标签中
2.行内样式
直接写在标签上的style属性中
<div style="color:red;">
我是盒子
</div>
多学一招：通常是后台程序员进行修改页面的时候使用
3.外部样式
新建一个css文件，然后和html页面关联起来
a) 使用标签关联
<!-- 在html的head标签中 -->
<link rel="stylesheet" type="text/css" href="css文件路径">
b) 使用指令关联
<style type="text/css">
/* 在style标签中 */
@import url("css文件路径")
</style>
多学一招：做项目最常用的是外部样式，link标签
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
样式的继承和覆盖（重点）
当父标签设置了样式，子标签都会具有父标签的样式
| 示意图 |
|---|
 |
总结：
1.能继承的css属性：font系列，text系列，color，line-height
2.div可以继承父亲的宽度，高度不能继承
当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置
| 示意图 |
|---|
 |
总结：
继承：父元素设置了样式，子元素也具有了
覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式
样式的优先级（了解）
1.强制优先级（important）
语法：样式属性:值 !important;
| 示意图 |
|---|
 |
注意：只针对当前这一条css属性
2.选择器优先级
伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承
| 示意图 |
|---|
 |
3.伪对象选择器的优先级（了解）
首字符>首行
| 示意图 |
|---|
 |
4.样式分类优先级
行内样式>内部样式/外部样式
| 示意图1 |
|---|
 |
| 示意图2 |
|---|
 |
总结：
1.样式分类中：行内样式>内部/外部，内部样式和外部样式没有权重之分，关键是看他们的加载顺序，后面的会覆盖前面的
2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配
3.容易被覆盖的选择器，应该写在前面，以便于后面的选择器覆盖它
5.样式叠加（权重）
!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)
| 示意图 |
|---|
 |
总结：掌握一个点：人多力量大 .class<.class标签
继承来的样式不计算权重，也就是说关键看是不是直接修饰的目标标签
权重累计到10，不会往前进一位
| 选择器 | 权重 |
|---|---|
| 继承或者* 的贡献值 | 0,0,0,0 |
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | 无穷大 |
总结：
1.比较权重的前提是准确选择到元素，而不是继承来的样式
2.每一级满10也不会往前进1，等级是非常森严的
标签的显示模式（重点）
div和span标签
1.样式完全相同，标签不同，显示的结果完全不同
2.每个div会独占一行，多个span会并列一排
1.块元素
特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示---div ul li p h1
| 示意图 |
|---|
 |
总结：块元素可以添加宽高的属性，独占一行
2.行元素
特点：宽高默认都是0，不能设置宽和高，一行显示----span b i u a
| 示意图 |
|---|
 |
总结：对宽高不敏感，不能独占一行
3.行内的块元素
特点：只能设置宽和高，不能换行显示---img input
| 示意图 |
|---|
 |
多学一招：从大的方面来说，其实行内的块元素也属于行内元素，对行内元素的某些操作，同样可以操作行内的块元素，例：text-align:center;line-height:1000px;
4.模式转换
语法：display:值
取值：block转成块元素，inline转成行元素，inline-block转成行内的块元素，none隐藏元素
多学一招：使用该属性隐藏元素后，在页面中将不占据空间
小案例：简易导航的制作
| 案例示意图 |
|---|
 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display:inline-block;
width:100px;
height:50px;
background:#f00;
text-align:center;
text-decoration:none;
color:#fff;
line-height:50px;
}
body{text-align:center;}
</style>
</head>
<body>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
</body>
</html>
盒子模型
我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程
盒子模型特性
4个组成部分：宽高、内间距、边框、外间距
1.内边距padding
| 示意图 |
|---|
 |
注意：
- 添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
- 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）
2.外边距margin
| 示意图 |
|---|
 |
多学一招：margin:0 auto;可以让盒子在其父元素中居中
margin:0 auto;和text-align:center;的区别
| margin:0 auto； | text-align:center; | |
|---|---|---|
| 针对的对象 | 盒子---块元素(标签本身) | 标签内部的行元素 |
| 居中的范围 | 在父盒子中居中 | 自己内部 |
3.边框属性
边框有3要素：边框类型、边框颜色、边框厚度
-
边框类型
语法：
border-style:值取值：
（1）solid实线
（2）dashed虚线
（3）dotted点线
（4）double双线
示意图 
-
边框颜色
语法：
border-color:颜色值示意图 
-
边框厚度
语法：
border-width:尺寸值示意图 
-
一次性写好
语法：
border:类型 颜色 宽度示意图 
-
单独方向的边框设置
语法：
（1）上边框：border-top:三要素
（2）左边框：border-left:三要素
（3）下边框：border-bottom:三要素
（4）有边框：border-right：三要素
示意图 
多学一招：可以设置none
示意图 
-
边框圆角
语法：
border-radius:值取值：可以是像素，也可以是百分比
示意图 
多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系
总结：元素加边框后，元素会变大
4.盒子模型的bug：
-
盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为准
bug1图示 
bug1效果图 
解决：避免或将这个间距都给到一个元素上面
-
两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准
bug2图示 
bug2效果图 
解决：
a) 给外部盒子加上边框或者上padding-top
b) 给外部盒子添加oveflow:hidden
元素的可见性
语法：visibility:值
取值：hidden隐藏，visible可见的
| 示意图 |
|---|
 |
多学一招：使用该属性隐藏的元素，在页面中还占用空间
语法：display:none
元素隐藏后在页面中不占用空间
| 示意图 |
|---|
 |
伪对象
概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。
::after:在指定的标签后面添加一个对象
::before:在指定的标签前面添加一个对象
content：元素里面的内容（内容中不能写标签）
语法：
元素::after{
content:"";
}
注意：伪对象样式中，必须有content属性，否则伪对象无效
多学一招：官方推荐使用双冒号，但是通常为了兼容性更好，我们使用单冒号
上面两个伪对象选择器需要结合属性content一起使用
<style type="text/css">
.box{width:200px;background:#f00;height:300px;}
.box::before{
content:'开头的内容';height:100px;
line-height:100px;color:#fff;background:#00f;
}
.box::after{
content:'这是一个段落';
background-color:green;
display:block;height:50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
总结：
-
什么是伪对象？不是实际标签，使用css样式模拟一个标签
-
元素::after{}/元素::before{}
-
在伪元素样式中，必须有content属性
-
伪元素是行元素
布局的三种方式：
-
标准流：按照标签默认的特性摆放盒子
-
浮动流：利用浮动摆放盒子
-
定位流：利用定位摆放盒子
浮动（重点）
浮动的语法：
float:left/right /none
取值：left向左浮动，right向右浮动，none取消浮动
现在的浮动，用的最多是让块元素在同一行显示：就是给一行的所有块元素都加上浮动
浮动的最大价值：让元素排列成一行，或者一左一右
浮动的使用口诀：
-
要浮动，兄弟元素也一起浮动
-
浮动方向保持一致（尽量都是用左浮动）
总结：
-
可以做图文绕排
-
主要让块元素排一行，多个元素一起浮动
-
注意加了浮动以后元素的顺序，标签顺序，浮动方向
-
浮动的元素脱离标准流
1.行元素浮动
行元素浮动，会优先于普通元素占据设置方向的位置，不会重叠
| 行元素浮动图示 |
|---|
 |
2.块元素浮动
块元素浮动，会脱离页面原本的文本流（不占据原本的空间），会覆盖其他元素
| 块元素浮动图示 |
|---|
 |
多学一招：
-
脱离文本流的元素具有行内的块元素的特性（不换行，能设置宽高），无论原来是行元素还是块元素--例：图文绕排。
-
设置了浮动的元素，居中对元素不起作用
-
浮动元素不会覆盖文字
-
大盒子放不下了，浮动元素会掉下去，掉下去的元素位置根据上一个元素的高度：（1）上一个元素高度比较小，在上一个元素的正下方（2）上一个元素高度比较大，高度的起始位置，在上一个元素的下方
总结：
-
所有元素浮动后都变成了行内块
-
浮动元素不能覆盖文字
浮动引起的问题：
<style>
/* 浮动的盒子撑不开父容器
解决办法：强制追加一个高度（不推荐，因为很多时候盒子的高度是会变化的）
*/
.box {
width: 500px;
border: 1px solid #000;
}
.info {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.gebilaowang {
width: 500px;
height: 300px;
background-color: lime;
}
</style>
</head>
<body>
<div class="box">
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
<div class="info">4</div>
</div>
<div class="gebilaowang"></div>
| 效果图 |
|---|
 |
3.清除浮动
就是清除浮动带来的影响，普通元素不受浮动元素影响
-
给父元素设置高度（不推荐，因为在项目中很多盒子是不固定高度的）
-
在父元素后设定空标签进行清除浮动
语法：
clear:both示意图 
-
设定父元素的overflow
示意图 
overflow的原理：overflow可以创建一个BFC（块级格式化上下文 (Block Fromatting Context)），按照块元素布局，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。说白了就是将盒子内部的元素和外部的元素进行隔离，互不影响。
-
使用伪对象代替空标签
示意图 
阴影
1.文本阴影
语法：text-shadow:横向偏移 纵向偏移 模糊距离 颜色
| 示意图 |
|---|
 |
2.边框的阴影
语法：box-shadow: 水平偏移 垂直偏移 模糊距离 阴影尺寸 颜色;
| 示意图 |
|---|
 |
注意：边框阴影和边框没有关系
细线表格
语法：border-collapse:collapse;
| 示意图 |
|---|
 |
注意：一定要加在table标签上，且表格和单元格都加边框属性
网站图标和字体图标
1.网站图标
作用：一个好的ico图标可以加深用户对于网站的记忆。降低用户记忆成本，就好像现在说道熊爪大家都能够想到度娘，更多的属于用户体验。有利于识别当前窗口是在哪个网站。
制作流程：
（1）一张图
（2）在网上将图片做成ico图标（网址：http://www.bitbug.net/）
（3）在html中引入<link rel="shortcut icon" href="favicon.ico" />
例：
生成ico图标
| 示意图 |
|---|
 |
在html中使用link标签引入
| 示意图 |
|---|
 |
2.字体图标
图片是一个选择，但是图片不但增加了总文件的大小，还增加了很多额外的"http请求"（服务器加载资源），这会大大降低网页的性能。图片还有一个缺点就是不能很好的进行“缩放”，因此，有时候在网站中需要使用图像的最好解决方案就是不去使用图片-----而使用字体图标恰恰可以解决这一点。
| 示意图 |
|---|
 |
使用流程：
（1）打开网上的图标库，网址：http://www.iconfont.cn/，搜索需要的图标，或者打开图标库
（2）将需要的图标加入购物车
（3）打开购物车添加至自己的项目（没有的需要自己创建），点击确定
（4）下载至本地
（5）在html中引入下载好的css文件
（6）在标签中使用（需要两个类名，一个图标类型，一个图标名称）
例：
| 示意图 |
|---|
 |
将需要的图标加入购物车
| 示意图 |
|---|
 |
在购物车中将图标添加至项目
| 示意图 |
|---|
 |
有项目就选择，没有就新建
| 示意图 |
|---|
 |
下载至本地
| 示意图 |
|---|
 |
在html页面中引入并在标签中使用
| 示意图 |
|---|
 |
定位（重点）
定位的使用：
1.4种定位方式：静态、相对、绝对、固定
2.4种边偏移属性：left、right、top、bottom
注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）
1.静态定位
所有标准流都是静态定位
语法：position:static
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:static;/* 设置静态定位 */
top:20px;/* 设置边偏移 */
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| 效果图 |
|---|
 |
总结：
1.工作中用的比较少，因为加了静态定位，元素也是标准流
2.偏移值对静态定位无效
使用场景：通常是将已经设置过定位的元素还原成标准流
我们以后所说的定位不包含静态定位
2.相对定位
相对于自身在标准流的位置进行定位移动
语法：position：relative
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:relative;/* 设置相对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| 效果图 |
|---|
 |
总结：
1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在 肉体永驻）
3.可以盖在标准流的上方
使用场景：微调元素和配合绝对定位来实现效果
3.绝对定位
从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止
语法：position:absolute
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| 效果图 |
|---|
 |
总结：
1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html
2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间
3.margin:auto对于设置过绝对定位的元素不起作用
4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义
使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）
父相子绝
案例：
1.让盒子水平垂直居中（水平居中，垂直也居中）
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:50%;/* 设置上边偏移 */
margin-left:-50px;/* 往左边移动自身宽度的一般 */
left:50%;/* 设置做边偏移 */
margin-top:-50px;/* 往上面移动自身高度的一半 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
2.图片上加logo
| 效果图示 |
|---|
 |
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:290px;
height:163px;
position:relative;/* 父元素设置相对定位 */
}
.logo{
width:52px;
height:36px;
background:url(2.png);
position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
right:0;/* 最右边 */
top:0;/* 最上面 */
}
</style>
</head>
<body>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
</body>
总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） ---父相子绝
3.轮播图布局（以京东为例）
| 效果图示 |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:590px;
height:470px;
margin:0 auto;
border:1px solid #000;
position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
ul li{
display:none;
}
ul li.on{
display:block;
}
ol{
width:152px;
height:18px;
position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
left:46px;/* 左边偏移 */
bottom:20px;/* 下面偏移 */
}
ol li{
float:left;
width:10px;
height:10px;
border-radius:50%;
border:1px solid #fff;
margin:4px;
}
ol li.on{
width:4px;
height:4px;
border:4px #999 solid;
background:#fff;
}
.box>a{
text-decoration:none;
color:#fff;
background:#666;
width:24px;
height:40px;
display:block;
text-align:center;
line-height:40px;
position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
top:50%;/* 上边偏移 */
margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
}
.box>a.left{
left:0; /* 左按钮左边偏移为0，在最左边 */
}
.box>a.right{
right:0; /* 右按钮右边偏移为0，在最右边 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
<li><a href="###"><img src="img/banner2.jpg" /></a></li>
<li><a href="###"><img src="img/banner3.jpg" /></a></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
</ol>
<a class="left" href="###"><</a>
<a class="right" href="###">></a>
</div>
</body>
4.固定定位
以浏览器作为参考进行偏移，且滚动条对固定定位无效
语法：position:fixed
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:300px;
height:200px;
background:#abcdef;
position:fixed;/* 设置固定定位，相对于浏览器窗口 */
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}
.text{
width:20px;
}
</style>
</head>
<body>
<div class="text">
日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。
</div>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
总结：
1.会脱离文档流，不占据标准流的空间
2.不继承父元素的宽高，需要给自身定义宽高
3.margin:auto对固定定位的元素不起作用
4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）
使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告
案例：
京东最右侧的小列表
| 案例效果图 |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
.container{
height:2000px;
border-right:5px #7A6E6E solid;
}
ul{
list-style:none;
padding:0;
margin:0;
position:fixed;
right:5px;
top:50%;
margin-top:-95px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#"><img src="img/1.jpg" /></a></li>
<li><a href="#"><img src="img/2.jpg" /></a></li>
<li><a href="#"><img src="img/3.jpg" /></a></li>
<li><a href="#"><img src="img/4.jpg" /></a></li>
<li><a href="#"><img src="img/5.jpg" /></a></li>
</ul>
</div>
</body>
四种定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位的父级移动位置 |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
5.定位元素的层叠效果
控制“定位”元素的叠放层级
语法：z-index:值
取值：
1.数字：
正数，数字越大，层级越高，离用户越近
负数，数字越小，层级越低，离用户越远
2.auto：（默认值）和父元素层级相同
3.正数比auto大，负数比auto小
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
.box{
width:100px;
height:100px;
background:#f00;
position:relative;
top:50px;
z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
}
.box1{
width:200px;
height:200px;
background:#0f0;
position:relative;
left:50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| 效果图 |
|---|
 |
总结：
1.z-index只针对定位元素有效果（但不包括静态定位）
2.z-index值越大，层级越高
3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的
出题：上大盒子压住下大盒子 ，下大盒子里面的子元素压住上盒子
css3和css2的区别
css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画
H5=html5 + css3 +js
大前端：js
1.内减模式
可以将padding内边距和边框带来增大盒子的影响去掉
语法：box-sizing:border-box;
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#099;
border:20px solid #333;
padding:50px;
box-sizing:border-box;/* 设置内减模式 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
总结：不能去margin带来盒子大小的影响
2.新增属性选择器
a) 语法：元素[属性^=值]
选择以指定字符开头的属性值的元素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
[name^='user']{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| 效果图 |
|---|
 |
b) 语法：元素[属性$=值]
选择以指定字符结尾的属性值的元素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* 属性值以指定字符结尾的元素 */
[name$="e"]{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| 效果图 |
|---|
 |
3.新增伪类选择器
| 伪类选择器 | 作用 |
|---|---|
| :root | 可以理解为根 |
| li:first-child | 代表找出父元素中第一个li子元素 |
| li:last-child | 代表找出父元素中最后一个li子元素 |
| li:nth-child(n) | 找出父元素中的第n个li子元素 |
| li:nth-child(even) | 代表找出父元素中奇数的li子元素 |
| li:nth-child(odd) | 代表找出父元素中偶数的li子元素 |
| li:empty | 代表找出父元素中li子元素内容为空的标签 |
| li:nth-of-type(n) | 找出li标签中第几个 |
| li:first-of-type | 找出li标签中第一个 |
| li:last-of-type | 找出li标签中最后一个 |
| li:only-child | 唯一子元素 |
总结：重点：li:first-child li:last-child li:nth-child(n) li:nth-child(2n+1)奇数元素
4. 2d变换效果
可以设置移动，旋转，大小
语法：transform:值
A.移动
语法：transform:translate(值1,值2);
取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:translate(50px,20px); /* 横线移动和纵向移动 */
/*transform:translateY(50px);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
多学一招：只设置x轴或者y轴的移动可以使用translateX和translateY，里面只设置一个值即可
B.旋转
语法：transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
取值：
1.角度写法：数字deg。
2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
margin:200px;
border-left:10px solid #0f0;
border-bottom:10px solid #00f;
}
.box:hover{
transform:rotate(45deg);/* 设置旋转和角度 */
transform-origin:left top;/* 设置旋转的圆心 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| 效果图 |
|---|
 |
C.缩放
语法：transform:scale(值)
取值：倍数，可以是整数，也可以是小数
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
</div>
<p>asdf</p>
</body>
| 效果图 |
|---|
 |
多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例
5.过渡效果
是一个动画的效果
语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
display:block;
margin:50px auto;
border:1px solid #000;
/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
transition:transform 2s linear;
}
img:hover{
transform:scale(1.5);
}
</style>
</head>
<body>
<img src="img/meinv.jpg" />
</body>
| 效果图 |
|---|
 |
css属性补充
1.光标形状
语法：cursor:值
取值：
text:文本图标
help:问号图标
wait:等待的图标
pointer: 小手图标
move 移动
url(),临时替换的样式-----需要在url后面加auto
default 箭头
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width:100px;
height:50px;
border:1px solid #000;
}
.box1{
cursor:text;
}
.box2{
cursor:help;
}
.box3{
cursor:wait;
}
.box4{
cursor:pointer;
}
.box5{
cursor:move;
}
.box6{
cursor:url('bitbug_favicon.ico'),auto;
}
.box7{
cursor:default;
}
</style>
</head>
<body>
<div class="box1">文本</div>
<div class="box2">问号</div>
<div class="box3">等待</div>
<div class="box4">小手</div>
<div class="box5">移动</div>
<div class="box6">图片</div>
<div class="box7">箭头</div>
</body>
应用场景：主要用于修饰鼠标放到元素上面的时候光标的样式
2.强调边框
语法：outline:值------盒子轮廓
取值：和边框一样
应用场景：主要用于设置元素周围的边框，起到强调作用（常用于去掉表单选中的蓝色边框）
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[type="password"]{outline:none;}
</style>
</head>
<body>
<input type="text" />
<input type="password" />
</body>
| 效果 |
|---|
 |
3.透明度
语法：opacity:值
取值：0-1之间的小数
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:200px;
height:100px;
border:1px solid #000;
position:relative;
}
img{
position:absolute;
left:0;top:0;
opacity:0.5;
}
</style>
</head>
<body>
<div class="box">
<img src="1.png" width="200" height="100" />
这是一张图片
</div>
</body>
| 效果 |
|---|
 |
4.背景透明
语法：rgba(值1，值2，值3，值4)
取值：1-3个值都是0-255的数字，表示颜色，第4个值是透明度0-1之间取值
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:200px;
height:100px;
border:1px solid #000;
position:relative;
}
img{
position:absolute;
left:0;top:0;
}
.box2{
width:200px;
height:100px;
background:rgba(3,3,3,.5);
color:#fff;
position:absolute;
left:0;top:0;
}
</style>
</head>
<body>
<div class="box">
<img src="1.png" width="200" height="100" />
<div class="box2">
这是一张图片
</div>
</div>
</body>
| 效果 |
|---|
 |
5.去掉文本域的自动拉伸效果
语法：resize:none;
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
textarea{
resize:none;
}
</style>
</head>
<body>
<textarea cols="30" rows="10"></textarea>
</body>
| 效果 |
|---|
 |
6.行内文字溢出省略号形式显示
overflow: hidden;
white-space: nowrap;文字不换行
text-overflow:ellipsis;/* 超出的部分以省略号形式显示 */
<style>
.box{
width:300px;
height:100px;
border:1px solid #000;
overflow:hidden;
white-space: nowrap;/* 设置文本不换行，单行显示 */
text-overflow:ellipsis;/* 超出的文本使用省略号代替 */
}
</style>
<div class="box">
央视网消息：“健全人可以活出精彩的人生，残疾人也可以活出精彩的人生。我们每个人都要珍惜生命、追求健康，努力创造无愧于时代的精彩人生。”
残疾人是一个特殊困难的群体，需要格外关心、格外关注。曾多次强调，全面建成小康社会，残疾人一个也不能少。做好残疾人工作，事关八千多万残疾人及其家庭的民生福祉，事关全面建成小康社会大局。党的十八大以来，以同志为核心的党中央高度重视残疾人事业发展，不断健全残疾人权益保障制度，努力“让广大残疾人安居乐业、衣食无忧，过上幸福美好的生活”。
在中国残联第七次全国代表大会到来之际，让我们重温***对残疾人朋友和残疾人事业的关爱和支持。
全面建成小康社会 残疾人一个也不能少
中国有几千万残疾人，2020年全面建成小康社会，残疾人一个也不能少。为残疾人事业做更多事情，也是全面建成小康社会的一个重要方面。
——2016年7月28日，在河北省唐山市考察时的讲话
因病致贫、因残致贫问题时有发生，扶贫机制要进一步完善兜底措施，在医保、新农合方面给予更多扶持。
</div>
| 效果 |
|---|
 |
总结：3步走，一步也不能少
7.vertical-align
作用：控制行内块与文字的对齐方式，写在行内块元素上面
baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线（行高的顶线）对齐
bottom 图片的底线和文字的底线（行高的底线）对齐
middle 图片的中线和文字的中线对齐
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:300px;
height:200px;
border:1px solid #000;
line-height:200px;
}
img{
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box">
<img src="3.jpg" width="100" height="100" />
鸿飞万里
</div>
</body>
| 效果 |
|---|
 |
案例：让一个张图片在盒子中水平垂直居中
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:300px;
height:300px;
border:1px solid #000;
text-align:center;/* 水平居中 */
line-height:300px;
}
img{
vertical-align:middle; /* 垂直居中 */
}
</style>
</head>
<body>
<div class="box">
<img src="3.jpg" width="100" height="100" />
</div>
</body>
| 效果 |
|---|
 |
缩放zoom
语法：zoom:值
取值：值是一个倍数
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid #000;
}
div.box:hover{
transform:scale(2);
/*zoom:2;*/
}
.box1{
width:100px;
height:100px;
background:#990;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
| 效果 |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid #000;
}
div.box:hover{
/*transform:scale(2);*/
zoom:2;
}
.box1{
width:100px;
height:100px;
background:#990;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
| 效果 |
|---|
 |
弹性布局 (重点)
1.多栏布局
概念：实现多个栏目的布局，类似于报纸
| 示意图 |
|---|
 |
-
分栏显示--语法：
column-count:值取值：值是一个栏目的数量
<style type="text/css"> .box{column-count:3;width:500px;} </style> </head> <body> <div class="box"> 本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。 为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。 截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。 </div> </body>效果 
-
多栏隔断框--语法：
column-rule:值取值：这里的取值和边框的取值是一样的，也有边框厚度，边框颜色，边框样式
<style type="text/css"> .box{column-rule:5px solid red;column-count:3;width:500px;} </style> </head> <body> <div class="box"> 本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。 为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。 截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。 </div> </body>效果 
-
设置每一栏的宽度--语法：
column-width:值取值：值和宽度的值一样
<style type="text/css"> .box{column-width:80px;width:500px;border:1px solid red;} </style> </head> <body> <div class="box"> 本次论坛以“智能互联时代的媒体变革与发展”为主题，由中共中央网络安全和信息化委员会办公室指导，中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办，央视网、中共宁波市委宣传部（市委网络安全和信息化领导小组办公室）共同承办，宁波日报报业集团（甬派传媒）、新浪网协办。 为了对论坛主题进行更深入、透彻地探讨，论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等，共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战，预测未来网络媒体发展趋势，解决技术变革带来的实际问题，分析分享媒体未来发展方向。 截至目前，承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。 </div> </body>效果 
2.弹性布局 (重点)
概念：可以实现类似浮动的效果，但是不会脱离文档流
语法：display:flex -------------设置一个弹性容器
主要属性（都需要先设置display:flex;）：
a 设置弹性布局的方向--语法： flex-direction:值
取值：
（1）row横向排列，等同于左浮动浮动效果
| 示意图 |
|---|
 |
（2）row-reverse 横向反向排列，等同于右浮动的效果
| 示意图 |
|---|
 |
（3）column 纵向排列
| 示意图 |
|---|
 |
（4）column-reverse 纵向反向排列，从下到上的排列
| 示意图 |
|---|
 |
b 设置 弹性布局是否换行，语法：flex-wrap:值
取值：
（1）不换行（默认），nowrap
| 示意图 |
|---|
 |
（2）换行， wrap
| 示意图 |
|---|
 |
（3）换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列
| 示意图 |
|---|
 |
c 设置弹性布局的水平对齐方式，语法：justify-content:值
取值：
（1）从左向右（左对齐），默认，flex-start
| 示意图 |
|---|
 |
（2）从右往左排列（右对齐），flex-end
| 示意图 |
|---|
 |
（3）两端对齐，中间等距离隔开，space-between
| 示意图 |
|---|
 |
（4）两端的空白是中间空白的一半，space-around------------环绕对齐
| 示意图 |
|---|
 |
（5）居中对齐，center
| 示意图 |
|---|
 |
（6）等距离排列，space-evenly
| 示意图 |
|---|
 |
d 垂直对齐方式，语法：align-content:值（在换行的时候用）
取值：
（1）默认的排列方式，stretch--------靠上排列，但是元素之间有间距
| 示意图 |
|---|
 |
（2）靠上排列（上对齐），flex-start
| 示意图 |
|---|
 |
（3）靠下排列（下对齐），flex-end
| 示意图 |
|---|
 |
（4）垂直上下两端对齐，中间等距离空白，space-between
| 示意图 |
|---|
 |
（5） 两端的空白是中间的空白的一半，space-around
| 示意图 |
|---|
 |
（6）居中对齐，center
| 示意图 |
|---|
 |
（7）等距离摆放，space-evenly
| 示意图 |
|---|
 |
e 交叉对齐方式，语法：align-items:值 ，需要横向排列
取值：
（1）flex-start，从起始位置对齐
| 示意图 |
|---|
 |
（2）flex-end，在结束位置对齐--------底部对齐
| 示意图 |
|---|
 |
（3）center，居中对齐---------垂直居中
| 示意图 |
|---|
 |
（4）baseline，在基准线对齐
| 示意图 |
|---|
 |
（5）stretch，拉伸子元素------图片不行
| 示意图 |
|---|
 |
使用场景：当网页结构鲜明，简单，使用弹性布局
f 子元素单独在y轴上的对齐方式，语法：align-self:值
取值：
auto：默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为"stretch"
stretch：拉伸
center：居中
flex-start：最上面
flex-end：最下面
baseline：容器的基线
其实这个属性的结果和align-items的一样，只是align-items修饰的弹性容器中的所有子元素，align-self修饰的当前这一个元素。
text-align:center;和margin:auto;的区别
text-align:center;
1.文本水平居中对齐
2.设置在父元素上，作用于子元素（行元素和行内块，不能对块元素生效）
margin:auto;
1.盒子水平居中
2.设置在自身，作用于自身（自己是块元素，在父元素中居中，不能对行元素生效）
css精灵技术 (案例)
网址：http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml
| 示意图 |
|---|
 |
网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能
微信案例其实就是用的精灵图
<head>
<meta charset="UTF-8">
<title>微信案例</title>
<style type="text/css">
.box{
height:74px;
background:url(img/wx_bg.jpg);
padding-left:300px;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
float:left;
margin-top:20px;
margin-right:20px;
}
a{
display:inline-block;
text-decoration: none;
color:#fff;
height:33px;
background:url(img/wxli_bg.png) left -192px;
line-height:33px;
padding-left:17px;
}
span{
display:inline-block;
height:33px;
background:url(img/wxli_bg.png) right -192px;
line-height:33px;
padding-right:17px;
}
a:hover{
color:green;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>下载吧</span></a></li>
<li><a href="#"><span>公共平台</span></a></li>
</ul>
</div>
</body>
| 示意图 |
|---|
 |
滑动门效果 (案例)
概念：3个盒子浮动，左边和右边写宽高，负责加载两边的背景，中间的盒子宽度不定，让文字撑开
<head>
<meta charset="UTF-8">
<title>滑动门</title>
<style type="text/css">
.box{
height:33px;
margin-left:300px;
}
.box div{
float:left;
height:33px;
}
.left{
width:18px;
background:url(img/left.png);
}
.center{
line-height:33px;
color:#fff;
background:url(img/center.png);
}
.right{
width:17px;
background:url(img/right.png);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center">这是文字进来了</div>
<div class="right"></div>
</div>
</body>
| 效果 |
|---|
 |
字间距
单词间距
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！