CSS:盒子模型 与 多种横向布局方法

目录

  • 盒子模型
    • 块级盒子
    • 内联级盒子
    • 内联块级盒子
    • 弹性盒子
    • display 改变模型
    • 区域划分
      • text 内容区
      • padding 填充区
      • border 边框区
      • margin 外边距
      • 直接设置盒子大小
  • 布局
    • 横向布局
      • 方法一 float 浮起来
      • 方法二 内联块级元素实现
      • 方法三 弹性盒子模型

盒子模型

块级盒子

独占一行,对宽度高度支持,div、p、ul、li。

内联级盒子

不独占一行,对宽度高度不支持,span、a。

内联块级盒子

不独占一行,对宽度高度支持,img、input。

弹性盒子

一个父级元素设置成弹性盒子,其子元素默认始终横向布局。
不管子元素宽度之和是否超过父级元素,最终都能放到父级元素中。

display 改变模型

display:block; 块级盒子
display:inline; 内联级盒子
display:inline-block; 内联块级盒子
display:fiex; 弹性盒子

区域划分

从里到外:内容区、填充区、边框区、外边距。
在这里插入图片描述

text 内容区

width、height 默认针对内容区设置大小。

div,
span{width:100px;  height:50px;  
}

在这里插入图片描述

padding 填充区

padding
默认是0;
顺序是:上、右、下、左。不够的话之间对称。(顺时针)
也可以单独对某一个方向进行设置:
padding-top; 上
padding-bottom; 下
padding-left; 左
padding-right; 右

div,
span{background: red;width:100px;  height:50px;  padding:10px 20px 30px 40px;
}

在这里插入图片描述

border 边框区

border-style:边框样式;
border-color:边框颜色;
border-width:边框宽度;
当然也可以单独对某一个方法边框设置:
border-top:宽度 样式 颜色; 上
border-bottom 下
border-left 左
border-right 右
也可以对某个方向边框的某个属性设置:
border-top-width; 上边框宽度
还有很多组合就不再一一列举了。

div,
span{background: red;width:100px;  height:70px;  padding:10px 20px 30px 40px;border:5px solid black; //border-top-color:green; //border-bottom-color:blue; //
}

在这里插入图片描述

margin 外边距

margin,用法与padding相似。
特殊的,想要左右居中,只用设置上下距离,左右用auto即可。但反过来,不能上下居中。

div,
span{background: red;width:100px;  height:70px;  padding:10px 20px 30px 40px;border:5px solid black;border-top-color:green;border-bottom-color:blue;margin:10px auto; // 居中
}

在这里插入图片描述

直接设置盒子大小

box-sizing:content-box 设置内容区大小
box-sizing:border-box 设置整个盒子的大小

布局

横向布局

方法一 float 浮起来

添加float:left
父级没有高度,父级消失,给父级加高度。
缺点:高度需要自己计算,无法随最高子集的高度变化。
需要父级加 overflow:hidden; 本意是超出部分隐藏,但是父级没有添加高度,就会随之变化。
但任然有缺点,难以均分

.top{width:800px;background: yellow;overflow:hidden;
}.bottom{width:800px;height:200px;background:pink;
}.left{width:300px;height:100px;background:orange;float:left;
}
.right{width:300px;height:100px;background: purple;float:left;
}
   <div class="top">top<div class="left">left</div><div class="right">right</div></div><div class="bottom">bottom</div>

在这里插入图片描述

方法二 内联块级元素实现

缺点:会产生空白,浏览器把空格,换行,当作空白字符处理,最终以一个空格的形式展示。
解决空白:1、让元素连起来 2、让父类文本大小为0,子类另行设置。

方法三 弹性盒子模型

这是最常用的方法。
让父级变成弹性盒子模型,里面自动变成横向布局。
优点:不论子级宽度和多大,都可以横向放入其中。

下一文章将详细介绍弹性盒子模型。

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

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

相关文章

Unity学习笔记--使用 C# 开发一个 LRU

目录 什么是 LRULRU 核心思想代码实现一&#xff1a;双向链表 哈希表分析代码实现二&#xff1a;OrderedDictionary分析项目案例预告结尾 什么是 LRU 在计算机系统中&#xff0c;LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;是一种缓存置换算法。…

React中使用mobx管理状态数据使用样例

MobX 是一个身经百战的库&#xff0c;它通过运用透明的函数式响应编程&#xff08;Transparent Functional Reactive Programming&#xff0c;TFRP&#xff09;使状态管理变得简单和可扩展。官网地址&#xff1a;关于 MobX | MobX中文文档 | MobX中文网 安装依赖 mobx-react-…

QT的信号槽的四种写法和五种链接方式

目录 四种信号槽写法&#xff1a; 五种连接方式&#xff1a; 实例&#xff1a; 常见错误及改正&#xff1a; 错误1: 未连接信号与槽 错误2: 信号和槽参数不匹配 错误3: 未使用Q_OBJECT宏 错误4: 跨线程连接未处理 在Qt中&#xff0c;信号&#xff08;Signal&#xff09…

openEuler-OECA考试报名火热开启,尊享半价优惠 作者:HopeInfra 发布时间:2023-08-10

近日&#xff0c;润和软件人才评定报名系统已成功上线运行&#xff0c;现openEuler-OECA人才评定考试报名优惠活动火热开启&#xff0c;欢迎大家报名咨询&#xff01; 关于openEuler人才评定 随着openEuler及其发行版本在各个行业使用量逐年增多&#xff0c;相关人才的评定诉求…

