CSS盒子模型

盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • content（内容）：盒子的内容
  • padding（内边距）：用于控制元素内部与边框之间的距离
  • border（边框）：盒子的边框
  • margin（外边距）：用于控制元素与其他元素之间的距离（不影响盒子的大小，如果没设置width会影响盒子大小）

盒子的大小 = content + 左右 padding + 左右 border 

div {/** 背景颜色包括内容区、内边距、 */background-color: red;/** 内容区的高和宽 */width: 200px;height: 200px;/** 内边距 */padding: 10px;/** 盒子边框 */border: red 10px solid;/** margin不影响盒子整体的大小 */margin: 10px;
}

content_内容区

属性名功能
width / height设置内容区域宽、高度
max-width / min-width设置内容区域的最大/小宽度（一般不与width一起使用）
max-height / min-height设置内容区域的最大/小高度（一般不与height一起使用）
div {min-height: 500px;min-width: 500px;background-color: red;
}

默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

总宽度 = 父元素content - 自身的左右margin

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding

padding_内边距

属性名功能属性值
padding-top上内边距长度
padding-right右内边距长度
padding-bottom 下内边距长度
padding-left左内边距长度
padding复合属性长度，可以设置 1 ~ 4 个值

padding复合属性的使用规则：

  1. padding : 10px; 四个方向内边距都是10px
  2. padding : 10px 20px; 上 10px ，左右 20px（上下、左右）
  3. padding : 10px 20px 30px; 上 10px ，左右 20px ，下 30px（上、左右、下）
  4. padding : 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px（上、右、下、左）
        div {width: 400px;height: 400px;background-color: red;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}

注意：

  • padding的值不能为负数
  • 行内元素的上下内边距不能完美设置，左右内边距可以，会导致元素覆盖
  • 块级元素、行内块元素，四个方向内边距都可以完美设置

border_边框

属性名功能属性值
border-style 边框线风格，复合了四个方向的边框风格none： 默认值
solid： 实线
dashed： 虚线
dotted： 点线
double： 双实线
border-width边框线宽度，复合了四个方向的边框风格长度，默认 3px
border-color 边框线颜色，复合了四个方向的边框颜色颜色，默认黑色
border复合属性值没有顺序和数量要求
border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color		分别设置各个方向的边框，left、right、top、bottom是各个方向的复合属性同上
border-radius边框圆角
div {width: 400px;height: 400px;background-color: red;/** border-left: blue 10px solid; */border-left-width: 10px;border-color: blue;border-style: solid;border-radius: 40px
}

margin_外边距

属性名功能
margin-left 左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
margin复合属性，可以写 1~4 个值，规律同padding（顺时针）

注意：

  1. 子元素的margin，是参考父元素的content计算的
  2. 设置上、左的margin影响自己的位置，下、右margin影响后面兄弟元素的位置
  3. 块级元素、行内块元素，均可以完美地设置四个方向的margin，行内元素可以完美设置左右margin，上下margin设置无效
  4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中
  5. margin的值可以是负值
  6. 没有直接设置 margin 属性时，浏览器会默认应用一些样式规则
    <style>.outer {width: 400px;height: 400px;padding: 50px;background-color: orangered;}.inner {width: 100px;height: 100px;background-color: blue;margin: auto;}</style><div class="outer"><div class="inner"></div>
</div>

margin塌陷问题

什么是 margin 塌陷？

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上，也就是被父元素吃掉了，这个属于历史遗留问题

如何解决 margin 塌陷？

  1. 给父元素设置不为0的padding
  2. 给父元素设置宽度不为0的border
  3. 给父元素设置css样式overflow:hidden
    <style>.outer {width: 400px;background-color: gray;overflow: hidden;}.inner {width: 100px;height: 100px;}.inner1 {background-color: red;margin-top: 50px;}.inner2 {background-color: orange;margin-bottom: 50px;}</style><div class="outer"><div class="inner inner1"></div><div class="inner inner2"></div>
</div>
<div>测试</div>

margin合并问题

什么是margin合并？

上面元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如何解决margin塌陷？

上下两个元素设置上或下外边距就可以了，或者使用float

    <style>.box1 {width: 200px;height: 200px;background-color: red;margin-bottom: 50px;}.box2 {width: 200px;height: 200px;background-color: blue;margin-top: 60px;}</style><div class="box1"></div>
<div class="box2"></div>

处理内容溢出

