第三章总结

盒子模型

图中的各个元素的含义如下：

width和height        内容的宽度和高度         padding-top、padding-right、padding-bottom、和padding-left        上内边距、右底内边距和左内边距

border-top、border-right、border-bottom、border-left        上边框、右边框、底边框和左边框

margin-top、margin-right、margin-bottom、margin-left        上外边距、右外边距、底外边距、左外边距

.box{
    width:70px;
    padding:5px;
    margin:10px;
}

块级元素与行内元素

元素按显示方式分为块级元素、行内元素和行内块元素，他们的显示方式由display属性控制。

块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素（浮动后除外），添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。

 

行内元素

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

 

行内块元素

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

 

 

浮动与定位

元素浮动与清除

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

示例：

{float:none|left|right;}

left——元素向左浮动；        right——元素向右浮动

代码示例：

<view>box1,box2,box3 没浮动</view>
<view style="border:1px solid #0f0;padding:5px">
<view style="border:1px solid #0f0">box1</view>
<view style="border:1px solid #0f0">box2</view>
<view style="border:1px solid #0f0">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid#f00 ;padding:5px">
      <view style="float: left;border:1px solid#0f0">box1</view>
      <view style="border: 1px solid#0f0">box2</view>
      <view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 左浮动 </view>
      <view style="border: 1px solid#0f0:padding:5px">
      <view style="float: left;border: 1px solid#0f0">box1</view>
      <view style="float: left;border: 1px solid#0f0">box2</view>
      <view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动</view>
    <view style="border: 1px solid#f00;padding:5px;">
    <view style="float: left；border：1px solid#f00">box1</view>
    <view style="float: left；border：1px solid#f00">box2</view>
    <view style="float: left；border：1px solid#f00">box3</view>
</view>

在CSS中，clear属性用于清除浮动属性对其他元素的影响，其基本格式如下：

{clear:left |right |both |none}

left——清除左边浮动的影响，也就是不允许左侧有浮动元素；

right——清除右边浮动的影响，也就是不允许右侧有浮动元素；

both——同时清除左右两侧浮动的影响;

none—不清除浮动。

示例代码如下：

<view >box1 box2 左浮动box3 清除左浮动 </view>
<view style = "border:1px solid #f00 ;padding:5px">
<view style ="float:left;border:1px solid #0f0" >boxl < /view>
<view style ="float:left;border:1px solid #0f0" >box2 < /view>
<view style ="clear:left ;border:1px solid #0f0" >box3 < /view>
</view>

元素定位

浮动布局虽然灵活，但无法对元素的位子进行精准的控制。在CSS中，通过position属性可以实现对页面元素的精准定位。基本格式如下：

{position:static|relative|absolute|fixed}

static默认值，该元素按照标准流进行布局;

relative一相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流
中脱离，它对其后的兄弟盒子的定位没有影响；
fixed——固定定位，相对于浏览器窗口进行定位。
对boxl、box2、box3进行元素静态定位，示例代码如下：

<view style ="border:1px solid #0f0;width:100px;height:100px">boxl</view>
<view style ="border:1px solid #0f0;width:100px;height:100px">box2</view>
<view style ="border:1px solid #0f0;width:100px;height:100px">box3</view>

如果将box1、box2、box3的父级元素采用相对定位，将box2采用绝对定位，代码如下：

<view style="position: relative; top:50px; left:50px; border:1px solid #00f"
<view style="border: 1px solid #0f0; width: 100px; height:100px">boxl</view>
<view style="border: 1px solid#0f0; width:100px;height:100px;position:absolute;left:30px; top:30px">box2 </view>
<view style ="border:1px solid #0f0; width: 100px; height:100px">box3</view>
</view>

flex布局

 

容器属性

display用来指定元素是否为flex布局，语法格式为：

.box{display:flex|inline-flex;}

flex-direction用于设置主轴的方向，即项目排列的方向，语法格式为：

.box{flex-dirextion:row|row-reverse|colum|colum-reverse;}

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

flex -flow是fex-direction 和fex-wrap 的简写形式，默认值为row nowrap，语法格式如下：

.box{flex-flow:<flex-direction>||<flex-wrap>;}

justify-content 用于定义项目在主轴上的对齐方式。语法格式如下：
 

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

align一items用于指定项目在交叉轴上的对齐方式，语法格式如下：
 

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

align -content 用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果
只有一根轴线，该属性不起作用。语法格式如下：
 

.box/align-content:flex-start lflex-end|center|space-between|space-around|stretch}

项目属性

 

属性名	功能
order	定义项目的排列顺序
flex-grow	定义项目的放大比例（当有多余空间时）
flex-shrink	定义项目的缩小比例（当空间不足时）
flex-basis	定义在分配多余空间之前，项目占据的主轴空间
flex	flex-grow、flex-shrink、flex-basis的简写
align	用来设置单独的伸缩项目在交叉轴上的对齐方式

order 属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。语法格式如下:
 

.item{order:<number>;}

flex-grow 定义项目的放大比例，默认值为0，即不放大。语法格式如下

 

.item{flex-grow:<number>;}

flex -shrink 用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩)语法格式如下：
 

.item{flex-shrink:<number>;}

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认
值为auto（即项目的本来大小）。语法格式如下：

.item{flex-basis:<number>lauto;}

flex 属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。
语法格式如下：

 

.item{flex:<flex-grow>|<flex-shrink>l<flex-basis>;}

align-self 属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下：
 

.item{align-self:auto|flex-start|flex-end Icenter|aseline|stretch;}