HTML笔记（五）CSS盒模型

标准盒模型

W3C盒模型

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成
 实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
1.外边距 margin
  围绕在元素边框周围的空白区域
  会在元素外创建额外的空白区域
  外边距是透明的
  语法：margin:value;

1.1、单边设置

margin-top/right/bottom/left: value;

value可取值为像素，%，auto，负值
外边距简写

.margin:value(四个方向相同) ;
.margin: value(上下) value(左右);
.margin: value(上) value(左右) value(下);
.margin: value(上) value(右) value(下) value(左);

1.2、外边距合并
  当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

margin设置元素外边距的宽度，它有这么几个特点：

1. 块级元素的垂直相邻外边距会合并。
2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并。
3. 浮动元素的外边距也不会合并。
4. 允许指定负的外边距值，不过使用时要小心。
   解决：
   1.父元素加overflow:hidden;
   2.父元素或者子元素浮动
   3.父元素加边框 border:1px solid transpartent;
   4.父元素加padding-top:1px;

2、内边距padding
  内容区域和边框之间的空间
  会扩大元素边框所占用的区域
语法：padding:value;

2.1、单边设置
padding-top/right/bottom/left:value;
value可取值为像素，百分比，但不能为负数。
内边距的简写

 padding:value(四个方向相同) ;
                 padding: value(上下) value(左右);
                 padding: value(上) value(左右) value(下);
                 padding: value(上) value(右) value(下) value(左);

3、边框border
  border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

三要素书写的时候一般如下顺序

border-width:; 边框宽默认为3px。
	  border-style:;边框样式默认为none。点状dotted|实线solid|双线double| 虚线dashed。
border-color:;边框颜色默认为黑色。

简写：border：宽度 样式 颜色 （border: 1px solid red;）

怪异盒模型

IE的盒子模型
  与标准的盒子相比，IE 盒子模型的宽，包含了 border 和 pading。

1、box-sizing指定当前元素使用哪种盒模型。
属性值：
.content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。
.border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

伸缩（弹性）盒模型flexbox

  伸缩盒模型也叫弹性盒模型，它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。（参考阮一峰的弹性盒子教程）
  要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。
目的：在浏览器窗口变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

1、一个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比例


   <div class="box">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>

2、常用属性
display: flex;
定义一个flex容器
新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列

flex-direction: row（默认） | row-reverse | column | column-reverse;

flex-direction 属性决定主轴的方向（即项目的排列方向）
左到右，右到左，上到下，下到上。

flex-wrap: nowrap（默认） | wrap | wrap-reverse;

flex-wrap属性定义如果一条轴线排不下，如何换行。
不换行，上到下换行，第二种换行颠倒

flex-flow: <flex-direction> || <flex-wrap>

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content: flex-start（默认）| flex-end |center|space-between|space-around;   

justify-content属性定义弹性盒子元素在主轴（flex-direction的方向）方向上的对齐方式
头对齐，尾对齐，中心对齐，两端对齐（靠边），两端对齐（不靠边）

align-items :stretch(默认值,元素未在侧轴方向设置长度(宽或高)，会被拉伸)|center|flex-start|flex-end| baseline;

align-items属性定义flex子项在flex容器的当前行的侧轴（非主轴）方向上的对齐方式
拉伸以适应容器，中心对齐，头对齐，尾对齐，以第一行文字为基线对齐

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

3、 子元素常用属性

  order:number;

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow: number;   
  一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink: number

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

  flex-basis: <length> | auto;

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

浏览器内核以及其前缀

1.Gecko内核    前缀为-moz- 火狐浏览器
2.Webkit内核    前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3.Trident内核    前缀为-ms- 也称IE内核
4.Presto内核    前缀-o- 目前只有opera采用 Opera现已改用Google Chrome的Blink
5.Blink内核    Blink是一个由Google和Opera Software开发的浏览器排版引擎

css中的继承

继承的局限性
在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