盒子模型

 

 浏览的盒子模型指的是它的盒子宽度需要包括内容区宽度、内外边框和边框大小,高度类似。一般设置宽度默认是对应内容区宽度。

  margin  外边距  盒子与盒子的间距  margin-top 就是块级元素与块级元素之间的空间,padding内边框,padding-left就是边框与中间内容之间的空间。

  border边框  border-top  border-left border-bottom这是盒子模型的样式。

  盒子模型padding有四个值。

1. 上下左右

2.上下,左右

3.上右下左

4. 上,左,右,下

display
盒子共有两种类型:一种是块级元素,如DIV  P;一种是内联元素,如A SPAN。  但可以使用dispaly:block 或者 inline  来改变二者状态;更可以使用none来让其消失,这些很有用;
块级元素:1、总是在新行上开始;2、高,行高以及顶和底边距都可控制;3、宽度缺省是它的容器的100%,除非设定一个宽度。  4、其表现的特性是“ 块布局”形式
内联元素:1、和其他元素都在一行上;  2、高,行高及顶和底边距不可改变;3、宽度就是它的文字或图片的宽度,不可改变。4、其表现的特性是“ 行内布局”形式。

弹性盒子模型:

注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向 box-direction 元素排列顺序 Normal 正序 Reverse 反序 box-ordinal-group 设置元素的具体位置。

通过用box-flex定义盒子模型的空间。

  

 
 
原文地址:https://www.cnblogs.com/shibingxin/p/5671788.html