css多种布局方式

css多种布局方式

  • 简介
  • 标准流布局(主要依赖margin\padding)
  • 浮动布局(float)
  • 定位布局(position)
  • 弹性布局(flex)
  • 网格布局(grid)
  • 多列布局(column)
  • 响应式布局(百分比、vw、rem、em、calc等)
  • 参考

简介

常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等,我会从文档流,容器,效果这些角度介绍

文章引导
1. 标准流布局
2. 浮动布局
3. 定位布局
4. 弹性布局
5. 网格布局
6. 多列布局
7. 响应式布局

标准流布局(主要依赖margin\padding)

“标准文档流”简称为“标准流”,默认按照文档的顺序从上到下,从左到右,遇块(块级元素)换行。

  • 块级元素block,独占一行可以设置宽高,适用于垂直布局;
  • 行内元素inline,与其他元素共享一行,不可以设置宽高,宽度由内容决定,适用于水平布局;(注:img是一个特殊的行内元素可设置宽高)
  • 标准流的定位离不开两个属性margin & padding ,margin 影响相邻元素之间的距离,padding 影响边框和内容之间的空白区域;
  • text-align 设置文本对齐方式,line-height 是行内元素用来调整行间距的,都可继承;(注:在一些安卓手机 line-height 会失效)

浮动布局(float)

float 浮动布局, 默认 none 关闭浮动,取 left/right 该元素就会向其容器元素的左/右边框平移,当碰到另外一个浮动的元素时停止平移,超出容器会自动换行,不可以继承。
1. 理解浮动
float存在多层结构布局里(见图1),可以理解为在原来页面上面多了一层放浮动的元素,但float只能左右移动不能上下移动。

  • 脱离文档流,浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去,块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素;
  • 行内元素不填充空位,有空隙就会插入;
  • 不脱离文本流/不遮挡文本,有文字环绕效果(见图2);

图1-层叠上下文
图2-浮动与非浮动元素相邻
2. 高度塌陷(清除浮动)
浮动的子元素是无法自动撑开父级元素的,我们此时则称这种状态为高度塌陷,也是浮动的副作用,因此我们需要清除浮动,清除浮动可以查看链接: css清除浮动的几种办法

  • 方法1:给父盒子添加高度
  • 方法2:父盒子添加overflow: hidden
  • 方法3:父盒子添加overflow: auto
  • 方法4:额外标签法
  • 方法5:使用after伪元素清除浮动(推荐)
  • 方法6:使用双伪元素清除浮动(推荐)
  • 方法7:父级同时浮动
  • 方法8:父级设置成inline-block
  • 方法9:br标签清除浮动
  • 方法10:父级div定义display:table

定位布局(position)

position 定位布局,有5个值,通过四个方向 top,right,bottom 和 left 决定元素位置。

在这里插入图片描述

弹性布局(flex)

Flex 是 Flexible Box 的缩写,意为"弹性布局",由容器和项目组成,容器为父元素,项目为容器成员这里是子元素。容器有两个轴线:主轴和交叉轴呈90度关系。容器通过容器属性控制项目在两个轴线之间的排列,项目通过项目属性控制自身顺序和大小。给父元素设置 display:flex 变成弹性盒子容器。

  • 容器属性
    在这里插入图片描述
  • 项目属性
    在这里插入图片描述
    具体弹性盒使用,可参考链接: CSS弹性盒总结

网格布局(grid)

Grid 网格布局,提供了带有行和列的基于网格的布局系统(类似二维坐标轴)。由容器和项目组成,容器是父元素,项目只能是容器的顶层子元素(和父元素紧挨的那层子元素)。容器根据列和行分成均匀网格,然后通过控制行,列,间隙设置网格大小,项目通过每个网格编号设置位置和大小。给父元素设置 display:grid / inline-grid 变成网格容器

  • 容器属性
    在这里插入图片描述
  • 项目属性
    在这里插入图片描述

多列布局(column)

column 多列布局,指的就是您可以将文本内容分成多块,然后让这些块并列显示,类似于报纸、杂志那样的排版形式。

  • 属性

在这里插入图片描述

  • 列样式column-rule-style
    在这里插入图片描述

响应式布局(百分比、vw、rem、em、calc等)

响应式布局(Responsive design),网页可以适应不同设备。
具体可通过百分比、vw、rem等单位替代px来实现大小自适应

参考

https://blog.csdn.net/qq_45406325/article/details/107732094

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/12111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

05-13 周一 量化是什么

05-13 周一 量化是什么 时间版本修改人描述2024年5月13日11:27:25V0.1宋全恒新建文档2024年5月14日16:21:20V1.0宋全恒了解 简介 神经网络在运行时有较高的计算成本,而且随着大模型时代的到来,知识由一个巨大的LLM存储,为了获取知识&#xf…

函数1111

