DIV+CSS布局
行内元素和块状元素
- 块状元素独占一行，行内元素可以共用一行
- 默认宽度： 块状元素默认宽度由父元素决定 行内元素默认宽度由内容决定
- 块状元素可以设置宽高，行内元素不可以设置宽高
- 大部分块状元素内部可以嵌套块状或行内，大部分行内只能嵌套行内
- 外边距，块状没问题，行内只能设置左右
盒子模型
盒子
盒子关系（标准文档流）
- 行内元素 只可以设置左右外边距。上下内边距会影响相邻的圆
- 块状元素 垂直margin会合并（margin塌陷）
- 元素嵌套的时候，设置子元素的上margin会被父元素抢走，解决方案：设置父元素border或者父元素设置overflow
属性的继承问题
- 文本类、字体、颜色 子元素会继承父元素的设置
- 布局类、边框、大小、边距、背景 不会继承
定位（position)
相对定位(relative)
- 相对于自身原先的位置
绝对定位(absolute)
- 相对于第一个定位的祖先元素，没有定位元素就直到HTML
固定定位(fixed)
- 相对于屏幕
布局相关属性
尺寸
- width
- max-width
- min-width
- height
- max-height(大)
- min-height
内边距 补白 内部白
-
padding
-
padding-left
-
padding-right
-
padding-top
-
padding-bottom
padding:20px;(4个方向） padding:20px 40px;(上下 左右） padding:10px 40px 80px(上 左右 下） padding：10px 20px 30px 40px (上 右 下 左 顺时针方向）
外边距 边距 外部白
- margin
- margin-left
- margin-right
- margin-top
- margin-bottom
布局相关属性
- display none/block（块级元素）/inline（行内元素）/inline-block
- visibility（是否可见） hidden（隐藏）/visible（元素可见）/collapse
- overflow（溢出） visible（溢出内容显示）/hidden（隐藏）/auto（溢出出现滚动条 不溢出没有滚动条）/scroll（都有滚动条）
- overflow-x
- overflow-y
- float:left/right
- clear:清除浮动对后面的元素的影响 both/left/right
定位属性
- position static(默认值）/relative(相对定位）/absolute(绝对定位）/fixed(固定定位）
- left
- right
- top
- bottom
- z-index 显示优先级。只能设置给已经定位的元素