规避脱标
定位的盒子居中显示
Margin:0 auto ; 只能让标准流的盒子居中对齐
当A是B的父系,B可以使用 margin-left:auto; 来获得相当于定位right:0;的效果
Margin-right:auto;
定位的盒子剧中 先左右走父元素盒子的一半50%,在向左走盒子的一半(margin-left:负值)
步骤: 设置父盒子为相对定位 / 设置盒子left 值为父盒子宽度一半 / 设置子盒子左边距为自己宽度一半
CSS标签包含规范
规范:
行内元素尽量包含行内元素
有些块级元素不能包含其他块级元素
Div可包含所有标签。
p标签不能包含div h1 等标签
H1 可以包含p,div 等标签
下面是具体的包含规范;
规避脱标流
由于浮动,定位都脱离了标准流,会对网页布局造成一定的影响,在以后的网页布局中优先考虑:标准流,浮动,定位。
优先级: 标准流》浮动float》定位position
可使用margin-left:auto; 避免脱标
Margin-left:auto ; 让盒子左侧充满
Margin-right:auto;让盒子右侧充满
Margin : 0 auto ;
规避脱标流之:让图片和文字垂直对齐
使用 vertical -align:middle 让行内,行内块元素设置垂直距离
Vertical-align:middle 常与display:inline-block 配合使用
默认属性:vertical-align:baseline;
CSS可见性
Overflow:hidden; 溢出隐藏
Visibility:hidden; 隐藏元素 隐藏之后依然占据原来的位置
Display:line-block 隐藏元素 隐藏之后不占据原来的位置
Display:block 元素可见
Display:none 和display:block 常配合js使用
CSS之内容移除(网页优化)
使用tezt-indent:-500em; 把元素 移除屏幕,行内元素需转换为行内块元素
将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏
.box{
Width:300px;
Height:0 ;
Padding-top: 100px;
Overflow:hidden;
Background:red;
}
CSS精灵图
1:上图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
2:然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites)。
简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,如下图所示为淘宝网站中的一个精灵图。
工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位
div{
height:34px;
width : 66px ;
background: url( "精灵图.png" ) -33px -77px;
position;absolute;
left:345px;
top:99px;
}
即可取出在”精灵图“ 坐标为(33,77)的图片(34X66). 并显示在父系的 (345,99)位置
可使用z-index 200; 调整其浮层,越大 越安全。
可使用FireWorks CS6制作图片,在制作时,选择大小的时间,选择透明即可制作精灵图。
尽量贴边,图片之间要有间距。 最后保存为png格式