图片整合的概念
用 background-position" 来实现背景图片的定位技术, 这种技术可以成为 CSS sprites 技术, 又称为 CSS 精灵.
方法
将导航背景图片, 按钮, 背景小图标等小图片有规则的合并成一张背景图, 即将多张图片合为一张整图, 再利用 background 属性进行背景定位, 用数字精确的定位出背景图片在布局盒子中的位置.
整合的好处
1) 通过图片整合来减少对服务器的请求次数, 从而提高 页面的加载速度.
2) 通过整合图片来减小图片的体积.
宽高自适应
定义:
网页布局中经常要定义元素的宽和高. 但很多时候我们希望元素的大小能够根据窗口或子元素自动调整, 这就是自适应.
优点:
元素自适应在网页布局中非常重要, 它能够使网页显示更灵活, 可以适应在不同设备, 不同窗口和不同分辨率下显示.
1) 宽度自适应
???????? 元素宽度设置为 100%.(块元素宽度默认为 auto)
?
2) 高度自适应
[1] 元素高度自适应窗口高度
???????? 设置方法: html,body{height:100%;}(写一个满屏页面)
?
????????[2] 子元素自适应父元素高度: height:100%;
????????[3] 元素具备最小高度的自适应
min-height 属性: 最小高度;(IE6 浏览器不识别该属性)
什么时候用? 当元素内容的高度不确定的时候用 min-height;
最小高度兼容 IE6 的写法:
方法 1:min-height:value; _height:value;
方法 2:min-height:value;??height:auto!important;?
??height:value;(属性顺序不能改变, 建议使用)
!important 关键字过滤器, 写在属性值的后面, 加上此单词, 属性具有最高的优先级, 但是 ie6 不能识别此关键字;
- min-height(最小高度, 设置此属性后, 内容高度小于此高度, 显示此高度; 大于容器高度时, 容器自适应高度;)
- max-height(最大高度, 设置此属性后, 内容高度小于此高度时, 显示内容高度; 内容高度超过此高度时显示此高度)
- min-width(最小宽度, 设置此宽度后, 浏览器宽度小于此宽度时显示滚动条, 大于此宽度时, 适应浏览器宽度;)
- max-width(最大宽度, 设置此属性后浏览器宽度小于此容器时, 会适应内容宽度而不出现滚动条)
(4) 浮动元素父元素高度自适应 (父元素不写高度时, 所有子元素写了浮动后, 父元素会发生高度塌陷)
hack1: 给父元素添加声明 overflow:hidden;
hack2: 在最后一个浮动元素下方添加空 div, 并给该元素添加声明: clear:both;height:0;overflow:hidden;
hack3: 万能清除浮动法
父元素选择符: after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
伪对象选择符
1),:after 与 content 属性一起使用, 定义在对象后的内容.
如: div:after{content:url(logo.jpg);}
??????div:after{content:"文本内容";}
2),:before 与 content 属性一起使用, 定义在对象前的内容.
如: div:before{content:"在其前放内容";}
3),:first-letter 定义对象内第一个字符的样式.
4),:first-line 定义对象内第一行的样式.
说明:
(该伪元素只能用于块级元素.)ie6 及以下版本浏览器不支持伪对象选择符.
visibility:hidden/visible; 隐藏 / 可见
visibility:hidden; 和 display:none; 的区别:
visibility:hidden; 属性会使对象不可见, 但该对象在网页所占的空间没有改变, 等于留出了一块空白区域, 而 display:none 属性会使这个对象彻底消失.
来源: http://www.bubuko.com/infodetail-2850085.html