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>
效果 |
---|
![]() |
字间距
单词间距