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

转载于:https://www.cnblogs.com/DCL1314/p/7258478.html