客服热线：
手机版
二维码
外边距
围绕在元素边框周围的空白区域
会在元素外创建额外的空白区域
外边距是透明的
语法：margin:value;
单边设置
margin-top/right/bottom/left: value;
value可取值为像素，%，auto，负值
外边距简写
margin:value(四个方向相同) ;
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);
margin设置元素外边距的宽度，它有这么几个特点
1. 块级元素的垂直相邻外边距会合并
2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并
3. 浮动元素的外边距也不会合并
4. 允许指定负的外边距值，不过使用时要小心
内边距
内容区域和边框之间的空间
会扩大元素边框所占用的区域
语法：padding:value;
单边设置
padding-top/right/bottom/left:value;
value可取值为像素，百分比，但不能为负数
内边距的简写
padding:value(四个方向相同) ;
padding: value(上下) value(左右);
padding: value(上) value(左右) value(下);
padding: value(上) value(右) value(下) value(左);
border边框
border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色
border: 1px solid red;
不过不按此顺序来写依然能正常显示。
div{ border: red solid 2px; }
border的三要素可以统一写在”border”属性中，也可以单独设置。
统一的写法：border: 1px solid red;
单独设置的写法：
border-width:;
border-style:;
border-color:;
要注意，在style属性为空的情况下，整个边框是不会出现的。这不论是统一写在border或是单独设置都是这样的。
不写width会有默认3像素的值。
不写颜色会默认为黑色。
border-style设置边框的样式，有五种常用样式可选
点状dotted
实线solid
双线double （ 需要最起码设置为3像素，不然显示不下）
虚线dashed
无边框none
Box-sizing
box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定
它有两个值
content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。
border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。
四、伸缩盒模型flexbox
伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。
目的：在浏览器窗口变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。
flexbox的基础知识
由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。
一个flexbox的基本结构：
.box{ display: flex;} //最外层的为父容器，定义此容器为弹性布局
.item1{ flex-grow: 1; background:pink} flex-grow占1比例
.item2{ flex-grow: 2; background:orange} 占2比例
.item3{ flex-grow: 3; background:red} 占3比例
1
2
3
1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。
2.其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等
父容器常用属性
1.父容器中的常用属性
display: flex;
定义一个flex容器
新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列
4.子元素常用属性
*伸缩盒中的每一个元素称为一个项目。
flex-grow: number;
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
.item1{ flex-grow: 1; background:pink}
.item2{ flex-grow: 1; background:orange}
.item3{ flex-grow: 1; background:red}
旧的伸缩盒
伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法
伸缩盒最老版本
display:box;
将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;）
子元素 box-flex:;
伸缩盒过渡版本
display:flexbox;
将对象作为弹性伸缩盒显示
伸缩盒最新版本
display:flex;
将对象作为弹性伸缩盒显示
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。
1.Gecko内核 前缀为-moz- 火狐浏览器
2.Webkit内核 前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用
该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3.Trident内核 前缀为-ms- 也称IE内核
4.Presto内核 前缀-o- 目前只有opera采用
六、css中的继承
所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了颜色值也会应用到段落的文本中。
继承的局限性
在css中，继承是非常自然的行为，但是继承也有局限性。有些属性是不能继承的，比如border属性用来设置边框，它就没有继承性。padding和margin也不能继承。
能被继承的常用属性有哪些？
color, cursor, font-family, font-size, font-style, font-weight, font, letter-spacing, line-height, list-style，text-align, text-indent
