前端面经-CSS篇(五)---布局(1)正常布局(Normal Flow)、display属性、flex布局

目录

一、正常布局流

二、display属性

三、弹性布局(flex布局)

2、常见父项属性

 1、flex-direction控制主轴的方向

2、justify-content:设置主轴上的子元素排列方式

4、align-content:设置侧轴上的子元素的排列方式(多行)

5、align-items:设置侧轴上的子元素排列方式(单行)


一、正常布局流

正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

出现在另一个元素下面的元素被描述为元素,出现在另一个元素旁边被描述为内联元素 

二、display属性

display 决定了元素在布局流中的外在表现,比如它是像段落、块级容器那样独占一行,还是像文字一样内联排布,或者干脆不显示。

常见取值如下:

1、display: block;(块级元素):

         独占一行:一个块级元素会在其前后自动生成换行(与其兄弟块分行),默认情况下它不会与其他元素并排;可设置宽高:能够设置 widthheightmarginpadding 等属性并正常生效;自动宽度:默认宽度会撑满父容器的可用空间(不设置 width 时)。

2、display: inline;(内联元素):

        跟文字一样在同一行内排布:不会独占一行,可以和相邻内联元素、文本混排;宽高不起作用:对内联元素设置 widthheight 通常无效,margin-topmargin-bottom 也无明显影响;只受内容大小影响:它的尺寸由内部文本或子元素内容决定。

 3. display: inline-block; —— 既像内联又像块

        与文字并排:可在一行内与其他内联或 inline-block 元素并列;可设置宽高:跟块级元素一样,可以通过 width, height, margin, padding 等属性来控制尺寸;常用场景:制作导航菜单的水平列表、图文混排中的小块元素、横向排列多个盒子但每个盒子大小可控。

<span style="display: inline-block; width: 100px; height: 50px; background: lightcoral;">
  这是一个 inline-block
</span>
<span style="display: inline-block; width: 80px; height: 50px; background: violet;">
  还能并排
</span>

它们会出现在同一行,但每个小盒子都可以设置自己的宽高,类似“块”的特性。

4. display: none; —— 隐藏 :

        不占据页面空间:元素被完全移除渲染树,好像在 HTML 中不存在一样;visibility: hidden; 的区别visibility: hidden; 仍会占据原位置,只是不可见;display: none; 连占位都没有。常见用途:通过 JS 或 CSS 让某些内容条件性隐藏(如:下拉菜单收起时 display: none;,展开时 display: block;)。

5. 现代布局:display: flex; & display: grid;(下面会详细解释)

随着 CSS3 的发展,FlexboxGrid 成为当前布局的主流选择,它们的行为超出了简单的“块与内联”范畴。

6. 其他常见取值

  1. display: table;

    • 让元素表现得像一个表格容器,可与 display: table-row; table-cell; 搭配模拟表格布局。

  2. display: inline-flex;

    • 类似 flex,但容器本身以内联方式渲染,可在一行中继续与文字或其它元素并排。

  3. display: inline-grid;

    • 同上原理,只是把容器作为网格布局,但容器在父级里仍是内联排布。

、弹性布局(flex布局)

 我们在生活当中也会经常接触到网页使用flex布局,例如:

 Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式,主要表现在:
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器

 当我们父元素有多个盒子的时候,我们知道块级元素是不是都是自占一行,那我们有时候需要将他们按照行和列进行对齐的时候,且按照一定的距离进行对齐,我们虽然可以使用margin进行对齐,但是如果父盒子有100个子盒子呢?这种行为就太无效,因为我们可以利用display:flex将父盒子设成弹性布局,无论里面有多少子盒子,我们只需要在父盒子进行操作就可以将它们按照我们想要的方式进行对齐排列。

我们先来看看flex布局的结构

当开启一个Flex布局的时候,容器中的一个个元素::before::after、文本、dom元素就是项目,这些项目是容器的子元素,他们之间是父子关系,子元素也可以开启自己独立的Flex布局,他不会继承父元素的flex属性。

1、布局原理

采用 Flex布局的元素,称为Flex容器(flex container),简称“容器"。它的所有子元素自动成为容
器成员,称为Flex项目(flexitem),简称“项目"。

注意:当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效

 

默认情况下主轴沿着行的方向分布,侧轴沿着列的方向分布。有一点需要注意,主轴和侧轴的方向并不是固定不变的而是要受到flex-directionwriting-mode或者direction 

了解概念以后我来看flex布局有哪些属性帮助我们进行布局

2、常见父项属性

 1、flex-direction控制主轴的方向

在flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y 轴
默认主轴方向就是x轴方向,水平向右
默认侧轴方向就是y轴方向,水平向下

注意:主轴和侧轴是会变化的,就看flex-direction设置谁为

### IoT硬件开发试经验 对于IoT硬件开发岗位的试,候选人不仅需要掌握基本的电子电路设计原理和嵌入式编程技能,还需要具备处理实际项目中的各种挑战的能力。在准备这类职位的试时,可以从以下几个方着手: #### 1. 基础理论知识 深入理解微控制器的工作机制、传感器接口技术以及无线通信模块的应用是必不可少的基础。例如,在对具体应用场景时如何选择合适的MCU型号及其外设资源分配方案;熟悉SPI/IIC等常见串行总线协议的操作方式。 #### 2. 实际操作能力 除了笔试之外,很多公司还会安排动手实践环节来考察应聘者的实战水平。这可能涉及到PCB板的设计与焊接、编写简单的固件程序实现特定功能或是搭建小型网络节点之间的数据传输链路等内容[^2]。 #### 3. 调试技巧 当遇到设备无法正常工作的情况时,能否快速有效地找到原因至关重要。因此要学会运用逻辑分析仪、示波器之类的工具辅助排查故障点所在位置,并通过调整参数设置或修改代码逻辑解决问题。 #### 4. 安全意识 随着越来越多敏感信息被上传至云端存储空间内,保障整个系统的安全性变得越来越重要。了解TLS/SSL加密算法的作用机理及其与其他主流物联网通讯标准(比如MQTT, CoAP)相结合的方式有助于增强个人竞争力[^3]。 ```c++ // 示例:使用MBED库初始化Wi-Fi连接并发送HTTP请求获取远程服务器时间戳 #include "mbed.h" #include "EthernetInterface.h" int main() { EthernetInterface eth; eth.connect(); TCPSocket socket; SocketAddress addr("time.nist.gov", 80); socket.open(&eth); socket.connect(addr); char send_data[] = "GET / HTTP/1.1\r\nHost: time.nist.gov\r\nConnection: close\r\n\r\n"; socket.send(send_data, strlen(send_data)); char recv_data[100]; int bytes_received = socket.recv(recv_data, sizeof(recv_data)); printf("Received %d bytes from server:\r\n%s", bytes_received, recv_data); socket.close(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值