第三章总结

2301_76596115

已于 2024-03-15 09:34:04 修改

阅读量361

点赞数 4

文章标签：微信小程序微信开放平台前端

于 2024-03-11 11:30:28 首次发布

本文链接：https://blog.csdn.net/2301_76596115/article/details/136618438

版权

本文详细介绍了网页开发中的盒子模型、块级元素与行内元素的区别，以及浮动、定位和flex布局的原理和应用。通过实例展示了如何使用CSS控制元素的布局和对齐方式。

摘要由CSDN通过智能技术生成

1.盒子模型

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

盒子模型结构

对padding、border和margin可以进一步细化为上、下、左和右4个部分

盒子模型元素

图中各元素的含义如下：

width和height 内容和宽度和高度。

Pedding -top、 Padding -rieh. poding -botom 和 padding —left 上内边距、右肉距、底内边距和左内边距。

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

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

2.块级元素和行内元素

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

块级元素

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

代码

行内元素

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

行内块元素

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

块级元素、行内元素和行内块元素代码案例：

<!-- 块元素 -->
<view style="border: 1px solid #f00;">块级元素1</view>
<view style="border: 1px solid #f00;margin:15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #0f0;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>
<!-- 行内元素 -->
<view style="padding: 20px;">
<text style="border: 1px solid#f00;width:200px;height: 80px;">文本1</text>
<text style="border: 1px solid#0f0;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #0ff;display: inline;">块级元素设置为行内元素</view>一行显示不全，会自动换行显示
</view>
<!-- 行内块元素 -->
<view>元素显示的方式的<view style="display: inline-block;border: 1px solid#f00;margin: 10px;padding: 10px;width: 200px;">
块级元素，行内元素和行内块元素</view>三种类型</view>

运行结果：

3.浮动与定位

元素浮动

元素浮动就是设置了浮动属性的元素会脱离标准文档流的控制。

none——默认值，不浮动

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 #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">box2</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="clear: left; border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="height: 22px; 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>

运行结果：

元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。

static——默认值，即没有定位，遵循正常的文档流对象。

relative——相对定位，相对定位元素的定位是相对其正常位置。

absolute——绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素

fixed——固定定位，元素的位置相对于浏览器窗口是固定位置。

对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;">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、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>

运行结果：

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素成为容器，flex布局的所有直接子元素自动成为容器的成员, 称为flex项目(flexitem)。

容器属性

flex容器支持的属性有7种：

display

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

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

flex-direction

flex-direction用于设置主轴的方向,即项目排列的方向：

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

row———主轴为水平方向, 起点在左端, 当元素设置为 flex布局时, 主轴默认为row;

row-reverse———主轴为水平方向, 起点在右端;

column———主轴为垂直方向, 起点在顶端;

column-reverse———主轴为垂直方向, 起点在底端

元素在不同主轴方向下的显示效果：

flex-warp

flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为rownowrap。

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

nowrap——不换行，默认值

wrap——换行，第一行在上方

wrap-reverse——换行，第一行在下方

flex-wrap不同值的显示效果：

flex-flow

flex-flow是flex-direction和flex-wrap的简写形式：

.box{flex-flow:<flex-direction>||<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|flex-end|center|space-between|space-around;}

justify-content———与主轴方向有关, 默认主轴水平对齐, 方向从左到右;

flex-start———左对齐, 默认值;

flex-end———右对齐;

center———居中;

space-between———两端对齐, 项目之间的间隔都相等;

space-around———每个项目两侧的间隔相等。

justify-content不同值的显示效果：

align-items

align-items用于交叉轴的对齐方式，语法格式:

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

align-items———与交叉轴方向有关, 默认交叉由上到下;

flex-start———交叉轴起点对齐;

flex-end———交叉轴终点对齐;

center———交叉轴中线对齐;

baseline———项目根据它们第一行文字的基线对齐;

stretch———如果项目未设置高度或设置为auto, 项目将在交叉轴方向拉伸填充容器, 此为默认值。

index.wxml:

<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>

index.wxss:

.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;
}
.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|stretch}

apace-between——与交叉轴两端对齐, 轴线之间的间隔平均分布;

space-around——每根轴线两侧的间隔都相等, 轴线之间的间隔比轴线与边框间隔大一倍。

其余各属性值的含义与align-items属性的含义相同。

align-content 不同值的显示效果:

项目属性

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

order

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

.item{order:<number>;}

示例代码如下：

index.wxml:

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

index.wxss:

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

运行结果：

flex-grow

定义项目的放大比例, 默认值为０, 即不放大。语法格式如下:

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

示例代码：

index.wxml

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

index.wxss

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

运行代码：

flex-shink

用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。语法格式如下:

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

示例代码：

index.wxml

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

index.wxss

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

运行代码：

flex-basis

属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto，语法格式如下:

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

index.wxml

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

index.wxss

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

运行结果：

flex

属性是flex-grow、flex-shrink 和flex-basis 的简写, 其默认值分别为０、１、auto。语法格式如下:

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

align-self

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

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

在该属性值中, 除了auto以外, 其余属性值和容器align-items的属性值完全一致。 auto表示继承容器align-items的属性, 如果没有父元素, 则等于stretch (默认值)。

2301_76596115

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
第三章总结

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。margin - top、 margin - right、margin： bottom 和margin - left上外边距、右外边、底外边距和左外边距。border -top、border -right、 border -bottom和border -left 上边框、右边框、底过和左边框。行内块元素可以被设置高度、宽度、内边距和外边距。
复制链接

扫一扫