属性名功能属性值
overflow溢出内容的处理方式visible：显示（默认值）
hidden：隐藏
scroll：显示滚动条，不论内容是否溢出
auto：内容时显示滚动条，不溢出不显示
overflow-x水平方向溢出内容的处理方式同overflow
overflow-y垂直方向溢出内容的处理方式同overflow
    <style>.outer {width: 400px;height: 200px;background-color: blue;overflow: hidden;}.inner {width: 1000px;background-color: red;}</style><div class="outer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, iste pariatur? Esse impedit iurenobis officia voluptates! Adipisci alias amet at doloremque error et magnam maiores minima, nemo neque perferendis,<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti, dicta distinctio dolorem ducimus eius fuga hic iste maxime, nam porro praesentium quam, sunt tempora voluptas. Ad, consequuntur cumque dicta, dolorem eos esse impedit iusto libero magni nam natus nisi nostrum nulla obcaecati optio, pariatur quas quisquam quos repudiandae tempora.</div>facilis illum nihil omnis quidem temporibus. Alias ducimus pariatur ratione repudiandae, sunt tempore voluptatem. Eaeaque eveniet fuga nulla pariatur. Accusamus at expedita laborum nam natus odio officia perspiciatis quam quibusdam
</div>

注意：

  1. overflow-x、overflow-y不能一个是hidden，一个是visible，这两个属于实验性属性，不建议使用
  2. overflow常用的值是hidden、auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症

隐藏元素

属性属性值
visibilityvisible：显示元素（默认值）
hidden：隐藏元素，但会占有原来的位置
displaynone：隐藏元素且不占位
    <style>.box1 {width: 200px;height: 200px;background-color: blue;/*visibility: hidden;*/display: none;}.box2 {width: 200px;height: 200px;background-color: red;}</style><div class="box1"></div>
<div class="box2"></div>

继承样式

元素如果本身设置了某个样式，就使用本身设置的样式。本身没有设置样式，会从父元素开始一级一级继承。但继承的样式优先级是最低的。

能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的

支持继承的属性：字体属性、文本属性（除了vertical-align）、文字颜色等

不支持继承的属性：边框、背景、内边距、外边距、宽高、溢出方式等

默认样式

元素一般都些默认的样式，如：

  1. a：下划线、字体颜色、鼠标小手
  2. h1 ~ h6：文字加粗、文字大小、上下外边距。
  3. p元素：上下外边距
  4. ul、ol：左内边距
  5. body>：有8px外边距（4个方向）

优先级：元素的默认样式 > 继承的样式

布局小技巧

行内元素、行内块元素，可以被父元素当做文本处理，如： text-align 、 line-height 、 text-indent 等

如何让子元素，在父元素中水平居中，在子元素加margin: (父元素content － 子元素盒子总高) / 2 auto;

    <style>.outer {width: 400px;height: 400px;background-color: blue;overflow: hidden;}.inner {width: 200px;height: 100px;background-color: red;margin: 150px auto;text-align: center;line-height: 100px;}</style><div class="outer"><div class="inner">居中</div>
</div>

当子元素为行内元素、行内块元素，给父元素加上：text-align:center和line-height

    <style>.outer {width: 400px;height: 400px;background-color: blue;text-align: center;line-height: 400px;}.inner {background-color: red;font-size: 20px;text-align: center;}</style><div class="outer"><span class="inner">居中</span>
</div>

如何让子元素，在父亲中垂直居中：

子元素为行内元素、行内块元素：让父元素的 height = line-height ，每个子元素都加上： vertical- align:middle;（若想绝对垂直居中，父元素font-size设置为0）

    <style>.box {width: 400px;height: 400px;background-color: gray;text-align: center;line-height: 400px;font-size: 0;}img {vertical-align: middle;}span {background-color: red;vertical-align: middle;font-size: 20px;}</style><div class="box"><span>你好</span><img src="./images/3.png">
</div>

元素之间的空白问题

**产生的原因：**行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

**解决方案：**给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小

    <style>div {height: 200px;background-color: darkgreen;font-size: 0;}.d1 {background-color: blue;}.d2 {background-color: red;}.d3 {background-color: chocolate;}span {font-size: 20px;}</style><div><span class="d1">韩信</span><span class="d2">李白</span><span class="d3">露娜</span>
</div>

行内块的幽灵空白问题

**产生原因：**行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的

    <style>div {width: 600px;background-color: red;}img{height: 200px;vertical-align: bottom;}</style><div><img src="001.jpeg">x
</div>

