码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型详解

时间:2018-05-30 15:04:57      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:一个   height   宽度   source   code   idt   nsf   模型   继承   

在html文档中,元素体现为一个一个的方形盒子。每个盒子由以下四种属性来确定他在文档中的位置和大小:

  • content 内容区域
  • padding 内边距
  • border 边框
  • margin 外边距

标准和非标准

标准盒模型 定义下,content占据的空间由(min/max)width,(min/max)height来控制。

而在IE或者是 box-sizing: border-box 模式下,content空间应该还包含了padding和border的宽高。

现在通常使用 box-sizing: border-box 这种非标准盒模型来开发。

content 内容区域

width 与 height

  • width的单位可以是px,rem,em,vw,也可以是百分比%。当单位是%时,取值是父元素宽度的比值。
<!--.div2的宽度是200px( 1000 * 20%)-->

.div1{width: 1000px}
.div1 > .div2{width: 20%} 
  • height的情况会复杂一些,px,rem,em,vh为单位时,效果和width相仿。而为百分比%时,并不会简单的按照父元素的高度来计算。
<!--如果需要让height百分比生效,需要这样设置-->
html, body{height: 100%}
#app, .div1{height: 100%}
.div2{height: 20%}

html代码结构片段

#app
  .div1
    .div2

对子元素的影响

如果内容区域内的元素宽高超出了定义的大小,可以通过overflow:hidden来截断,也可以通过text-overflow: ellipsis来控制文字的溢出。

padding 内边距

padding值指定了content到border之间的距离。不能设置为负值。利用padding的百分比%单位,可以实现盒子的等比缩放。

<!--padding百分比按照父元素宽度计算,所以div2会是一个正方形-->
.div1{width: 100%}
.div1 > .div2{width: 20%;padding-top: 20%}

border 边框

边框包裹在内容区域周围,可以是实线,也可以是虚线,甚至可以使用图片。边框会随着border-radius属性的设置而弯曲。

  • 颜色:边框的颜色会继承字体的颜色。
  • 在移动端手机上,通常使用伪元素方式来实现 1px边框
.1px-top{position: relative}
.1px-top::before{
    content: ‘‘;
    position: absolute;
    width: 100%;
    height: 1px;
    border-top: 1px solid;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

margin 外边距

margin是定义盒子自身相对于其他盒子的距离。百分比%同样是按照父元素的宽度进行计算。
在多个存在margin-top/bottom的兄弟元素之间,他们相邻的margin值会被合并,取最大的一个进行展示。

div{margin: 10px 0}

下面4个div上下的间距均是10px,而不是20px

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

盒子模型详解

标签:一个   height   宽度   source   code   idt   nsf   模型   继承   

原文地址:https://www.cnblogs.com/small-coder/p/9110815.html

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