更新至第四章 第2节 css定位机制 待更新
css布局和定位
盒子模型
盒子
- content 内容
- height 高度
- width 宽度
- border 边框
- padding 内边距
- margin 外边距


1 | #box{ |
1 | <div id="box"> |
overflow属性
内容溢出盒子框,怎么显示
- overflow: hidden 超出部分不显示
- overflow: scoll 显示滚动条
- overflow: auto 如果有超出部分,显示滚动条
border属性(边框的效果)
- border-width 宽度 取值有px/thin(细)/medium(中)/thick(粗)
- border-style 取值有dashed(虚线)/dotted(一排点点)/solid(实线)/double(双实线)
- border-color
border: width style color
1 | div{ |
1 | div{ |
应用:水平分割线
padding(内边距) margin(外边距)
对浏览器默认的设置清零
1 | * { |
取值:px,%(外层盒子的宽度和高度)
分开的: padding-top padding-right padding-bottom padding-left
合在一起: 上右下左 (顺时针)
1 | margin: 1px 2px 3px 4px; |
1 | margin: 1px 2px; |
将padding换成margin同样
Tips: 1. 如果定标签(div)作为样式的名字,每一个盒子独占一行 2. 上下两个相邻的外边距合并成一个外边距,合并的结果是取两个的最大值 3. 水平方向上不合并
水平居中 1
2
3
4
5
6/* 图片、文字水平居中 */
text-align: center;
/* div水平居中 */
margin: 0 auto;
/* 上下可以随便设置,左右设置auto,浏览器根据外层盒子宽度和div区域的宽度再除以二,算出margin-left margin-right */
案例

1 | #newsimglist{ |
css定位机制
- 文档流 flow (默认方式)
- 浮动 float
- 层 layer

文档流定位(flow)
元素类型转换: 1
2
3
4a{
display: none/block/inline/inline-block;
/* 不显示/block/inline/inline-block */
}
block元素
- 独占一行
- 元素的height、width、margin、padding都可设置
<div> <p> <h1/h2...h6> <ol> <ul> <table> <form>
inline元素
- 不独占行
- width、height不可设置
- width就是所包含的文字/图片的宽度
<span> <a>
两个inline类型的元素中间有间距。要想去除这个间距,可以将之转换成block等元素表示。做导航条的时候,采用或
-
/
-
标签包裹起来,来防止间距产生
inline-block元素
- 不独占行
- 元素的height、width、margin、padding都可设置
<img>
浮动定位
div实现横向多列布局
<> <> <>