解决方案：

  • 方案一： 给行行内块设置vertical-align，值不为baseline即可，设置为middel、bottom、top均可
  • 方案二： 若父元素中只有一张图片，设置图片为块元素display:block
  • 方案三： 给父元素设置font-size:0如果该行内块内部还有文本，则需单独设置font- size

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

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

相关文章

让NPU跑起来迅为RK3588开发板设置交叉编译器

让NPU跑起来迅为RK3588开发板设置交叉编译器

让NPU跑起来迅为RK3588开发板设置交叉编译器 编译器下载地址是网盘资料“iTOP-3588 开发板\02_【iTOP-RK3588 开发板】开发资料 \12_NPU 使用配套资料\03_编译所需工具\Linux”。 拷贝 gcc-arm-10.3-2021.07-x86_64-aarch64-none-linux-gnu.tar.gz 到 Ubuntu 的/opt/tool_ch…
阅读更多...
分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测 目录 分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测预测效果基本介绍程序设计参考资料致谢 预测效果 基本介绍 Matlab实现基于PCA-GRU主成分分析-门控循环单元多输入分类预测&#xff08;完整程序和数据…
阅读更多...
八股文学习三（jvm+线程池+锁）

八股文学习三（jvm+线程池+锁）

1. jvm (1)概念 JVM是可运行 Java 代码的假想计算机 &#xff0c;包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收&#xff0c;堆 和 一个存储方法域。JVM 是运行在操作系统之上的&#xff0c;它与硬件没有直接的交互。 java运行过程&#xff1a; 我们都知道 Java…
阅读更多...
C#，数值计算——Hashfn1的计算方法与源程序

C#，数值计算——Hashfn1的计算方法与源程序

1 文本格式 using System; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer { public class Hashfn1 { private Ranhash hasher { get; set; } new Ranhash(); private int n { get; set; } public Hash…
阅读更多...
TCP IP网络编程(六) 基于UDP的服务器端、客户端

TCP IP网络编程(六) 基于UDP的服务器端、客户端

文章目录 一、理解UDP1.UDP套接字的特点2.UDP内部工作原理3.UDP的高效使用 二、实现基于UDP的服务器端、客户端1.UDP中的服务端和客户端没有连接2.UDP服务器端和客户端均只需要一个套接字3.基于UDP的数据I/O函数4.基于UDP的回声服务器端、客户端5.UDP客户端套接字的地址分配 三…
阅读更多...
IDEA中创建Java Web项目1

IDEA中创建Java Web项目1

一、File-> New -> Project... 1. 项目类型中选择 Java Enterprise 项目 2. Name&#xff1a;填写自己的项目名称 3. Project template&#xff1a;选择项目的模板&#xff0c;Web application。支持JSP和Servlet的项目 4. Application server&#xff1a;选择应用服务…
阅读更多...
【C++11保姆级教程】列表初始化(Literal types)和委派构造函数(delegating))

【C++11保姆级教程】列表初始化(Literal types)和委派构造函数(delegating))

文章目录 前言一、列表初始化 (List Initialization)1.1数组初始化1.2结构体初始化1.3容器初始化1.4列表初始化的优势 二、委派构造函数 (Delegating Constructors)2.1委派构造函数是什么&#xff1f;2.2委派构造函数示例代码2.3调用顺序2.3委派构造函数优势 总结 前言 C11引入…
阅读更多...
MySQL基础运维知识点大全

MySQL基础运维知识点大全

一. MySQL基本知识 1. 目录的功能 通用 Unix/Linux 二进制包的 MySQL 安装下目录的相关功能 目录目录目录binMySQLd服务器&#xff0c;客户端和实用程序docs信息格式的 MySQL 手册manUnix 手册页include包括&#xff08;头&#xff09;文件lib图书馆share用于数据库安装的错…
阅读更多...
数据结构-leetcode-数组形式的整数加法

数据结构-leetcode-数组形式的整数加法

解题图解&#xff1a; 下面是代码&#xff1a; /*** Note: The returned array must be malloced, assume caller calls free().*/ int* addToArrayForm(int* num, int numSize, int k, int* returnSize){int k_tem k;int klen0;while(k_tem){//看看k有几位k_tem /10;klen;}i…
阅读更多...
激活函数总结（三十五）：激活函数补充(KAF、Siren)

激活函数总结（三十五）：激活函数补充(KAF、Siren)

