CSS(中)篇
1.1行高
行高属于文字的属性
行高=文字大小+上间距+下间距(默认行高=18px)
行高的作用:
设置文字垂直方向中有距离
文字垂直居中(行高=容器的高度)
影响行高的因素:
文字大小可以改变行高
文字字体也可以改变行高
1.2行高单位(了解)
px,em,百分比,不带单位
如果给单独一个标签设置行高
px: 行高值就是设置的行高,与文字大小无关
em: 行高值=设置的行高*文字大小
百分比: 行高值=设置的行高*文字大小
不带单位: 行高值=设置的行高*文字大小
如果给父元素设置行高(line-height),子元素行高的特点
父px: 子元素的行高=父元素的行高值
父em: 子元素的行高=父元素行高值*父元素文字大小(先计算后继承)
父百分比:子元素的行高=父元素行高值*父元素文字大小(先计算后继承)
父不带单位: 子元素的行高=父元素的行高*子元素的大小(先继承后计算)
1.3盒子模型(重点)
作用: 实现网页布局(在网页画盒子)
组成:
边框: border
内边距: padding (盒子中的内容与盒子的边框的距离)
外边距: margin (盒子与和盒子间的距离)
例子:解决两张图片的默认间距方法:
1.(不推荐)连写
<body> <img src="img/shunfeng.jpg"><img src="img/up.jpg"> </body>
2.设置浮动
<!DOCTYPE html> <html> <head> <title>Examples</title> <style type="text/css"> img{ height: 150px; width: 150px; float: left; } </style> </head> <body> <img src="img/shunfeng.jpg"> <img src="img/up.jpg"> </body> </html>
1.4边框(border)
border-style: none; 默认没有边框
solid 实线
dotted 点线
dashed 虚线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*设置边框颜色*/ border-color: red; /*设置边框的宽度*/ border-width: 1px; /* 设置边框的样式*/ border-style: solid; } </style> </head> <body> <div class="box"></div> </body> </html>
border属性联写中:
a.必须设置border-style
b.没有顺序限制
去掉边框
border: 0 none;
去掉轮廓线
outline-style:none
1.5laber控件的使用
1.6内边距
内边距(padding):内容与边框之间的距离
注意:padding 只能移动盒子的内容
padding属性联写: padding: 10px; 内边距的上下左右都移动
padding: 10px 20px; 上下10px,左右20px
padding: 10px 20px 30px; 上10px 左右20px 下30px
padding: 10px 20px 30px 40px; 上10 右20 下30 左40
盒子大小问题:
边框和内边距可以改变盒子大小
盒子大小(宽度) = 内容的宽度+左右内边距+左右边框
边框
嵌套盒子padding值对盒子大小的影响:
“继承”的盒子,默认不设置宽度的情况下,给与盒子设置padding值在父盒子宽度范围内,不会影响盒子大小
1.7外边距
外边距:盒子与盒子之间的距离。移动盒子。
属性联写:与内边距联写一样
注意:外边距不会改变盒子大小
特点: 垂直外边距合并,会以最大外边距的值为准
垂直外边距塌陷--》解决方式:
a.给父元素设置边框
b.给父元素设置overflow:hidden;
由于overflow:hidden触发了元素的bfc(格式化上下文),浏览器自动把这个元素独立出来(包裹性)
2.1 标准流(normal flow)
在页面中标签(元素)默认的显示方式就是标准流的显示方式
2.2 浮动
用法: float: left | right;
特点: 1.浮动的元素不占位置 (脱标--脱离标准流的显示方式)
2.浮动可以让块级元素在一行上显示
3.可以进行元素的模式转换(行内块)
作用:
1. 图片文字环绕效果
2.让块级元素在一行上显示使用浮动
网页布局
制作导航
2.2.1清除浮动(清除浮动带来的影响)
清除浮动:
1.使用clear: left | right | both;
直接在浮动的元素后面增加一个空标签,在设置该空标签clear
2.给父元素设置overflow:hidden;
overflow:hidden: 可以将超出父元素的部分进行隐藏
3.使用伪元素清除浮动(推荐)
或者
调用者:
2.3 样式初始化
搜狐初始化:
/* 全局CSS定义 */ body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;} body > div{text-align:center;margin-right:auto;margin-left:auto;} div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;} img,a img{border:0;margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */ a{outline-style:none;color:#333;text-decoration:none} a:hover{color:#c00;text-decoration:underline;} /*清除链接虚框*/ /*a,area {blr:expression(this.onFocus=this.blur()) } for IE :focus {-moz-outline-style: none; } for Firefox */
自定义初始化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{ margin: 0; padding: 0; list-style:none; font-size: 12px; font-family: "宋体","微软雅黑"; } a{ color: #000; text-decoration: none; } a:hover { color: red; } img,input{ margin: 0; padding: 0; border: 0; outline-style: none; } .clearfix:after{ content: ""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden; } .clearfix{ zoom: 1; } </style> </head> <body> </body> </html>
2.4 overflow
京东下拉框例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 300px; height: 50px; background-color: red; border: 1px solid black; overflow: hidden; } .list{ height: 400px; background-color: yellow; } .title{ height: 50px; } .box:hover{ overflow:visible; cursor: pointer; } </style> </head> <body> <div class="box"> <div class="title">全部商品分类</div> <div class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </div> </div> </body> </html>
导航练习:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{ margin: 0; padding: 0; list-style:none; font-size: 12px; font-family: "宋体","微软雅黑"; } a{ color: #000; text-decoration: none; } a:hover { color: red; } img,input{ margin: 0; padding: 0; border: 0; outline-style: none; } .clearfix:after{ content: ""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden; } .clearfix{ zoom: 1; } .w{ width: 1096px; height: 50px; margin: 0 auto; } .nav{ height: 50px; background-color: #458FD2; line-height: 50px; } .l_list{ float: left; } .r_list{ float: right; } .nav li{ float: left; } .nav li a{ height: 50px; padding: 0 15px; display: block; color: #fff; text-decoration: none; } .nav li a:hover{ background-color: #474E5D; } </style> </head> <body> <div class="nav"> <div class="w"> <div class="l_list"> <ul> <li><a href="#">前端开发</a></li> <li><a href="#">前端开发</a></li> <li><a href="#">前端开发</a></li> <li><a href="#">前端开发</a></li> </ul> </div> <div class="r_list"> <ul> <li><a href="#">全栈开发</a></li> <li><a href="#">全栈开发</a></li> <li><a href="#">全栈开发</a></li> <li><a href="#">全栈开发</a></li> <li><a href="#">全栈开发</a></li> </ul> </div> </div> </div> </body> </html>
2.5伪元素
after:
before
选择区域:
3.定位(重点)
作用:通过定位可以移动元素位置
使用场景:当页面中出现盒子压盒子的效果时,推荐使用定位
定位特点: 定位体现元素之间的层级关系
分类:
静态定位:
绝对定位:
相对定位:
固定定位:
<!-- 浮动元素的特点: 1)脱标 2)改变元素的显示方式 3)显示方式与行内块一致 定位有四种: 1)静态定位(标准流) 关键字: position: static; 2)相对定位 关键字: position: relative; 特点: 1)相对于自己原本的位置发生的偏移。 2)没有脱标 3)没有改变元素的显示方式 3)绝对定位: 关键字: position: absolute; 特点: 1)位置关系: a:如果绝对定位的元素没有父元素,那么绝对定位的元素的位置是以body为基准发生平移 b:如果绝对定位的元素有父元素,但是父元素没有定位,那么绝对定位的元素的位置还是以body为基准发生平移 c:如果绝对定位的元素有父元素,并且父元素有定位(非静态),那么绝对定位的元素的位置是以父元素基准发生平移的 2)脱标(不占位置) 3)改变了元素的显示方式 4)显示方式变为行内块元素 4)固定定位
1)位置关系:
a. 固定定位的元素始终是以body(浏览器 )可视区域为参照设置定位
2)脱标(不占位置)
3)改变元素的显示方式
4)元素的显示方式变为
注意: 一般情况下定位都要配合定位偏移属性来使用trbl:top,right,bottom,left -->
3.1.1静态定位
语法: position:static;
left:10px;
top:;
right:;
bottom:;
特点: 静态定位不能移动元素位置
静态定位的元素就是标准流元素的显示方式
3.1.2绝对定位(要么看父容器要么看浏览器)
语法: position: absolute;
绝对定位的位置移动特点:
1.如果一个元素设置了 绝对定位,如果该元素的父元素设置了静态定位或者没有定位,那么 当前子元素是以body(浏览器的左上角)为参照进行位置移动
2.如果一个子元素设置了绝对定位,如果该子元素的父元素设置了除静态定位以外的其他定 位,那么当前绝对定位的子元素会以父元素左上角为参照进行位置移动
绝对定位本身特点:
绝对定位的元素脱标不占位置
绝对定位可以实现模式转换
3.1.3相对定位(看自己定位)
语法:position:relative;
特点:
相对定位元素是以元素原来的位置为参照设置定位
相对定位的元素占位置
相对定位不能实现模式转换
一般情况下要设置子绝父相(子元素绝对定位,父元素相对定位)
3.1.4固定定位(死心眼子)
position:fixed;
特点: 固定定位元素脱标不占位置
固定定位元素可以实现模式转换
固定定位的元素始终是以body(浏览器 )可视区域为参照设置定位
3.2 Z-index(重点)
定位元素的特点:
1.只有定位(除静态定位)的元素有层级关系
2.通过z-index属性改变层级关系
层级关系的特点:
1.当给一个元素设置定位,那么该元素默认的层级 z-index值是auto(约为0),
2.当z-index值相同的情况下,那么最后的定位元素层级要高于前面的定位元素【后来居上】
3.当z-index值不同的情况下,那么z-index值越大该元素的层级越高。
4.如果元素的父元素设置了z-index值,那么父元素的z-index值越大,那么该元素的层级越高
3.3定位盒子居中(了解)
盒子居中: margin: 0 auto; 标准流的盒子居中显示
绝对定位的盒子居中显示:
left:50%; 父元素宽度一半
margin-left: -元素自己宽度的一半
例子1:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; height: 400px; border: 1px solid red; margin: 0 auto; position: relative; } .one{ width: 200px; height: 200px; background-color: red; margin: 0 auto; position: absolute; left: 100px; } </style> </head> <body> <div class="box"> <div class="one"></div> </div> </body> </html>
更快的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; height: 400px; border: 1px solid red; margin: 0 auto; position: relative; } .one{ width: 100px; height: 100px; background-color: red; margin: 0 auto; position: absolute; /*父元素的一半*/ left: 50%; /*向元素自己的位置相反的方向移动*/ margin-left: -50px; } </style> </head> <body> <div class="box"> <div class="one"></div> </div> </body> </html>
3.4 css标签包含规范
段落标签中不能包含标题标签
段落标签不能包含div
行内元素最好不要包含块级元素
3.5网页布局规避脱标流(了解)
网页布局优先考虑标准流
然后考虑浮动
最后使用定位
元素模式转换必须使用display
3.5.vertical-align属性
text-align 水平对齐
vertical-align 垂直对齐
默认行内块元素(img,input),有默认的vertical-align属性
vertical-align: baseline ; (基线)默认值
top; 顶部对齐
middle; 中部对齐
bottom; 底部对齐
3.6CSS元素的可见性(了解)
overflow:hidden 将溢出部分隐藏
display: none; 元素隐藏 不占位置
display: block; 显示元素
visibility:hidden; 元素隐藏 占位置
3.7logo内容移除(了解)
Logo 一般推荐给a标签设置背景图片
Logl 中a标签最好设置文字
移除文字 : text-indent: -9999px
3.8精灵图(掌握)
精灵图就是一种特殊的背景图片
使用: 给元素设置精灵图为背景图片
通过background-position移动背景图片
注意: 使用fw,精灵图要使用打开方式
4.1滑动门(补充)
作用:1.制作网页导航
2.滑动门导航使用背景图片制作
3.滑动门导航内容不能设置宽度
4.2vertical-align属性补充
让图片垂直居中方法之一设置行高和vertical-align
元素的显示方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 总结: 1)日常生活中的填充不会改变盒子的大小,但是在css中的填充(padding)一般会改变盒子的大小 2)在特定的情况下padding是不会改变盒子大小的:在父元素中有一个子元素,并且子元素没有设置宽度,那么子元素的宽高会与父元素保持一致,如果这个时候设置padding-left,padding-right,是不会改变盒子大小的。 3)行内元素不建议设置padding,如果给行内元素设置padding,上下padding不会有任何作用 元素的显示方式: 1)行内元素 一行内可以显示多个 不可以设置宽高 宽高由内容决定 2)块级元素 独占一行 可以设置宽高 如果不设置宽高,宽度与父元素保持一致,高度由内容决定 3)行内块元素 一行内可以显示多个 可以设置宽高 如果不设置宽高,宽高由内容决定 */ .one { width: 1000px; height: 200px; background-color: #ccc; } .two { height: 100px; padding-left: 100px; background-color: pink; } span { padding: 10px; } </style> </head> <body> <div class="one"> <div class="two"></div> </div> <span>小追命</span> </body> </html>