1、标签包含规范
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
2、规避脱标流
由于浮动，定位都脱离了标准流，会对网页布局造成一定的影响，在以后的网页布局中优先考虑：标准流，浮动，定位
使用margin-left:auto 规避脱标
margin-left:auto 让盒子左侧充满
margin-right:auto 让盒子右侧充满
margin:0 auto 居中对齐的由来
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
width: 500px;
height: 500px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;
/*margin: 0 0 400px 400px;*/
margin-left: auto;
/*float: right;*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>规避脱标流之让图片和文字垂直对齐
使用vertical-align:middle 让行内，行内块元素设置垂直距离 。默认属性是:vertical-align:baseline;
vertical-align:middle 常与 display:inline-block配合使用，表格对此属性最敏感
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片文字居中</title>
<style type="text/css">
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">天气太热了
</div>
</body>
</html>3、css 可见性
单词 |
作用 |
overflow：hidden |
隐藏超出的那部分 |
display：none |
不显示元素 |
visibility:hidden; |
不显示元素 |
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
.box,.div1,.div2,.div3{
width: 300px;
height: 300px;
}
.box{
/*overflow: hidden;*/
}
.div1{
background: red;
}
.div2{
background: yellow;
}
.div3{
background: green;
}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div class="box">
<div class="div1" id="div1"></div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
</div>
</body>
</html>4、css之内容移除（网页优化）
常用于logo 优化
1.利用text-index:-2000em;
2. 利用padding 挤开盒子并且overflow 切割
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css之内容移出</title>
<style type="text/css">
div{
width: 143px;
height: 76px;
background: url("logo.png") no-repeat;
}
a{
display: inline-block;
width: 143px;
height: 76px;
text-indent: -5000em;
}
</style>
</head>
<body>
<div>
<h1>
<a href="#">搜狐</a>
</h1>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css之内容移出二</title>
<style type="text/css">
.box{
width: 300px;
height: 0;
background: red;
padding-top: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">14二期</div>
</body>
</html>5、css精灵图
5.1 精灵图的由来
1：上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
5.2 工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
5.3精灵图用法总结
1：精灵图只能用打开的方式，不能使用导入得方式打开
2：使用精灵图的时候注意坐标位置的正负取值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>精灵图</title>
<style type="text/css">
.box{
width: 24px;
height: 22px;
/*background: url("taobao.png") 0px -45px ;*/
background: url("taobao.png") 0px -266px ;
}
.box2{
width: 54px;
height: 54px;
background: url("qq.png") -700px -110px ;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>5.4 制作精灵图
注意事项：
1：制作精灵图，小背景图片之间必须有间隙
2：保存精灵图要保存为png格式
6、属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*input[type = text]{*/
/*width: 300px;*/
/*height: 300px;*/
/*background: red;*/
/*}*/
/*input[type = text][class = username]{*/
/*width: 300px;*/
/*height: 300px;*/
/*background: red;*/
/*}*/
input[type = text][class]{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<input type="text" class="username">
<input type="text" class="pwd">
<input type="password">
<input type="button">
<input type="submit">
</body>
</html>7、emmet 语法
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
7.１ html:
7.１.1 生成结构的快捷键：
！+ tab,可以生成html5的结构代码。
7.１.2 生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
7.１.3 生成同级元素：
标签名+标签名+标签名 “+”tab
7.１.4 生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
7.１.5 带固定数量的标签:
ul>li*5+tab
7.１.6 带有序号名称
ul>li.abc$*3 + tab
7.１.7 生成带有内容的标签：
ul>li>a{item}*5
7.２ css
width:30px==>w30+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==> pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab
8、css滑动门技术
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如下图所示，即为设置了圆角背景的导航。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单滑动门</title>
<style type="text/css">
/*.nav{*/
/*height: 100px;*/
/*}*/
/*.left,.cen,.right{*/
/*float: left;*/
/*}*/
/*.cen{*/
/*height: 100px;*/
/*background: url("m.png");*/
/*line-height: 100px;*/
/*}*/
.left,.cen,.right{
float: left;
}
.cen{
height: 100px;
background: url("m.png");
line-height: 100px;
}
</style>
</head>
<body>
<!--<div class="nav">-->
<!--<div class="left"><img src="l.png"></div>-->
<!--<div class="cen">-->
<!--传值博客学习-->
<!--</div>-->
<!--<div class="right"><img src="r.png"></div>-->
<!--</div>-->
<div class="nav">
<img src="l.png" class="left">
<div class="cen">
传值博客学习
</div>
<img src="r.png" class="right">
</div>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单滑动门</title>
<style type="text/css">
ul,li{
list-style: none;
}
.nav ul li{
float: left;
}
.nav .left{
background: url("l.png");
width: 10px;
height: 100px;
float: left;
}
.nav .cen{
background: url("m.png") ;
height: 100px;
}
.nav .right{
background: url("r.png");
width: 10px;
height: 100px;
}
.nav .cen a{
display: inline-block;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="left"></li>
<li class="cen"><a href="#">传智播客</a></li>
<li class="right"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滑动门练习</title>
<style type="text/css">
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input, button {
margin:0;
padding:0;
}
ul {
list-style: none;
}
li {
float: left;
padding: 0 5px;
}
a{
display: inline-block;
height: 35px;
background: url("bg_r1_c1.png") left no-repeat;
padding-left: 7px;
}
span{
display: inline-block;
height: 35px;
background: url("bg_r1_c2.png") no-repeat right;
padding-right: 24px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>企业动态</span></a></li>
<li><a href="#"><span>人才招聘</span></a></li>
<li><a href="#"><span>关于我们</span></a></li>
</ul>
</body>
</html>