第三章总结

最新推荐文章于 2024-10-31 15:17:34 发布

@十九810

最新推荐文章于 2024-10-31 15:17:34 发布

阅读量703

点赞数 12

文章标签：微信小程序

本文链接：https://blog.csdn.net/2302_78582801/article/details/136717901

版权

文章详细介绍了HTML/CSS中的盒子模型构成，块级与行内元素的区别，浮动与定位的使用方法，以及flex布局的容器和项目属性。通过实例展示了这些概念在网页设计中的应用。

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

3.1 盒子模型

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

一个盒子实际所占有的宽度（高度）应该由“内容”+“内边距”+“边框”+“外边距”组成。

3.2 块级元素与行内元素

3.2.1 块级元素

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

示例代码如下：

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

运行效果如下：

3.2.2 行内元素

3.2.3 行内块元素

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

3.3 浮动与定位

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父级元素中指定位置的过程。在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>
<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>
<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>
<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>

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

3.3.2 元素定位

通过position属性可以实现对页面元素的精准定位，基本格式：

{position: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进行元素相对定位，示例代码如下：

<!--box2 元素相对定位relative top:30px left:30px-->
<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进行元素绝对定位，示例代码如下：

<!--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;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进行元素固定定位，示例代码如下：

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

3.4 flex布局

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

3.4.1 容器属性

flex容器支持的属性有7种，如表3-1所示。

表3-1 flex容器支持的属性

1.dispaly 语法格式：
.box{display:flex |inline-flex;}
2.flex-direction
.box{ flex-direction:row|row-reverse |column-reverse;}
row -reverse——主轴为水平方向，起点在右端；
column——主轴为垂直方向，起点在顶端；
column——reverse——主轴为垂直方向，起点在底端。

3.flex-wrap

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

nowrap——不换行，默认值；

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

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

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

4.flex-flow
.box{ flex-flow:<flex-direction>||<flex-wrap>;}
5. 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——每个项目两侧的间隔相等。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_74543354/article/details/136657226

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

示例代码：

//.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>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}bg
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 120px;
}

7.align—content
.box{ align - content:flex-start |flex-end | center |space - between |space - around |stretch}
align - content不同值的显示效果。

3.4.2 项目属性

1.order 语法格式：
.tem{ order: <number >;}
2.flex-grow
.item{ flex - grow: <number>;}
3.flex-shrink
.item{ flex-shrink: <number>;}
4.flex-basis
.item{ flex-basis:<number> |auto;}
5.flex
.item{flex:<flex-grow> | <flex-shrink> | <flex-basis>;}

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