布局技巧
盒模型特点
- 所有的子标签和文字都在内容区域
- 默认标签的宽高描述的是内容区域(content-box)
- 边框由三部分组成:宽度,样式,颜色
- 内边距是内容到边框的距离,外边距是盒子外部的空间
- 默认内边距拥有背景色,外边距没有背景色
浮动和定位对比
- CSS 中能够使标签脱离文档流的属性有:
- float:left;
- float:right;
- postion:absolute;
- position:fixed;
- 对于使用 float 脱离文档流时,其他盒子会无视这个标签,但其他盒子内的文本、图片、表单标签 依然会为这个标签让出位置,环绕在周围 ( 脱离文档流,不脱离文本流 )。
- 而对于使用 position 脱离文档流的标签,其他盒子完全无视它,包括标签内部的文本、图片、表单标签(既脱离文档流,又脱离文本流)。
常见问题以及属性
- vertical-align 属性设置标签的垂直对齐方式。利用这个属性做图文对齐方式
- baseline 默认。标签放置在父标签的基线上。
- top 把标签的顶端与行中最高标签的顶端对齐。
- middle 把此标签放置在父标签的中部。
- bottom 把标签的底端与行中最低的标签底端对齐。
图片间隙解决
-
去除图片下间隙的办法有很多,常用的有4种:
- 设置父标签字号为 0
-
.wrap{ font-size: 0; }
-
- 改变图片的 display
-
img{ display: block; }
-
- 给图片设置垂直对齐方式(只解决图片上下方间隙)
-
img{ vertical-align: middle;// 设置为任意不为 baseline 的值都可以 }
-
- 设置父标签行高为 0(只解决图片上下方间隙)
-
img{ line-height:0; }
-
- 设置父标签字号为 0
文本框与按钮对不齐现象
-
解决方案:文本域设置高度 20px,按钮高度需要设置 24px。给 input 和 button 增加边框 border,覆盖原来的样式,input 设置左浮动 (float:left)。
-
<style> .text1 { border: 1px solid #ccc; height: 20px; float: left; } .button { border: 1px solid #ccc; height: 24px; } </style> </head> <body> <input type="text" class="text1"> <input type="submit" class="button"> </body>
显示与隐藏
-
盒子显示:
- display:block;
-
盒子隐藏:
- display:none:隐藏该元素并且该元素所占的空间也不存在了。
- visibility:hidden :隐藏该元素但是该元素所占的内存空间还存在。
-
overflow 属性
- overflow 属性规定当内容溢出标签框时的显示方式,包括水平方向和垂直方向。
- overflow-x 只包括水平方向。
- overflow-y 只包括垂直方向。
- visible 默认值。内容不会被修剪,会呈现在标签框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 需要不需要都产生滚动条
- auto 需要的时候出现滚动条,不需要就不出现
-
list-style
-
list-style-type
- none 无标记
- disc 默认,标记是实心圆
- circle 标记是空心圆
- square 标记是实心方块
- decimal 标记是数字
- decimal-leading-zero 0开头的数字标记
- lower-roman 小写罗马数字
- upper-roman 大写罗马数字
- lower-alpha 小写英文字母
- upper-alpha 大写英文字母
-
list-style-position
- inside 文本内部,文本根据标记对齐
- outside 文本左侧,文本不根据标记对齐
-
list-style-image
- 改变标记为指定的图片,但是图片的大小不能改变
-
背景属性设置列表标记
-
ul { list-style-type: none; } li { background-image: url(01.jpg); background-repeat: no-repeat; background-size: 10px 10px; background-position: 0 6px; padding-left: 20px; }
-
-
透明度属性 (opacity,rgba()),透明度兼容
-
opacity
- 兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。
- 使用说明:设置 opacity 元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体 不透明度。
-
rgba()
- 兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。
- 使用说明:设置颜色的不透明度,一般用于调整 background-color、color 等的不透明度
-
IE 专属滤镜 filter:Alpha(opacity=x)
- 兼容性:仅支持 IE6、7、8、9,在 IE10 版本被废除。
- 使用说明:IE 浏览器专属,x值为0-100
- IE浏览器,当子标签加相对定位,会失去透明效果