DDL CREATE TABLE student (id INT PRIMARY KEY AUTO_INCREMENT,createDate DATETIME NOT NULL,userName VARCHAR(255) NOT NULL,phone VARCHAR(20) NOT NULL,age INT NOT NULL,sex ENUM(男, 女) NOT NULL,introduce TEXT ); DML INSERT INTO student (creatDate, userName,…

android webview加载页面失败事件的处理,包括http异常的情况

网上查到的方法是如下这样的,这种方法对于服务器可以访问,但是发生40x错误时是无效的。 webView.setWebViewClient(new WebViewClient() {Overridepublic void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {su…

[力扣题解]452. 用最少数量的箭引爆气球

题目:452. 用最少数量的箭引爆气球 思路 贪心法 希望尽可能射爆叠在一起的气球; 以气球的左边界进行升序排序,再从左到右遍历,遇到有重叠的气球,则让当前气球的有边界与上一个气球的右边界对齐(min操作&a…

web入门练手案例(一)

下面是一下web入门案例和实现的代码,带有部分注释,倘若代码中有任何问题或疑问,欢迎留言交流~ 新闻页面 案例描述: 互联网的发展使信息的传递变得方便、快捷,浏览新闻称为用户获取信息的重要渠道。下面将实现一个简…

原子学习笔记3——点亮 LED

一、应用层操控设备的两种方式 应用层如何操控底层硬件,同样也是通过文件 I/O 的方式来实现,设备文件便是各种硬件设备向应用层提供的一个接口,应用层通过对设备文件的 I/O 操作来操控硬件设备,譬如 LCD 显示屏、串口、按键、摄像…

论文阅读:Self-Consistency Improves Chain of Thought Reasoning in Language Models

思维链 prompt 与预训练的大型语言模型相结合,在复杂的推理任务上取得了令人鼓舞的结果。在本文中,作者提出了一种新的解码策略,即自我一致性(self-consistency),以取代思维链 prompt 中使用的 naive 贪婪解…

25. K 个一组翻转链表 - 力扣(LeetCode)

基础知识要求: Java:方法、while循环、for循环、if else语句 Python: 方法、while循环、for循环、if else语句 题目: 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个…

x264 帧类型代价计算原理:slicetype_slice_cost 函数分析

x264 x264 是一个开源的视频编码库,它实现了H.264/AVC标准。H.264是一种广泛使用的压缩标准,用于视频流、视频下载、蓝光光盘以及许多其他形式的数字视频分发。x264 以其高压缩效率和良好的视频质量而著称,是许多视频编辑软件和视频播放器的默认编解码器。 以下是关于 x26…

随易周刊第006期 - 云梦秦简

📢 随易周刊介绍 这是一个由 前端之虎陈随易 维护的周刊,将会分享笔者一周内的所见所闻。 写一篇周刊 搜集整理发布 需要数天,请尊重笔者的成果,可任意转载,但不要篡改内容。 如果你觉得周刊不错,可以给…

未来互联网:Web3的技术革新之路

引言 随着技术的不断发展和社会的日益数字化,互联网作为信息交流和社交媒介的重要平台已经成为我们生活中不可或缺的一部分。然而,传统的互联网架构在数据安全、隐私保护和去中心化等方面存在着诸多挑战。为了解决这些问题,Web3技术应运而生…

做抖店不能踩的几个坑,新手要照做,老玩家要听劝~

我是王路飞。 很多人都说抖店的运营很简单,选选品、对接一下达人,就可以坐等店铺出单了。 这话骗骗还没开店的小白也就得了,但凡做抖店超过一个月的,都不会相信这句话。 细心耐心是做抖店最基本的态度。 拿到一个好结果的前提…

nginx反向代理使用(详细版)

1. 下载nginx,解压;(随便放在哪里) 2. 在nginx-1.26.0文件夹下创建web文件夹,继续在web文件夹下创建abcd.test.cn文件夹(文件夹的名字就叫abcd.test.cn); 3. 配置前端代理&#xff…

Self-attention自注意力机制

Self-attention 和 CNN(卷积神经网络)是深度学习中常用的两种架构,用于不同类型的任务。下面是它们之间的比较: Self-Attention(自注意力机制) 适用范围: Self-attention 主要用于处理序列数据&#xff0c…

刷写case移植记录

上位机刷写case移植: 在刷写APP时断电,然后重新刷写 传输数据时,电压异常 在刷写APP时断开CAN线,重新刷写 刷写过程中BlockSequenceCounter重复传输达到3次后,36服务回复NRC73, 刷写过程中BlockSequen…

Ubuntu安装k8s集群

文章目录 Ubuntu安装k8s3台主机前置操作:3台主机k8s前置安装命令:k8s安装命令: 节点加入 Ubuntu安装k8s 官方文档:https://kubernetes.io/zh-cn/docs/setup/production-environment/tools/kubeadm/install-kubeadm/ 默认3台机子 注…

软件项目验收第三方测试报告如何获取

软件项目验收第三方测试报告是确保软件质量、安全性和稳定性的重要环节。对于企业和开发者来说,获取一份全面、专业的第三方测试报告,对于提升软件产品的竞争力和用户满意度至关重要。本文将介绍如何获取软件项目验收第三方测试报告,以及相关…

1Panel应用推荐:Uptime Kuma

1Panel(github.com/1Panel-dev/1Panel)是一款现代化、开源的Linux服务器运维管理面板,它致力于通过开源的方式,帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用,1Panel特别开通应用商店&am…

在 CSS 中使用 text-emphasis 来增强文本的趣味性

在CSS中设置文本样式的方法有很多。您可以更改颜色、大小、字体,甚至添加阴影和轮廓等效果。但最近,我了解到一个我以前没有听说过的时尚 CSS 属性,它非常棒! 它被称为文本强调(text-emphasis)&#xff0c…

js遇到需要正则匹配来修改img标签+清除行内样式

方法一 var regex0 new RegExp("(i?)(\<img)([^\>]\>)", "gmi") //正则匹配表达式this.newcontent this.content.replace(regex0,"$2 styledisplay:block;margin: auto;width:120px; $3") //下面这个则需要在$2 $3左右添加和修改东…