知识点

定位的盒子居中显示
标签包含规范
规避脱标流
图片和文字垂直居中对齐
CSS隐藏/可见
CSS之内容移除（网页优化）
精灵图
属性选择器
emmet快捷键

定位的盒子居中显示

margin:0 auto; 只能让标准流的盒子居中对齐。
定位的盒子居中：先向左走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)

           Document

案例

顺丰banner导航

           Document                     ![](img/sf.png)
                                       
                 
                 
                 
                 
                 
             
         
         ![](img/sanjiao.png)
         ![](img/3.png)

顺丰导航

标签包含规范

div可以包含所有的标签。
p标签不能包含div h1等标签。
h1可以包含p，div等标签。
行内元素尽量包含行内元素，行内元素不要包含块元素。

标签的所有包含规范

规避脱标流

尽量使用标准流。
标准流解决不了的使用浮动。
浮动解决不了的使用定位。
使用margin-left:auto 规避脱标

margin-left:auto 让盒子左侧充满
margin-right:auto 让盒子右侧充满

margin:0 auto 居中对齐的由来

           Document

不使用浮动和定位也能靠右

图片和文字垂直居中对齐

使用vertical-align对行内、行内块元素设置垂直距离。默认属性是:vertical-align:baseline;
vertical-align:middle 常与display:inline-block配合使用，表格对此属性最敏感

           Document                     ![](img/3.png)nihhhhhh

vertical-align属性值	描述
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶部与行中最低的元素的顶部对齐
text-bottom	把元素的底部与父元素字体的底端对齐
length
%	使用`line-height`属性的百分比值来排列此元素。允许使用负值
inherit	规定应该从父元素继承vertical-align属性的值

vertical-align的理解和认识

CSS隐藏/可见

方式	功能
overflow:hidden;	溢出隐藏
visibility:hidden;	隐藏元素隐藏之后还占据原来的位置。
display:none;	隐藏元素隐藏之后不占据原来的位置。
display:block;	元素可见

Display:none 和display:block 常配合js使用。

           Document

盒子的位置还在
将上面visibility: hidden;改为display: none;
盒子隐藏并且不占位置

tab切换

           Document                                    新闻
         体育
         明星

css之内容移除（网页优化）

使用text-indent:-5000em;

           Document

将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。

           Document            Web大前端威武

精灵图

精灵图的由来

上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
　　然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
　　简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。

精灵图工作原理
　　CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

例如：我们要使用上图中的一个图标

           Document

传智导航

hot、new使用精灵图

html>            Document                                  
             
                              
                 
                 
                 
                 
                 
                 
                 
                 python

精灵图用法总结：
　　1：精灵图只能用打开的方式，不能使用导入得方式打开
　　2：使用精灵图的时候注意坐标位置的正负取值
制作精灵图
注意事项：
　　1：制作精灵图，小背景图片之间必须有间隙
　　2：保存精灵图要保存为拼合png格式

属性选择器

           Document

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+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==> pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab

作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/d8be2c54dca8

ITPub博客

06_CSS居中、文档流、精灵图、网页优化

知识点