知识点
定位的盒子居中显示
标签包含规范
规避脱标流
图片和文字垂直居中对齐
CSS隐藏/可见
CSS之内容移除（网页优化）
精灵图
属性选择器
emmet快捷键
定位的盒子居中显示
margin:0 auto;只能让标准流的盒子居中对齐。定位的盒子居中：先向左走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fater{ height: 500px; background: #ccc; position: relative; } .box{ width: 996px; height: 56px; background: pink; position: absolute; bottom: 0; left: 50%; margin-left: -498px; } </style> </head> <body> <div class="fater"> <div class="box"></div> </div> </body> </html>
案例
顺丰banner导航
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{ padding: 0; margin: 0; } .banner{ width: 1259px; height: 472px; margin: 0 auto; position: relative; } .search{ width: 960px; height: 60px; background: #464646; position: absolute; bottom: 0; left: 50%; margin-left: -480px; } .search ul li{ list-style: none; float: left; } .search ul li a{ display: inline-block; width: 160px; height: 60px; line-height: 60px; text-align: center; color: #fff; } .search ul li a:hover{ background: #fff; color: #000; } .search ul li a.one:hover{ background: #464646; color: #fff; } .login{ position: absolute; left: 149px; bottom: 56px; } .sanjiao{ position: absolute; left: 218px; bottom: 47px; z-index: 2; } </style> </head> <body> <div class="banner"> <div class="pic"></div> <div class="search"> <ul> <li><a href="#" class="one">运单追踪</a></li> <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 class="sanjiao"></div> <div class="login"></div> </div> </body> </html>
标签包含规范
div可以包含所有的标签。
p标签不能包含div h1等标签。
h1可以包含p，div等标签。
行内元素尽量包含行内元素，行内元素不要包含块元素。
标签的所有包含规范
规避脱标流
尽量使用标准流。
标准流解决不了的使用浮动。
浮动解决不了的使用定位。
使用margin-left:auto 规避脱标
margin-left:auto 让盒子左侧充满
margin-right:auto 让盒子右侧充满
margin:0 auto 居中对齐的由来
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father{ width: 300px; height: 300px; background: #ccc; } .son{ width: 50px; height: 50px; background: pink; margin-left: auto; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
图片和文字垂直居中对齐
使用vertical-align对行内、行内块元素设置垂直距离。默认属性是:vertical-align:baseline;vertical-align:middle 常与display:inline-block配合使用， 表格对此属性最敏感
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{ vertical-align: middle; } </style> </head> <body> <div class="box"> nihhhhhh</img> </div> </body> </html>
| vertical-align属性值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶部与行中最低的元素的顶部对齐 |
| text-bottom | 把元素的底部与父元素字体的底端对齐 |
| length | |
| % | 使用line-height属性的百分比值来排列此元素。允许使用负值 |
| inherit | 规定应该从父元素继承vertical-align属性的值 |
CSS隐藏/可见
| 方式 | 功能 |
|---|---|
| overflow:hidden; | 溢出隐藏 |
| visibility:hidden; | 隐藏元素 隐藏之后还占据原来的位置。 |
| display:none; | 隐藏元素 隐藏之后不占据原来的位置。 |
| display:block; | 元素可见 |
Display:none 和display:block 常配合js使用。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .red{ width: 50px; height: 50px; background: red; visibility: hidden; } .green{ width: 50px; height: 50px; background: green; } </style> </head> <body> <div class="red"></div> <div class="green"></div> </body> </html>
将上面visibility: hidden;改为display: none;
tab切换
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box,.div1,.div2,.div3{ width: 300px; height: 300px; } .box{ overflow: hidden; } .div1{ background: red; } .div2{ background: green; } .div3{ background: pink; } </style> </head> <body> <a href="#div1">新闻</a> <a href="#div2">体育</a> <a href="#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>
css之内容移除（网页优化）
使用
text-indent:-5000em;
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .logo{ width: 143px; height: 76px; background: url('img/logo.png'); } .logo a{ display: inline-block; text-indent: -5000em; } </style> </head> <body> <div class="logo"> <h1><a href="http://www.baidu.com">搜狐</a></h1> </div> </body> </html>将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 300px; height: 0px; padding-top: 100px; overflow: hidden; background: red; } </style> </head> <body> <div class="box">Web大前端威武</div> </body> </html>精灵图
精灵图的由来
上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。
精灵图工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
例如：我们要使用上图中的一个图标
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 54px; height: 54px; background: url('img/qq.png') -700px -110px; } </style> </head> <body> <div class="box"></div> </body> </html>
传智导航
hot、new使用精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{ padding: 0; margin: 0; } li{ list-style: none; } .nav{ background: #000; height: 48px; margin-top: 100px; } .nav-con{ width:1182px; height: 48px; margin: 0 auto; position: relative; } .nav-con ul li{ float: left; } .nav-con ul li a{ display: inline-block; height: 48px; font: 16px/48px microsoft yahei; color: #fff; padding: 0 13px; text-decoration: none; } .nav-con ul li a:hover{ background: #3A92DD; } .hot{ width: 31px; height: 21px; background: url('img/sprite.png') -57px 0px; position: absolute; left: 245px; top: -10px; } .new{ width: 31px; height: 21px; background: url('img/sprite.png') -135px 0px; position: absolute; left: 634px; top: -10px; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <div class="hot"></div> <div class="new"></div> <ul> <li><a href="#">首页</a></li> <li><a href="#">Java</a></li> <li><a href="#">UI设计</a></li> <li><a href="#">前端与移动开发</a></li> <li><a href="#">问答专区</a></li> <li><a href="#">iOS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">C/C++</a></li> <li><a href="#">python</a></li> <li><a href="#">网络营销</a></li> <li><a href="#">活动专区</a></li> </ul> </div> </div> </body> </html>
精灵图用法总结：
1：精灵图只能用打开的方式，不能使用导入得方式打开
2：使用精灵图的时候注意坐标位置的正负取值
制作精灵图
注意事项：
1：制作精灵图，小背景图片之间必须有间隙
2：保存精灵图要保存为拼合png格式
属性选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input[type=text][id]{ width: 200px; height: 20px; background: pink; } input[type=text][class="username"]{ width: 100px; height: 20px; background: red; } </style> </head> <body> <input type="text" id="mytxt"> <input type="text" class="username"> <input type="password"> </body> </html>emmet快捷键
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
html:
生成结构的快捷键：
！+ tab可以生成html5的结构代码。生成id名和类名
标签名.类名#id名+tab
没有标签名：.类名+tab ==>生成div生成同级元素：
标签名+标签名+标签名+ tab生成子类标签
标签名>子标签名>子标签名>子标签名+tab标签名>子标签名>子标签名>子标签名^^子标签名+tab
注意：^是指返回一级，与父节点同级带固定数量的标签:
ul>li*5+tab带有序号名称
ul>li.abc$*3+ tab生成带有内容的标签：
ul>li>a{item}*5+tab
css
width:30px==>
w30+tabHeight:30px==>
h30+tabMargin:30px==>
mg30+tabPadding:30px==>
pd30+tabLine-height:12px==>
lh12px+tabBackground==>
bg+tab
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/d8be2c54dca8