1、怎么理解盒模型?css
盒子模型是样式表(css)控制页面的很重要的概念。全部的页面的元素均可以当作是一个盒子,占据必定的页面空间。占据的空间要比实际使用的空间要大得多。咱们能够调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置。盒子模型是由内容、边框、间隙(padding)、间隔(margin)组成。浏览器
盒模型是有两种标准的,一个是标准模型,一个是IE模型。 以下图所示:3d
在标准模型中,盒模型的宽高只是内容(content)的宽高,cdn
而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。blog
css如何设置两种模型:排序
2、borderit
border是元素的外围,计算元素的宽和高要把border加上。io
border有三个主要属性,color(颜色)、width(粗细)和style(样式)。class
一、color主要是指定border的颜色,一共有256的3次方种颜色供咱们选择。一般是16进制的值,好比红色是“#FF0000”。lazyload
二、width是border粗细程度,能够设置为thin、thick和length,length为具体数值,好比说border:1px #CCC solid;其中1px指的是border的width,默认值是medium,通常浏览器解析为2像素。
三、style属性能够设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等,其中none和hodden是不显示border,hidden能够用来解决边框的冲突问题。
3、padding
padding用于控制content与border之间的距离,同时设置上下左右的padding时,能够这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding,逆时针排序,margin属性也能够这样书写。
4、margin
margin用于控制块与块(能够理解成块级元素)之间的距离。margin是与content之间的边距。