第三章--页面布局总结

最新推荐文章于 2024-08-04 16:33:59 发布

燕云十三

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量883

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_78001135/article/details/136616222

版权

一：盒子模型

盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容，内边距，边框，外边距，这个四个组成

padding-top,padding-right,padding-bottom,padding-left:上内边距，右内边距，低内边距，作内边距

border-top,border-right,border-bottom,border-left:上边框，右边框，低边框，左边框

margin-top,margin-right,margin-bottom,margin-left:上外边距，右外边距，低外边距，左外边距

二：块级元素与行内元素

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

1.块级元素

默认占一行高度，一行内通常只有一个块级元素（浮动后除外）

一个块级元素占一行

块级元素的特点

块级元素的默认高度由内容决定，除非自定义高度

块级元素的默认宽度是父级元素的内容宽度，除非自定义宽度

块级元素的宽度，高度，外边距以及内边距都可以自定义设置

块级元素可以容纳块级元素和行内元素

<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例

wxml

<view style="border:1px solid #f00">块级元素1</view>
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid#00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
    <view style="height: 60px;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;"></view>

运行结果

2.行内元素

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

行内元素不能被设置宽度和高度，由内容决定

行内元素不能放置块元素

同一块内，行内元素和其他元素显示在同一行

示例代码

<view style="padding: 20px;">
    <text style="border: 1px solid#f00;">文本1</text>
    <text style="border: 1px solid #0f0; margin: 10px;padding: 5px;">文本2</text>
    <view style="border: 1px solid #00f; display: inline;">哭级元素设置为行内元素</view>一行显示不全，自动换行显示
    </view>>

运行结果

三：行内块元素

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

示例代码

<view>
       元素显示的方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素，行内元素和行内块元素</view>三种类型
</view>

运行结果

四：浮动与定位

1.元素浮动与清楚

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

{float:none|left|right;|}

其中，none----默认值，表示元素不浮动；

left-----元素向左浮动；

right-----元素向右浮动；

在下面的代码，分别对box1.box2.box3元素左浮动

<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #f00;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: 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 #f00;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 #0f0;">box1</view>
      <view style="float: left;border: 1px solid #0f0;">box2</view>
      <view style="float: left;border: 1px solid #0f0;">box3</view>
 </view>

运行结果

通过看运行结果图我们发现，当box3左浮动后，父元素的边框未能包裹box3元素，可以清除浮动来解决

清除浮动基本格式代码

{clear:left |right|both|none}

left:清除左浮动的影响 right：清除右浮动的影响

both：同时清除左右浮动的影响 none：不清除浮动

<view>box1 box2左浮动 box3清除左浮动
<view style="border: 1px solid #f00;padding: 5px;"></view>
<view style="float: left;border: 1px solid#0f0;">box1</view>
<view style="float: left;border: 1px solid#0f0;">box2</view>
<view style="clear: left;border:  1px solid #0f0">box3</view>
</view>
//wxml
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid#f00;padding: 5px"class="clear-float">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="float: left;border: 1px solid #0f0;">box3</view>
</view>

运行结果

2.元素定位

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

{position:static|relative|absolute|fixed}

relative：相对定位 absolute：绝对定位 fixed：固定定位 static：默认值

对box1,box2,box3进行静态定位

<view>box1,box2,box3均未定位</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</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进行元素相对定位，

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

运行结果

对box1,box2,box3进行元素绝对定位

<!--box2 元素绝对定位 absolute top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;position: absolute;left: 30px;top: 30px  ">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

运行结果

对box1,box2,box3进行元素固定定位

<!--box2 元素固定定位fixed top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;position: absolute;left: 30px;top: 30px  ">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

运行结果

五：flex布局

flex意为弹性盒子模型，可以简便，完整，响应式地实现各种页面布局

fiex布局模型

1.容器属性

flex容器支持的属性有7种

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

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

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

.box{flex-direction:row|row-reverse|column|column-reverse;}

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

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

flex-flow是flex-direction和flex-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;}

alin-content用来定义项目有多根轴线，在交叉轴上的对齐方式，如果只有一根轴线该属性不起作用

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

六：项目属性

容器内的项目支持6个属性，其名称和功能如表

1.order

定义项目的排列顺序，数值越小，排列越前，默认值为0

.item{order:<number>;}

示例代码

<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" style="order:1">1</view>
       <view class="item" style="order:2">2</view>
       <view class="item" style="order:3">3</view>
       <view class="item">4</view>
</view>

运行结果

2.flex-grow

定义项目的放大比例，默认值为0，即不放大，语法格式

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

示例代码

<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>

运行结果

3.flex-shrink

用来定义项目的缩小比例，默认值为1，如果空间不足，该项目就会被缩小

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

示例代码

<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-grow: 1">3</view>
       <view class="item" style="flex-shrink: 4">4</view>
</view>

运行结果

4.flex-basis

属性用来定义伸缩项目的基准值

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

示例代码

<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-basis:100px">2</view>
       <view class="item" style="flex-basis: 200px">3</view>
       <view class="item">4</view>
</view>

5.flex

默认值分别是0，1，auto，语法格式

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

示例代码

.item{flex:auto;}//等价于.item{flex:1 1 auto;}
.item{flex:none;}//等价于.item{flex:0 0 auto;}

6.align-self

用来指定单独的伸缩项目在交叉轴上的对齐方式，语法格式

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

燕云十三

关注

19
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
第三章--页面布局总结

盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容，内边距，边框，外边距，这个四个组成padding-top,padding-right,padding-bottom,padding-left:上内边距，右内边距，低内边距，作内边距border-top,border-right,border-bottom,border-left:上边框，右边框，低边框，左边框。
复制链接

扫一扫