第三章总结

盒子模型

在css中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）、和外边距（margin）4个部分组成。 

此外，对padding、border、和margin可以进一步细化为上、下、左、右四个部分，在css中可以分别进行设置。

块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度，
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。

行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的 display 属性设置为inline 后，该元素即被设置为行内元素。

行内块元素

当元家的 dfsplay属性被设置为inline-bock 时，元素被设置为行内块元素。行内块元素司以被设置高度、宽度、内边距和外边距。

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过foat属性来定义浮动。

元素定位

浮动布局虽然灵活、但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。

static--默认值，该元素按照标准流进行布局;
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素成为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，称为flex项目（flex item）。

flex布局模型

flex容器支持的属性

flex-derection示例

flex-wrap示例

align-content示例

                                            

容器内项目属性

jiustify-content示例

                                 

.cont1{
display: flex;
flex-direction: row;
align-items: baseline;
}
.item{
background-color:#ccc;
border: 1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.itm3{
display: flex;
height: 50px;
align-items: flex-end;
}
.item4{
height: 120px;
}

flex-grow定义项目的放大比例，默认值为0，即不放大。 

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item"style="flex-grow:1">2</view>
<view class="item"style="flex-grow:2">3</view>
<view class="item">4</view>
</view>

flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小.

<view class="cont1">
<view class="item">1</view>
<view class="item ">2</view>
<view class="item ">3</view>
<view class="item ">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item"style="flex-shrink:2">2</view>
<view class="item"style="flex-shrink:1">3</view>
<view class="item"style="flex-shrink:4">4</view>
</view>