CSS--两种盒子模型以及border属性

盒模型(box model)

概述：
margin(-TopRightBottomLeft)， padding(-TRBL)，border(TRBL+style|color|width)， box-sizing width， height， display， visibility

设置背景色或背景图：
background-color， background-image， background-repeat， background-clip，background-origin， background-attachment， background-size， background-position，linear-gradient， repeating-linear-gradient， radial-gradient， repeating-radial-gradient

修饰边框： border-radius,box-shadow,border-image

设置尺寸与溢出：
height,width,box-sizing,max-width,min-width,max-height,overflow,overflow-x,overflow-y

设置浮动元素： float， clear

使用定位技术： position， z-index

垂直对齐： vertical-align

列表样式： list-style-type， list-style-position， list-style-image

表格样式： border-collapse， border-spacing， empty-cells， table-layout

变换、过渡和动画：
transform(skew,scale,rotate,translate,rotate3d),transform-origin
backface-visibility,perspective,perspective-origin
transition(property,duration,delay,timing-function)
animation(name,duration,timing-function,direction,fill-mode,play-state)

内容(content)、内边距(padding)、边框(border)、外边距(margin)
IE盒子模型

这里写图片描述
标准盒子模型

这里写图片描述

padding是内容和其边框线之间的空间， margin是一个元素与另一个元素之间的空白。
width和height默认指内容的宽度和高度。
box-sizing: border-box |padding-box|content-box(默认); //(Firefox: -moz-box-sizing Safari或
chrome或android:-webkit-box-sizing ) -ms- IE
background-color 用颜色填充边框内部的空间，包括padding部分和虚线边框。

在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度

标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width
IE盒子模型的盒子宽度：左右margin+width

选择标准盒子模型方法：在html模板中加doctype声明。

1

CSS3新增box-sizing属性

box-sizing属性，box-sizing:content-box;表示标准的盒子模型，
box-sizing：border-box表示IE盒子模型。
默认的情况下是标准盒子模型。
border属性

这里写图片描述