页面布局的总结

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量977 收藏 22
点赞数 31
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75575971/article/details/136616249
版权

盒子模型

盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中一个独立的盒子模型由内 容(content)、内边距( padding)、边框(border )和外边距(margin)4个部分组成。如下图所示：

块级元素和行内元素

块级元素

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

示例代码：

<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>
<view style = "height:60px">块级元素4</view>
<view style = "border:1px solid #f00;width:100px;background-color:#ccc">父级元素高度随内容决定,内容为文本</view>

示例结果：

行内元素

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

示例代码：

<view style="padding:20px; ">
<text style="border: 1px soliid #f00;">文本1</text>
<text style="border: 1px soliid rgb(105, 211, 105);margin: 10px; padding: 5px；">文本 2</text>
<view style="border: 1px soliid #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 >

代码结果展示：

浮动与定位

元素浮动与清除

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

其基本格式为:
{float:none | left | right;}

代码示例展示:

<view >
元素显示方式的<view style = "display:inline -block;border:1px solid #f00;margin:10px;padding:10px;width:200px;">块级元素、行内元素和行内块元素
</view>三种类型。
</view >
<view >box1,box2,box3 没浮动</view>
<view style = "border:lpx solid #f00 ;padding:5px">
<view style= "border:1px solid #0f0 " > box1 </view ><view style ="border:1px solid #0f0" >box2 </view ><view style= "border:lpx solid #0f0 " >box3 </view ></view >
<view >box1左浮动 </view >
<view style = "border:1px solid #f00 ;padding:5px">
<view style = "float:left;border:lpx solid #0f0" >box1 </view ><view style ="border:lpx solid #0f0 " >box2 </view ><view style = "border:lpx 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:lpx solid #f00 ;padding:5px">
<view style="float:left;border:1px solid #0f0 ">box1 </view ><view style="float:left;border:lpx solid #0f0 " >box2 </view ><view style="float:left;border:1px solid #0f0 " >box3 </view ></view>

运行结果展示：

当box3左浮动后，父元素的边框未能包裹box3元素。这时可以通过清除浮动来解决。clear属性用来清除浮动元素对其他元素的影响，基本格式：

{clear:left|right|both|none}

代码如下：

<view style="border: 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="clear: left;border: 1px solid #0f0;">box3</view>
</view>

运行结果展示：

另外，还可以在父元素外添加一个空元素，实现父元素包裹浮动元素。

abd.wxml示例代码如下：

<view>box1 box2 box3左浮动 在父元素后添加一个空元素</view>
<view style="border: solid #f00;padding: 5px" class="clearfloat">
<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>

abd.wxss代码如下：

.clearfloat::after{
  display: block;clear: both;height: 0;content:""
}

代码示例结果如下：

元素定位

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

基本格式如下：

{position:static | relative | absolute | fixed}

其中，static——默认值，该元素按照标准流进行布局;
relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子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进行元素相对定位示例代码如下：

<view style ="border:1px solid #0F0; width:100px;height:100px">box1 </view >
<view style ="border:1px solid #0F0; width:100px;height:100px;position:relative;left:30px;top:30px">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;height:100px;position:absolute;left:30px; top:30px">box2 </view >
<view style ="border:1px solid #0f0; width:100px;height:100px">box3</view>

代码运行结果如下：

对box1、box2、box进行元素固定定位，示例代码如下：

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

代码运行结果如下：

 固定定位和绝对定位的效果相同是因为他们的父元素是page，没有定位。

将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;">box1 </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>

代码运行结果如下： 

将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;">box1 </view >
<view style="border:1px solid #0f0 ;width:100px;height:100px;position:fixed;left:30px; top:30px">box2 </view >
<view style ="border:1px solid #0f0; width:100px;height:100px">box3</view>
</view>

运行结果如下：

flex布局

flex布局是万维网联盟(World Wide Web Consortium,W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。 flex是flexble box的缩写，意为弹性盒子模型，可以简便，完整、响应式地实现各种页面布局。
flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(fex container),flex布局的所有直接子元素自动成为容器的成员，称为flex 项目(flex item)。
项目默认沿主轴排列。单个项目占据的主轴空间叫做mainsize，占据的交叉轴空间叫做
cross size。flex布局模型如图所示。

设置di=play属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主    轴方向。主轴既可以是水平方向，也可以是垂直方向。

容器模型

flex容器支持的属性有7种，如下图

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

box|display:flex |inline-flex;}
其中，flex-块级flex布局，该元素变为弹性盒子:
inline -flex行内flex布局，行内容符合行内元素的特征，同时在容器内又符合 flex布局规范。
设置了flex布局之后，于元素的float、clear和vertical -align 属性将失效。

flex - direction

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

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

row--主轴为水平方向，起点在左端，    当元素设置为flex布局时，主轴默认为row;    
row - reverse-主轴为水平方向，起点在右端; column-主轴为垂直方向，起点在顶端
column - reverse-主轴为垂直方向，起点在底端。

flex - wrap

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

box{flex-wrap:nowrap |wrap lwra ap -reverse;}

nowrap--不换行，默认值;
wrap--换行,第一行在上方;
wrap -reverse-换行，第一行在下方
当设置换行时，还需要设置align-item 属性来配合自动换行，但align-item的值不能为“stretch"

