第三章总结

最新推荐文章于 2024-10-04 00:46:18 发布

候卿1226

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量1.4k

点赞数 46

文章标签：前端 html

本文链接：https://blog.csdn.net/L5081226/article/details/136641567

版权

页面布局

1.盒子模型

4个部分；内容（content），内边距（padding），外边距（margin），边框（border）

2.块级元素与行内元素

块级元素；

特点：一个块级元素站一行

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

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

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

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

行内元素

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

行内元素内不能放块级元素，只能容纳文本或其他行内元素

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

行内块元素

特点;可以设置高度宽度，外边距，内边距

运行代码


<view style="border: 1px solid #fff">块级元素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>


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

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

运行结果

3.浮动与定位

元素浮动与清除

浮动；{float:none | left | right }浮动基本格式

none；默认值，表示元素不动

left：元素向左浮动

right；元素向右浮动

清除；{clear :none | left | right | both}清除基本格式

none；不清除浮动

left：清除左浮动

right；清除右浮动

both；同时清除左右浮动

元素定位

{ position :static ;relative;absoute ;fixed}基本格式

static；标准流布局

relative；相对定位

absoute；绝对定位

fixed；固定定位

运行代码

浮动代码

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

<view> box1 box2 左浮动box3清除左浮动</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="clear: left;border: 1px solid #0f0;">box3</view>


<view> box1 box2 box3左浮动，在父元素后添加一个空元素</view>
<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>

元素定位代码


<!--3个没有定位-->
<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>

<!--3个相对定位-->
<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>

<!--3个绝对定位-->
<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>

<!--3个固定定位-->
<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>


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

运行效果图

浮动效果图

元素定位效果图

4.flex布局

主要由容器和项目组成；

容器默认存在两根轴；水平的主轴（main axis）垂直的交叉轴（croaa axis）主轴的开始位置叫（main start）结束位置叫（main end）；交叉轴的开始位置叫（cross start）结束位置叫（cross end）

容器属性

display

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

flex-direction

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

效果图

flex-wrap

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

效果图

flex-flow

.box{flex-flow:<flex-direction>||<flex-worp>;}

justify-content

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

align-items

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

align-content

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

项目属性

order

.item{order:<number>;}


<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" >8</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" >8</view>
</view>

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

flex-grow

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