盒子模型

盒子

盒子关系(标准文档流)

  • 行内元素:只可以设置左右外边距,上下内边距会影响相邻的元素
  • 块状元素:两个垂直的margin会合并,大的margin起作用(margin塌陷 )
  • 元素嵌套的时候,设置在子元素上的margin会被父元素抢走,解决方案:设置父元素border或者父元素overflow

属性的继承问题

  • 文本类,字体,颜色,子元素会继承父元素的属性
  • 布局类,边距,大小,边距,背景不会继承

定位

相对定位

  • 相对于自身原先的位置

绝对定位

  • 相对于前面一个定位的祖先元素,直到html

固定定位

  • 相对于屏幕

布局的相关属性

尺寸

  • width
  • max-width
  • min-width
  • height
  • max-height
  • min-height

内边距(补白/内补白)

  • padding
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom

外边距(边距/外部白)

  • margin
  • ......

布局的相关属性

  • display none/block/inline/inline-block
  • visibility hidden/visible/collapse
  • overflow hidden/visible/auto/scroll
  • overflow-x
  • overflow-y
  • float:left/right
  • clear:清除浮动对后面的影响 both/left/right
    • 例:<br >
    • overflow:auto;

定位属性

  • position:static(默认值)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)

  • 三个定位的优先级一样

  • left
  • right
  • top
  • bottom
  • z-index 显示优先级。只能设置给已经定位的元素

隐藏元素

  • visibility:hidden;隐藏了元素,但位置还在
  • display:none;位置和元素均隐藏了
posted on 2017-07-30 23:56  半个句号  阅读(100)  评论(0编辑  收藏  举报