小程序开发之【前端开发】【学习第三节】【一】

本文链接：https://blog.csdn.net/mystery_guest/article/details/83794216

这一节就是学布局了。

盒子模型是CSS布局的基础，CSS假定每个元素都会生成一个或多个矩形框，每个元素框中心都有内容框content，内边距padding，边框border和外边距margin，这些默认为0.盒子模型根据浏览器具体实现可分为W3C标准盒子模型和IE盒子模型，这两种盒子模型在宽度和高度的计算不一致，WXSS完全遵守W3C盒子模型规范。

元素按照显示方式分为块级元素和行内元素。我们可以通过display设置属性为block，将一个元素强制设置为块级元素，设置属性inline，将一个元素强制设置为行内元素。

块级元素举例

<!-- 每个块级元素占一行-->
<view style="border:solid 1px;">第一个块级元素</view>
<!-- 默认情况下块级元素的元素框和父级元素的width相同，刚好撑满内容区-->
<view style="border:solid 10px;margin:10px;padding:10px;">第二个块级元素</view>
<!--即使宽度不足，仍会占领一行-->
<view style="border:solid 1px;width:200px;">第二个块级元素</view>其他信息
<!-- 父级元素高度随内容决定 内容为块级元素-->
<view style="margin-top:10px;border:solid 1px;">
<view style="height:100px;">块级元素</view>
</view>
<!--父级元素高度随内容决定 内容为文本流-->
<view style="margin-top:10px;border:solid 1px;">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

结果图

行内元素,，盒子模型中的高度，宽度，上下margin，上下padding设置均无效，只能设置左右margin和padding。

行内元素举例

<!--通过修改display属性的行内元素-->
前面的文字<view style="border:solid 1px;display:inline;margin:10px;padding:0 10px;">元素元素元素元素元素元素元素元素元素</view>后面的文字

行内块元素

行内块元素是行内元素和块级元素的混合，当display设置为inline-block时，元素就被设置为了一个行内块元素，行内块元素可以设置宽，高，内边距和外边距，可以简单认为行内块元素就是把块级元素以行的形式展现，保留了块级元素对宽，高，内边距，外边距的设置，就是一张图放在文本行中。

<!-- 行内块元素撑满父级宽度情况-->
前面的文字<view style="border:solid 1px;margin:10px;padding:10px;display:inline-block;">行内块元素行内块元素行内块元素行内块元素</view>后面的文字
<!-- 行内块元素宽度不足父级宽度情况-->
前面的文字<view style="border:solid 1px;margin:10px;padding:10px;display:inline-block;">行内块元素</view>后面的文字

浮动和定位以及Flex布局三种布局方案

浮动

<!-- 添加高度为0的元素清除浮动-->
<view style="border:solid 1px;">
<view>其他元素</view>
<view style="float:right;">浮动框</view>
<view style="clear:both;height:0;"></view>
</view>
<!-- 利用伪属性在后面插入一个元素清除浮动-->
<view style="border:solid 1px;margin-top:10px;" class="clearfix">
<view>其他元素</view>
<view style="float:left">浮动框</view>
</view>
<!--不清除浮动-->
<view style="border:solid 1px;margin-top:10px;">
<view>其他元素</view>
<view style="float:right;">浮动框</view>
</view>
.clearfix:after{
display:block;
height:0;
clear:both;
content:''
}

定位

<!-- 相对之前位置进行移动，原占有空间不会被关闭-->
<view style="border:solid 1px;">
文本文本<text style="position:relative;top:10px;left:10px;">relative</text>文本文本文本文本文本文本文本
</view>
<!--absolute依赖于包含块，原占有空间会被关闭-->
<view style="border:solid 1px;position:relative;height:80px;">
文本文本<text style="position:absolute;bottom:10px;left:10px;">absolute</text>文本文本文本文本文本文本文本
</view>
<!--没有找到最近的absolute或relative元素会直接认为根元素是包含块，原占有空间被关闭-->
<view style="border:solid 1px;">
文本文本<text style="position:absolute;bottom:10px;left:10px;">absolute不设置包含块</text>文本文本文本文本文本文本文本
</view>
<!--fixed直接认为视窗本身为包含块，原占有空间关闭-->
<view style="border:solid 1px;">
文本文本<text style="position:fixed;bottom:10px;right:10px;border:solid 1px;">fixed</text>文本文本文本文本文本文本文本
</view>

flex布局