激活函数总结&#xff08;三十五&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 KAF激活函数2.2 Siren激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SELU、GELU、Softmax、Softp…
阅读更多...
Ubuntu 22.04.3 LTS安装

Ubuntu 22.04.3 LTS安装

最近换电脑了&#xff0c;准备重新装一下ubuntu。多年前装过ubuntu很老的版本&#xff0c;现在发现官网最新的LTS版本是 Ubuntu 22.04.3 LTS 版本。那重新装的话&#xff0c;肯定装最新的版本了。这里我记录下自己的安装过程&#xff0c;作为以后的笔记查看。 我的环境&#x…
阅读更多...
【Linux】生产者消费者模型

【Linux】生产者消费者模型

文章目录 一、生产者消费者模型1. 生产者消费者模型的概念2. 生产者消费者之间的关系3. 生产者和消费者的特点 二、基于BlockingQueue的生产者消费者模型1. 单生产单消费随机数任务计算器任务Task 2. 多生产多消费3. 为什么生产者消费者模型高效 三、基于环形队列的生产消费模型…
阅读更多...
c++中关于Thread Affinity(线程亲和性)示例源码

c++中关于Thread Affinity(线程亲和性)示例源码

win10下&#xff0c;可以在任务管理器里面设置某个进程的线程亲和性,如下图: 然后选择相关的cpu&#xff0c;如下图&#xff1a; 这么做可以使得相关的线程在某些密集型计算任务中只会运行在某些指定的cpu上&#xff0c;以便提高性能。 以下是windwos上c程序中应用Thread Affi…
阅读更多...
腾讯mini项目-【指标监控服务重构】2023-08-20

腾讯mini项目-【指标监控服务重构】2023-08-20

今日已办 PPT制作 答辩流程 概述&#xff1a;对项目背景、架构进行介绍&#xff08;体现我们分组的区别和需求&#xff09;人员&#xff1a;小组成员进行简短的自我介绍和在项目中的定位&#xff0c;分工进展&#xff1a;对项目进展介绍&#xff0c;其中a、b两组的区别和工作…
阅读更多...
STM32——SPI通信

STM32——SPI通信

文章目录 SPI&#xff08;Serial Peripheral Interface&#xff09;概述&#xff1a;SPI的硬件连接&#xff1a;SPI的特点和优势&#xff1a;SPI的常见应用&#xff1a;SPI的工作方式和时序图分析&#xff1a;工作模式传输模式与时序分析工作流程 SPI设备的寄存器结构和寄存器设…
阅读更多...
Linux四种I/O模型

Linux四种I/O模型

一.四种模型 阻塞式IO&#xff0c;非阻塞式IO&#xff0c;信号驱动IO&#xff0c;IO多路复用 二.阻塞式IO 特点&#xff1a;最简单&#xff0c;最常用&#xff0c;效率低 阻塞I/O 模式是最普遍使用的I/O 模式 系统默认状态&#xff0c;套接字建立后所处于的模式就是阻塞I/O 模式…
阅读更多...
国家网络安全周2023时间是什么时候？有什么特点？谁举办的？

国家网络安全周2023时间是什么时候？有什么特点？谁举办的？

国家网络安全周2023时间是什么时候&#xff1f; 2023年国家网络安全宣传周将于9月11日至17日在全国范围内统一开展。其中开幕式等重要活动将在福建省福州市举行。今年网安周期间&#xff0c;除开幕式外&#xff0c;还将举行网络安全博览会、网络安全技术高峰论坛、网络安全微视…
阅读更多...
【Git】万字git与gitHub

【Git】万字git与gitHub

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理在git和GitHub时的笔记与感言 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#x1faf0;&…
阅读更多...
【FAQ】安防监控/视频汇聚/云存储/智能视频分析平台EasyCVR显示CPU过载，如何解决？

【FAQ】安防监控/视频汇聚/云存储/智能视频分析平台EasyCVR显示CPU过载，如何解决？

视频云存储/安防监控/视频汇聚平台EasyCVR基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频监控系统EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云…
阅读更多...
线性代数的本质(四)——行列式

线性代数的本质(四)——行列式

文章目录 行列式二阶行列式 n n n 阶行列式行列式的性质克拉默法则行列式的几何理解 行列式 二阶行列式 行列式引自对线性方程组的求解。考虑两个方程的二元线性方程组 { a 11 x 1 a 12 x 2 b 1 a 21 x 1 a 22 x 2 b 2 \begin{cases} a_{11}x_1a_{12}x_2b_1 \\ a_{21}x_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023