第三章页面布局总结

已于 2024-03-15 11:49:30 修改
阅读量2k 收藏 51
点赞数 46
文章标签： 微信小程序
于 2024-03-15 11:41:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ikun666686/article/details/136633009
版权

目录

一.盒子模型

 二.块级元素与行内元素

1.块级元素

​ 2.行内元素

​3.行内块元素

三.浮动与定位 

1.元素浮动与清除

​2.元素定位

四.flex布局

 1.容器属性

(1)display

(2)flex-direction

(3)flex-wrap

(4)flex-flow

(5)justify-content

(6).align-items

(7).align-content 

 2.项目属性

(1)order

(2)flex-grow

(3)flex-shrink

(4)flex-basis

(5) flex

(6)align-self

一.盒子模型

  微信小程序的视图层由WXML和WXSS 组成。其中，WXSS(WeiXin Style sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WNML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
  在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。
  盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border )和外边距(margin)4个部分组成，如图所示。 


  此外，对 padding、border 和 margin 可以进一步细化为上、下、左、右4个部分，在 CSS中可以分别进行设置，如图所示。

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

 二.块级元素与行内元素

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

1.块级元素

  块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:                                                  (1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。
<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下：

在zlfw5.wxml中输入以下代码：

<!--pages/zlfw5/zlfw5.wxml-->
<text>pages/zlfw5/zlfw5.wxml</text>
<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>

 代码输出结果如下：

 2.行内元素

  行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的 display 属性设置为inline 后，该元素即被设置为行内元素。行内元素的特点如下:
  (1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定 。                                                    (2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素。                                                  (3)同一块内，行内元素和其他行内元素显示在同一行。                                                                   <text/>组件默认为行内元素，使用<view/>及<text/>组件演盒子模型及行内元的示例代码如下:

 在zlfw6.wxml中输入以下代码：

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

 代码输出结果如下：

3.行内块元素

  当元素的displey属性被设置为inline-block时，元素被设置为行内块元素。行可以被设置高度、宽度、内边距和外边距。示例代码如下:

在zlfw7.wxml中输入以下代码： 

<!--pages/zlfw7/zlfw7.wxml-->
<text>pages/zlfw7/zlfw7.wxml</text>
<view>
元素显示方式的
<view style="display:inline-block;border:1px solid #f00;margin:10px;padding:10px;width:200px;">块级元素，行内元素和行内块元素</view>
</view>

 代码输出结果如下： 

三.浮动与定位 

1.元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在css中，通过float属性来定义浮动，其基本格式如下：

{float:none|left|right;}

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

left——元素向左移动； 

right——元素向右移动； 

在以下实例代码下，分别对box1，box2,box3元素左浮动：

 在zlfw8.wxml中输入以下代码： 

<!--pages/zlfw8/zlfw8.wxml-->
<text>pages/zlfw8/zlfw8.wxml</text>
<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>

 代码输出结果如下： 

  通过案例我们发现，当box3 左浮动后，父元素的边框未能包裹box3 元素。这时，可以通过清除浮动来解决。
  由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响在CSS中，clear 属性用于清除浮动元素对其他元素的影响，其基本格式如下:

{clear:left|right|both|none}

  其中，left——清除左边浮动的影响，也就是不允许左侧有浮动元素;
             right——清除右边浮动的影响，也就是不允许右侧有浮动元素；                                                       both——同时清除左右两侧浮动的影响;
             none——不清除浮动。
 在zlfw9.wxml中输入以下代码：

<!--pages/zlfw9/zlfw9.wxml-->
<text>pages/zlfw9/zlfw9.wxml</text>
<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>

  代码输出结果如下：

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

在zlfw9.wxml中输入以下代码：

<!--pages/zlfw9/zlfw9.wxml-->
<text>pages/zlfw9/zlfw9.wxml</text>
<view>box1 box2 box3左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px" class="clearfloat">
<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>

 在zlfw9.wxss中输入以下代码： 

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

 代码输出结果如下： 

 2.元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过pasitom属性可以实现对页面元素的精确定位。基本格式如下:

{position:static|relative|absolute|fixed}

 其中，static——默认值，该元素按照标准流进行布局;
  relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
  absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
  fixed——固定定位，相对于浏览器窗口进行定位。
对box1、box2、box3进行元素静态定位，示例代码如下:

<!--pages/zlfw9/zlfw9.wxml-->
<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进行元素相对定位，示例代码如下:

<!--pages/zlfw9/zlfw9.wxml-->
<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进行元素绝对定位，示例代码如下: 

<!--pages/zlfw9/zlfw9.wxml-->
<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进行元素固定定位，示例代码如下: 

<!--pages/zlfw9/zlfw9.wxml-->
<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>

  代码输出结果如下：

  通过案例我们发现，图(e)(绝对定位)和图(d)(固定定位)的效果相同。这是因为它们的父元素是page，没有定位。

  如果将 box1、box2、box3 的父元素采用相对定位，将 box2 采用绝对定位，代码如下:

<!--pages/zlfw9/zlfw9.wxml-->
<view style="position: relative;top: 50px;left: 50px;border: 1px;">
<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>

   代码输出结果如下：

  如果将 box1、box2、box3 的父元素采用相对定位，将 box2 采用固定定位，代码如下：

<!--pages/zlfw9/zlfw9.wxml-->
<view style="position: relative;top: 50px;left: 50px;border: 1px;">
<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 container)，flex布局的所有直接子元素自动成为容器的成员，称为flex项目(flex item)。

  容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flex布局模型如图所示：

 1.容器属性

flex容器支持的属性有7种，如下表所示：

(1)display

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

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

其属性值解析如下：

flex——块级flex布局，该元素变为弹性盒子;
inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex 布局规范。
设置了 flex 布局之后，子元素的float、clear和 vertical-align 属性将失效。

(2)flex-direction

flex-direction用于设置主轴的方向，即项目排列的方向，语法格式为:

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

 其属性值解析如下：

row——主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row;
row-reverse——主轴为水平方向，起点在右端;
column——主轴为垂直方向，起点在顶端;
column-reverse——主轴为垂直方向，起点在底端。
如下图所示为元素在不同主轴方向下的显示效果。

(3)flex-wrap

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下: 

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

其属性值解析如下：

nowrap——不换行，默认值；
wrap——换行，第一行在上方；
wrap-reverse——换行，第一行在下方。
注意： 当设置换行时，还需要设置 align-item属性来配合自动换行，但align-item的值不能为“ stretch”。

flex-wrap不同值的显示效果如下图所示：

(4)flex-flow

 flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为row nowrap。 语法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}
(5)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不同值的显示效果。

(6).align-items

 align-items用于指定项目在交叉轴上的对齐方式, 语法格式如下:

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

其属性值解析如下：

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

 示例如下，在.wxml中输入以下代码：

<!--pages/zlfw9/zlfw9.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中输入以下代码：

/* pages/zlfw9/zlfw9.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;
}

  代码输出结果如下：


(7).align-content 

align-content 用来定义项目有多根轴线(出现换行后) 在交叉轴上的对齐方式, 如果只有一根轴线, 该属性不起作用。 语法格式如下:

.box{align-content;flex-start|flex-end|center|space-between|space-around|stretch}

其属性值解析如下：

space-between——与交叉轴两端对齐, 轴线之间的间隔平均分布;
space-around——每根轴线两侧的间隔都相等, 轴线之间的间隔比轴线与边框间隔大一倍。          其余各属性值的含义与align-items属性的含义相同。

如下图所示为align-content不同值的显示效果。

 2.项目属性

容器内的项目支持6个属性，其名称和功能如下图所示。

 

(1)order

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

.item{order:<number>;}

 示例代码如下：

<!--pages/zlfw9/zlfw9.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>

  代码输出结果如下：  

(2)flex-grow

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

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

 示例代码如下：

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

  代码输出结果如下： 

(3)flex-shrink

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

{flex-shrink:<number>;}

示例代码如下： 

<!--pages/zlfw9/zlfw9.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>

  代码输出结果如下： ​​​​​​​

(4)flex-basis

flex-basis属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto (即项目的本来大小)。 语法格式如下: 

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

示例代码如下： 

<!--pages/zlfw9/zlfw9.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>

  代码输出结果如下：   

(5) flex

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

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

示例代码如下： 

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

(6)align-self

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

{aligin-self:auto|flex-start|flex-end|center|baseline|stretch;}
再等等丶
关注
  • 46
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第1章初识网站和网页.ppt
11-12
【第1章初识网站和网页】 在互联网的世界里，网站和网页是构成网络内容的基础。网站是由一组相关的网页集合而成，这些网页通过超链接相互连接，形成一个整体的在线存在。网页是网站的基本组成部分，它们是用户在...
HTML5+CSS3网页设计基础-第七章-网页布局设计.pptx
12-23
HTML5+CSS3网页设计基础第七章主要讲解的是网页布局设计。随着Web标准的发展，传统的表格布局已经被DV+CSS布局方式取代，HTML5更是引入了新的结构布局标签，以简化和优化网页的设计与布局。 本章的目标是让学生理解...
第三章 页面布局 总结
weixin_74842199的博客
03-13 1080
微信小程序的视图层由WXML和WXSS组成。其中，WXSS (WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述 WXMI的组成样式，决定 WXMI的组件如何显示。WXSS 具有CSS 的大部分特性。在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。盒子模型就是我们在页面设计中经常用到的一种思维模型。
第三章 页面布局总结
最新发布
weixin_75233848的博客
03-15 1567
flex 布局模型如图所示。行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。flex 布局主要由容器和项目组成, 采用flex 布局的元素称为flex容器(flexcontainer),flex 布局的所有直接子元素自动成为容器的成员, 称为flex项目(flexitem)。属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto (即项目的本来大小)。
微信小程序第三章页面布局总结
skajdjx的博客
03-15 775
盒子模型就是我们在页面设计中经常用得到的一种思维。在css中，一个独立的盒子模型由内容、内边距、边框、外边距4个部分组成。块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。特点:(1)一个块级元素占一行 (2)块级元素的默认高度由内容决定，除非自定义高度。 (3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。 (5)块级元素可以容纳块级元素和行内元素。行内元素，不
第三章：小程序页面布局总结
m0_73769384的博客
03-11 410
c、块级元素的默认宽度是父级元素的内容区域宽度，除非自定义宽度。b、行内不能放置快元素，只级容纳文本和行内其他元素。c、同一块内，里面的所有行内元素全部显示在一行。b、块级默认高度由内容决定，除非自定义高度。a、不能设置行高宽，其高宽由内容决定。d、块级元素可自定义宽高边距。e、可容纳块级和行内元素。
第三章-页面布局总结
weixin_74181869的博客
03-15 1773
微信小程序的视图层由WXML和WXSS组成。其中，WXSS（WeiXin Style Sheets）基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。盒子模型就是我们在页面设计中经常用到的一种思维模型。
第三章小程序（页面布局）总结
m0_74842191的博客
03-11 531
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。（既有行内元素也有块级元素）块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。内容(content)、内边距(padding)、边框(border)和外边距(margin )4个部分组成，中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。
第三章总结 ：页面布局 盒子模型
2201_75833379的博客
03-14 727
小程序中的盒子模型是**用于布局和定位元素的基础模型，它包括内容、内边距、边框和外边距四个部分**。具体来说，盒子模型的各个部分包括：1. **内容（Content）**：这是盒子的核心部分，显示文本、图片等实际内容。内容区域的尺寸可以通过设置宽度（width）和高度（height）来定义。2. **内边距（Padding）**：是指内容与边框之间的透明区域。可以通过WXSS的padding属性来设置内边距的大小。3. **边框（Border）**：包围在内容和内边距之外的线型区域。
第三章总结 页面布局
2302_82254745的博客
03-15 843
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)当元素的display 属性被设置为inline-block时，元素被设置为行内块元素。
第三章--页面布局总结
2301_78001135的博客
03-15 881
盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容，内边距，边框，外边距，这个四个组成padding-top,padding-right,padding-bottom,padding-left:上内边距，右内边距，低内边距，作内边距border-top,border-right,border-bottom,border-left:上边框，右边框，低边框，左边框。
Dreamwaver网页设计第3章.pptx
04-12
在本章中，我们将深入探讨Dreamweaver网页设计的第三章内容，主要涵盖网页的基本操作，包括初识Dreamweaver、制作文字与图像混排的页面、表格的应用、制作多媒体页面以及创建超链接。 首先，让我们来【初识...
第五章使用框架布局网页PPT学习教案.pptx
10-10
标题中的“第五章使用框架布局网页PPT学习教案”指的是网页设计中的一种技术，即使用HTML框架（Frames）来组织和展示网页内容。框架可以使网页分成多个独立的区域，每个区域可以显示不同的网页内容，从而实现更灵活...
第三章：登陆界面开发总结
03-26
在本章中，我们将深入探讨“第三章：登陆界面开发总结”，主要关注如何设计和实现一个功能完善的登录界面。这个主题对于任何Web或桌面应用程序来说都是至关重要的，因为它是用户与系统交互的第一步。我们将从Java...
HTML 第七章 CSS + DIV实现局部布局
03-22
本章节我们将深入探讨如何利用CSS+DIV技术来实现网页的局部布局，以达到灵活控制网页元素的目的。在这个过程中，我们将关注两个关键的资源：顶部导航主菜单的图片和购物版块的图片，这些图片可以增强页面的视觉吸引...
第16章 CSS边框与边界.pdf
08-04
在网页布局中，`margin: 0;` 经常用于清除元素的默认外边距，实现顶格对齐。 总结，CSS的边框与边界属性对于网页设计至关重要，它们帮助我们创建美观且布局精确的页面。通过调整边框的样式、颜色和宽度，以及边界的...
网页设计与制作课件第3章.pptx
05-31
总结来说，这个课件的重点在于教导学生如何使用Dreamweaver设置网页的元信息，包括关键字和说明，以及如何进行基本的页面属性设置，如标题和编码。这些基础技能对于任何网页设计师来说都是至关重要的，因为它们直接...
第3章 常规选择器
12-02
### 第3章 常规选择器：深入解析与应用 #### 一、简单选择器：基础中的精华 在Web开发领域，特别是前端设计中，选择器扮演着至关重要的角色，它们是连接HTML文档结构与样式及交互逻辑的桥梁。jQuery，作为一款流行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值