企业内业务系统与Activiti流程引擎的结合(十)

书接上回 Activiti流程接口中台 接口实现 一、任务指派(委托) /task/instance/{taskId}/reassign 查询 activiti 相关表 本方法使用的全部是 activiti 自带的API 1. 请求参数 {"assigneeId": "000001", "tenantId": "abcd" } …

突破笔试:力扣129. 求根节点到叶节点数字之和

1. 题目链接&#xff1a;129. 求根节点到叶节点数字之和 给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。每条从根节点到叶节点的路径都代表一个数字&#xff1a;例如&#xff0c;从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 …

http相关知识点

文章目录 长链接http周边会话保持方案1方案2 基本工具postmanFiddlerFiddler的原理 长链接 一张网页实际上可能会有多种元素组成&#xff0c;这也就说明了网页需要多次的http请求。可由于http是基于TCP的&#xff0c;而TCP创建链接是有代价的&#xff0c;因此频繁的创建链接会…

理解 with torch.no_grad():

在看深度学习预测推理的代码时&#xff0c;经常会看到下面这行代码 with torch.no_grad&#xff08;&#xff09;&#xff1a;年少无知的我不知道是什么意思。今天问了一下GPT&#xff0c;给出的答案是这样的&#xff1a; 在 PyTorch 中&#xff0c;torch.no_grad() 是一个上…

大数据Flink(五十六):Standalone伪分布环境(开发测试)

文章目录 Standalone伪分布环境(开发测试) 一、架构图 二、环境准备 三、下载安装包</

flutter遇到的小问题记录

flutter-getx的Get.bottomSheet组件改变高度 Get.bottomSheet( isScrollControlled: true,) isScrollControlled: true 就是控制高度 (无语) 截取视频第一针 返回的是本地url 或者Uint8List的数据 String? videoStr await VideoThumbnail.thumbnailFile(video: videoPath,…

微信小程序 map地图(轨迹)

allMarkers效果图 废话少说直接上马&#xff08;最后是我遇到的问题&#xff09; cover-view是气泡弹窗&#xff0c;可以自定义弹窗&#xff0c;要配合js&#xff1a;customCallout&#xff0c;如果是非自定义的话&#xff1a;callout&#xff08;可以修改颜色、边框宽度、圆角…

java输出GB2312、GBK、GB18030、UTF-8所有的字符

相关文章 【转】彻底搞明白 GB2312、GBK 、GB18030和UTF-8 1.ASICII、GB2312、GBK、GB18030 以及 UTF8 的关系 2.编写代码 引入依赖&#xff1a;hutool工具类 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId>&…

轻松批量自定义重命名,为文件夹加上个性化编号!

在日常生活和工作中&#xff0c;我们经常需要对大量的文件夹进行重命名&#xff0c;以更好地管理和整理文件。然而&#xff0c;手动逐个修改文件夹名称费时费力&#xff0c;效率低下。现在&#xff0c;我们为您推荐一款简单易用的工具&#xff0c;可以帮助您快速批量自定义重命…

LoRaWAN网关与网络服务器(NS)的通信CUPS 协议介绍

LoRa Basics™ Station 定期查询 CUPS 服务器以获取更新。该协议是 HTTP/REST,使用Credentials中描述的客户端/服务器身份验证方法。对于每个查询,工作站都会提供有关其当前状态的信息,并接收包含其 LNS 和 CUPS 凭证更新的二进制 blob,以及具有任意更新的通用数据段。 通…

网络安全的相关知识点

网络安全威胁类型&#xff1a; 1.窃听&#xff1a;广播式网络系统。 2.假冒 3.重放&#xff1a;重复一份报文或者报文的一部分&#xff0c;以便产生一个被授权的效果。 4.流量分析 5.数据完整性破坏 6.拒绝服务 7.资源的非授权使用 8.陷门和特洛伊木马&#xff1a;木马病毒有客…

Java课题笔记~ Spring 的事务管理

一、Spring 的事务管理 事务原本是数据库中的概念&#xff0c;在 Dao 层。但一般情况下&#xff0c;需要将事务提升到业务层&#xff0c;即 Service 层。这样做是为了能够使用事务的特性来管理具体的业务。 在 Spring 中通常可以通过以下两种方式来实现对事务的管理&#xff…

Vue3大屏幕动态滚动

Vue3 大屏数字滚动效果 随着大屏幕技术的发展&#xff0c;大屏数字滚动效果在各种应用场景中越来越常见&#xff0c;例如数字展示、统计数据展示等。Vue3 作为一种流行的前端开发框架&#xff0c;提供了强大的工具和便捷的开发方式&#xff0c;非常适合实现大屏数字滚动效果。…

花样滑冰选手骨骼点动作识别

2023 CCF BDCI 基于飞桨实现花样滑冰选手骨骼点动作识别 16名方案以及总结 比赛任务 花样滑冰与其他运动项目相比&#xff0c;其动作类型的区分难度更大&#xff0c;这对识别任务来说是极大的挑战。对于花样滑冰动作识别任务&#xff0c;主要难点如下&#xff1a; (1) 花样滑…

Python-OpenCV中的图像处理-图像梯度

Python-OpenCV中的图像处理-图像梯度 图像梯度Sobel 算子和 Scharr 算子Laplacian 算子 图像梯度 图像梯度&#xff0c;图像边界等使用到的函数有&#xff1a; cv2.Sobel()&#xff0c; cv2.Scharr()&#xff0c; cv2.Laplacian() 等原理&#xff1a;梯度简单来说就是求导。Op…

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…