盒子模型

盒子模型


w3c组织建议把网页上元素看成一个个盒子。盒子模型主要定义四个区域：内容（content）、内边框（padding）、边框（border）、外边框（margin）。


css盒子模型的属性
内容属性：宽=width 高=height（宽和高组成了content的内容区）
内边距属性：padding
如果设置了背景图，那图片会延伸到padding的位置。padding值不可以为负值。
单独设置某一个方向的内边距
padding-top:20px;
padding-right：
padding-bottom：
padding-left：


边框属性：border
border属性设置一个元素的边框，边框三要素：宽、样式、颜色。默认3像素、黑色
单独写法：
border-width
border-style  （点状 dotted；实线 solid；双线 double；虚线dashed；无边框 none；）
border-color


外边距属性：margin（使用时注意浏览器的兼容性）
margin设置元素的外边距的宽度，它有以下特点：
块级元素的垂直相邻外边距会合并（以大的为准）；
而行内元素实际上不占上下外边距，行内元素的左右外边距不合并；
浮动元素的外边距也不会合并；
允许指定负的外边距值，不过使用时要小心。


书写内边距与外边距时的规则（TRBL顺序永远都是这个！）
如果有四个参数：四个参数分别表示上右下左
h2{margin:10px 20px 30px 40px;}
如果只有一个参数：表示上右下左四个方向都为这一个值
h2{margin：10px;}
如果有两个参数：第一个参数表示上下 第二个参数表示左右（取对面的值）
h2{margin：10px 20px;}
如果三个参数：表示上右 下，左边位置取右边的值。
h2{margin:10px 20px 30px;}//最后一位是左，取对面右的值20


一个盒子实际占了多少空间？
content+padding+border+margin，这几个属性都要加起来，才是盒子的大小。也就是内容区域+内边框+边框+外边框。




怪异盒子模型
在不加doctype的情况下，IE浏览器中会显示为怪异盒模型（也叫IE和模型），它的宽和高包含了border和padding。




伸缩盒子模型
伸缩盒模型也叫弹性模型，或flexBox。可以轻松的创建“自适应”浏览器窗口的流动布局。它是css3中为display新添加的值类型。


常用属性
1、父容器中的常用属性
display：flex；
定义一个flex容器


justify-content：flex-end；
设置项目的对齐方式，flex-end代表内容右对齐，space-around（默认）代表每个项目两侧的间隔相等。


2、项目中的常用属性
伸缩盒中的每一个元素称为一个项目。
flex-grow：1 属性定义项目的比例
.item1{flex-grow:1;background:pink;}
.item2{flex-grow:2;background:orange;}
.item3{flex-grow:3;background:red;}


旧的伸缩盒
伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法


伸缩盒最老版本
display：box;
将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display：-webkit-box;或display：-moz-box;）
.cont{display:-webkit-box;}
.item{
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-box-flex:1;
background:red;
margin:5px;
}


伸缩盒过渡版本
display：flexbox;
将对象作为弹性伸缩盒显示


伸缩盒最新版本
display：flex；
将对象作为弹性伸缩盒显示