第三章总结

已于 2024-03-15 09:13:26 修改
阅读量542 收藏 28
点赞数 23
文章标签： css 前端
于 2024-03-14 20:55:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A00833/article/details/136616317
版权

1.盒子模型

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

块级元素

1.一个块级元素占一行。

2.块级元素可自定义高度、宽度、外边距、内边距。

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

4.<view/ >组件默认为块级元素，使用<view/ >组件演示盒子模型及会计元素。

代码如下

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

运行结果如下

                                            行内元素

1.行内元素不能随意设置高度和宽度，由内容决定高度宽度。
2.行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
3.同一块内，行内元素和其他行内元素显示在同一行。
4.<text/>组件默认为行内元素，使用<view/>和<text/>组件演示盒子模型及内行元素。

代码如下：

<view style="padding: 20px;"></view>
     <text style="border: 1px solid #f00;">文本1</text>
     <text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
     <text style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全，自动换行显示

运行结果如下：

                                       行内块元素

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

代码如下：

<view>
元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素和行内块元素
</view>三种类型。
</view>

运行结果如下：

                                      浮动与定位

1.元素浮动与清除

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

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

left-元素向左移动；

right-元素向右移动。

代码如下：

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

运行结果如下：

2.清除浮动

由于浮动元素不再占用原文档流的位置，因此它对页面中其他元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其他的影响。

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.添加一个元素

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

代码如下：

<view>box1 box2 box3 左浮动 在父元素后添加一个空元素 </view>
<view style="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>
//wxss
.clearfloat::after{display:block;clear:both;height:0;content:""}

运行结果如下：

                                           元素定位

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

static-默认值，

relative-相对定位，

absolute-绝对定位，

fixed-固定定位。

静态定位，代码如下：
<!--三个元素均为定位 static-->
<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>

运行结果如下：

相对定位，代码如下：
<!--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>

运行结果如下：

绝对定位，代码如下：
<!--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>

运行结果如下：

固定定位，代码如下：
<!--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>

运行结果如下：

box2采用绝对定位，代码如下：
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #0f0;">
  <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>

运行结果如下：

box2采用固定定位，代码如下：
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #0f0;">
  <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是万维网联盟，改布局可以简单快速地完成各种可以伸缩的设计，以便很好的支持响应式布局。

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

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

                                                             flex容器支持的属性：

display用来指定元素是否为flex布局。

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

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行。

flex-flow是flex-direction和flex-warp的简写形式，默认之为row nowrap。

justify-content用于定义项目在主轴上的对齐方式。

align-itmes用于指定项目在交叉轴上的对齐方式。代码如下：

<view class="contl">
      <view class="item">1</view>
      <view class="item item2">2</view>
      <view class="item item2">3</view>
      <view class="item item2">4</view>
</view>


.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用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，乳沟只有一根轴线，该属性不起作用。

                                                                   项目属性

order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。代码如下：

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

运行结果如下：

flex-grow定义项目的放大比例，默认值为0，即不放大。代码如下：

<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用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小。代码如下：

<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属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为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-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。代码如下：

.item{flex:auto;}//等价于.item{flex:1 1 auto;}
.item{flex:none;}//等价于.item{flex:0 0 aoto;}

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

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

在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。

auto表示继承容器align-items的属性，如果没有父元素，则等于stretch（默认值）

Sooyaaa-
关注
  • 23
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
计算机网络第三章总结_计网第三章_
10-03
计算机网络第三章内容总结，转发请标明出处
计算机网络第三章知识总结.docx
09-11
计算机网络的第三章主要聚焦在数据链路层，这一层是网络通信的基层，负责物理层之上的数据传输。在这一章中，我们探讨了两种主要的信道类型：点对点信道和广播信道。 点对点信道是一种一对一的通信方式，通常用于两...
《python数据分析与挖掘实战》第三章总结.docx
05-23
《Python数据分析与挖掘实战》第三章主要探讨了数据探索这一重要环节，它是数据分析流程的关键步骤，旨在理解数据集的质量、特征以及潜在模式。本章详细介绍了数据质量分析、异常值分析、一致性分析以及数据特征分析...
半导体材料：半材第7章总结.doc
11-26
【半导体材料：半材第7章总结】 本章主要探讨了III-V族化合物半导体的外延生长技术，其中重点介绍了几种关键的生长方法，包括金属有机物气相外延生长(MOVPE)、分子束外延生长(MBE)、化学束外延生长(CBE)以及原子层...
信号与系统第三章傅里叶变换总结信号三.docx
04-21
欢迎大家一起学习，不喜勿喷
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 338
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 328
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
oThrowsException的博客
07-24 600
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 738
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 274
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
css上下动画 和淡化
ssorth的博客
07-24 341
上下动画
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1180
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
CSS的常见难见
weixin_62432037的博客
07-24 990
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
CSS（四）——CSS Text(文本）
最新发布
m0_62701594的博客
07-24 980
颜色属性被用来设置文字的颜色。
Vue 3 + Vite 项目中安装 Tailwind CSS
lq099526的专栏
07-22 376
安装 Tailwind CSS步骤，失效，样式不加载
CSS 中border-radius 属性
HWL5679的博客
07-20 491
虽然border-radius不能直接接受八个值作为其属性的一部分，但通过使用斜杠分隔的水平和垂直半径，可以为每个角提供两个值（总共八个值，但按对分组），以实现更复杂的圆角效果。
【CSS】CSS3 新特性
小秀的博客
07-24 307
CSS Grid Layout 是一种二维布局系统，允许你在水平和垂直方向上创建复杂的布局。Flexbox 提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。CSS3 动画允许你创建复杂的动画效果，而无需使用 JavaScript。CSS3 增强了媒体查询的能力，允许你根据多种设备特性来应用样式。CSS3 过渡效果允许你平滑地在两个属性值之间进行动画过渡。CSS3 引入了更多的选择器，如属性选择器、伪类选择器等。：允许你根据元素的属性或属性值来选择元素。属性允许在元素上添加阴影效果。
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
weixin_43811753的博客
07-24 160
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
Web响应式设计———1、Grid布局
Violetto_Yan的博客
07-21 336
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
Matlab编程：第三章-分支语句与设计
"Matlab教学资料，主要涵盖了第三章的内容，包括分支语句和编程设计。文档详细讲解了如何在MATLAB中实现控制流程，如条件判断和逻辑运算，以及图形绘制的高级技巧。" 在MATLAB编程中，第三章的重点是分支语句和编程...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值