html盒子颜色代码,css盒子(示例代码)

1.盒子模型的内容包括：content，padding，border，margin

2.盒子模型分类：

标准盒：正常盒，怪异盒

伸缩盒：新，旧

内边距：padding

1.内边距在content外，边框内

padding　　　　设置所有边距

padding-bottom　　设置底边距

padding-left　　　　设置左边距

padding-right　　　设置右边距

padding-top　　　　设置上边距

添加内边距的时候，只需要设置padding，不需要改变content大小，padding会自动撑开。

边框：border

border-width　　　　边框宽度

border-style　　　　边框样式

border-color　　　　边框颜色

border-radius　　　 设置圆角边框

box-shadow　　　　设置对象阴影

border-image　　　边框背景图片

外边距：margin

1.围绕在内容边框的区域就是外边距，外边距默认为透明区域

2.外边距接受任何长度单位，百分数值

margin　　　　　　设置所有边距

margin-bottom　　设置底边距

margin-left　　　　设置左边距

margin-right　　　设置右边距

margin-top　　　　设置上边距

注意：外边距合并

3.标准盒子模型

4.怪异盒子模型

box-sizing：border-box； 固定了盒子的大小，只在盒子内部改变值。

5.css伸缩盒子(旧)

-1.css3引入了一种新的布局模式-Flexbox布局，即伸缩布局盒模型(Flexible Box)，用来提供一个更加有效的方式制定，调整和分布一个容器里项目布局，

即使它们的大小是未知或者动态的。

-2.Flexbox布局可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变。

-3.属性

box-orient　　　　伸缩盒对象的子元素的排列方式

box-pack　　　　 水平居中

box-align　　　　 垂直居中

box-flex　　　　　伸缩盒对象的子元素如何分配其剩余空间

box-direction　　  伸缩盒对象的子元素的排列顺序是否反转

例子如下：

html

d1

d2

d3

css

.one{width:100px;height:100px;background-color:blue;-webkit-box-flex:1;

}.two{width:100px;height:100px;background-color:pink;-webkit-box-flex:1;

}.three{width:100px;height:100px;background-color:green;-webkit-box-flex:1;

}.container{width:600px;height:600px;background-color:dimgrey;display:-webkit-box; /*变成盒子*/-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-direction:reverse;

}

6.css伸缩盒模型(新)

属性

flex　　　　　　复合属性，设置伸缩盒对象的子元素如何分配空间

flex-grow　　　弹性盒的扩展比率，按比例平均分配

flex-flow　　　 复合属性，设置伸缩盒对象的子元素排列方式

flex-direction　　伸缩盒对象的子元素在父容器中的位置

flex-wrap　　  设置伸缩盒对象的子元素超出父容器时是否换行

3个div 每个宽度200px，父容器为300px，超出了300px，但是三个div每个都会变成100px，这时需要设置flex-flow：wrap；(即超过部分换行，div会变成3行显示)

order　　　　　设置伸缩盒对象的子元素出现的顺序

.one{width:100px;height:100px;background-color:blue;-webkit-flex-grow:1;

/*第一个div 第三个显示*/-webkit-order:3;

}.two{width:100px;height:100px;background-color:pink;-webkit-flex-grow:1;

/*第二个div 第一个显示*/-webkit-order:1;

}.three{width:100px;height:100px;background-color:green;-webkit-flex-grow:1;

/*第三个div 第二个显示*/-webkit-order:2;

}.container{width:600px;height:600px;background-color:dimgrey;

/*变成盒子*/display:-webkit-flex;-webkit-flex-direction:column;

/*超出父容器时换行*/-webkit-flex-flow:wrap;

}

d1

d2

d3