fex-flow

flex -low是flex -direction和flex- wrap的简写形式，默认值为row nowrap。语法格式如下:

box|flex-flow:<flex-direction > |l<flex -wrap>;

示例代码如下:

.box{flex-flow:row nowrap;}
.box{flex-flow:row -reverse wrap;}
.box{flex-flow:column wrap-reverse;}

代码结果展示：

justify - content
justify-content用于定义项目在主轴上的对齐方式。语法格式如下:
.box|justify-content:flex-start lflex -end lcenter |space -between Ispace -around;
其中，justify-content与主轴方向有关，默认主轴水平对齐，方向从左到右:
flex - start-左对齐，默认值: flex - end--右对齐; center-居中;
space - between两端对齐，项目之间的间隔都相等; space - around-每个项目两侧的间隔相等。

align-items
align-items用于指定项目在交叉轴上的对齐方式，语法格式如下:
.box/align-items:flex-start |flex - end |center lbaseline lstretch;}

align-items-与交叉轴方向有关，默认交叉由上到下;
flex- start--交叉轴起点对齐; flex- end--交叉轴终点对齐; center--交叉轴中线对齐:
baseline--项目根据它们第一行文字的基线对齐:
stretch如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

示例代码如下:

abd.wxml

<view class ="contl">
<view class ="item" >l</view >
<view class = "item item2 ">2 </view >
<view class = "item item3">3 </view >
<view class = "item item4 ">4 </view >
</view >

abd.wxss


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

运行结果展示：

  align - content

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

.box{align-content:flex -start |flex - end | center |space - between space -around lstretch}
其中，space-between与交叉轴两端对齐，轴线之间的间隔平均分布;
space - around-每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大
倍。
其余各属性值的含义与align-items属性的含义相同。图3-17所示为align-content不同值的显示效果。

项目属性

容器内的项目支持6个属性

1. order
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">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>

 运行结果如下：

                                                                                                                                                                 felx-grow

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>

运行结果展示：

flex-shrink

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

运行结果展示：

.flex-basis

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

语法格式如下:

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

运行结果如下：

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。

语法格式如下：

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

align-self

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

其语法格式如下：

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

库卡哇啊
关注
  • 31
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web页面布局总结
xinguanyiban07的专栏
04-24 656
Web网页布局的总结 几乎完全参考：掘金 Web网页布局的主要方式 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中...
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
热门推荐
★★光亭★★
12-22 1万+
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
【HTML基础】CSS样式表
Fighting_hawk的博客
02-10 3411
1. 理解HTML与CSS各自的功能及配合原则； 2. 掌握HTML与CSS的三种组合方式。
css样式总结，持续更新
BMG-Princess
05-11 1332
状态驱动的动态 CSS 内核浏览器私有属性 el-tree中更改鼠标移动时、点击时和失去焦点时的背景色 关于背景色 表格 去掉定位： 换行总结 三元表达式 根据渐变的两个色值+据百分比，取对应的色值。...
各种页面常见布局以及实例分析
weixin_30266885的博客
03-14 500
一、水平居中 (1)文本/行内元素/行内块级元素▲ “好的”、display:inline、display:inline-block; 原理：text-align只控制行内内容(文字、行内元素、行内块级元素)相对他的块级父元素对齐 <div class="parent"> <div class="son"> ...
css知识点1小总结
weixin_57689217的博客
09-24 2534
样式表优点缺点使用情况控制范围行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）
Android页面布局总结
09-29
android 中常用的几种布局方式：LinearLayout ( 线性布局 )、LinearLayout ( 线性布局 )、TableLayout ( 表格布局 )，及控件的各种属性
CSS两列布局实现方式总结
01-21
两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。...
CSS 网页布局网页制作技巧总结
12-12
CSS网页布局开发中，会有很多小技巧，这之类相关的文章在jb51.net有许多介绍，这里再扩展一下您所想要得到的知识，相信您会有很多收获！ 　一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二...
布局用CSS+DIV的优点总结
10-30
布局用CSS+DIV的优点总结 一、表现和内容相分离 ...这使得网页的结构和表现分离，提高了网页的可维护性和灵活性。 二、提高搜索引擎对网页的索引效率 ...因此，CSS+DIV布局已经成为目前网页布局的主流。
CSS常用样式属性总结
一杯清泉
02-21 4357
1、左浮动 float:left 2、右浮动 float：rigth 3、div内的元素不换号 white-space: nowrap; display: inline-block; 4、消除padding对宽高影响 box-sizing: border-box; 5、a标签图片太大，尺寸超过容器大小 background-size: contain; 6、网页跳转打开新的页面 target: "_blank"; 7、宽高充满父布局 width: 100%; heigth:100%; 8、转为块级元素 di
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 474
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1004
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 94
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 952
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1589
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
Web Pages 表单
07-20 332
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 511
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 320
thinkphp8图片上传的验证
"QuietGRID前端技术分享与入门布局总结
Grid布局是一种用于网页布局的强大工具，它可以帮助开发者快速灵活地构建复杂的网页布局。 在《Grid简单入门布局.pptx》中，QuietGRID前端技术研发部分享了关于Grid布局的一些基本概念和操作方法。本文将对该ppt...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值