DIV+CSS布局

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 显示优先级。只能设置给已经定位的元素