码迷,mamicode.com
首页 > Web开发 > 详细

HTML中盒子问题

时间:2018-04-22 21:48:32      阅读:455      评论:0      收藏:0      [点我收藏+]

标签:css   一个   背景   如何   多个   强制   add   块级元素   机制   

子盒子

边框盒

  • 由border、padding、content组成,是检查器默认显示的尺寸。
  • 背景颜色覆盖默认覆盖边框盒,可通过background-clip属性修改

    background-clip:border-box; 覆盖边框盒
    background-clip:padding-box; 覆盖填充盒
    background-clip:contentr-box; 覆盖内容盒
    

填充盒

*由padding。content组成。严格意义上,overflow(溢出),指溢出填充盒。

    overflow:hidden;溢出部分隐藏(隐藏padding以外的内容)
    overflow:inherit;强制继承父级设置
    overflow:scroll;垂直和水平方向显示滚动条
    overflow:auto;有溢出的方向显示滚动条

内容盒

  • 由content组成,默认情况下,width和height属性,是指内容盒的宽度和高度。
  • width和height的设置范围可通过box-sizing属性修改

    box-sizing:border-box;IE默认(border、padding、content)
    box-sizing:content-box;谷歌默认(content)
    

outline属性

  • 外边框(轮廓),用法和border一样,不占像素(布局时使用)
  • 使用outline时,只能同时对四条边同时设置。

视觉格式化模型

  • 它是CSS的一种机制,它规定了页面中的多个盒子如何布局。

视口

  • 可视窗口,通常指浏览器的可视区域。不同设备可视区域不同。

包含块

  • 每个元素都有一个包含块,它是指元素在页面中摆放的区域。通常情况下,元素的包含块是它父元素的内容块。包含块会随父元素的内容盒移动。

元素定位 体系:

  • 常规流,浮动,绝对定位
  • 任何一个元素,必须属于其中的一种定位体系。
  • 不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异。
  • 默认情况下,元素为常规流,块盒占满整个可用空间,自动换行。行盒紧挨显示,直到占用完整个可用空间,再换行。

块级元素在不同体系中自动值计算

常规流:普通流,文档流,普通文档流等

水平方向

常规流盒子水平方向的尺寸必须等于包含块的宽度

  • margin-left、right,width全取自动,width占满整个空间
  • margin一侧自动,一侧设置固定值,width设置自动,margin自动一侧会被width占满
  • margin两侧设置固定值,width自动,width占满剩余空间 margin两侧自动,width固定值,width自动居中 margin两侧,width都固定,且三者之和小于父级content,则margin-right变为自动

垂直方向

  • margin为auto:0px
  • height为auto;适应内容的高度

HTML中盒子问题

标签:css   一个   背景   如何   多个   强制   add   块级元素   机制   

原文地址:https://www.cnblogs.com/bohou/p/8909044.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!