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.rhkb.cn/news/131111.html

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

相关文章

Qt打开及创建项目，运行程序（1)

Qt打开及创建项目，运行程序（1)

安装之后&#xff0c; 1.文件->新建文件或项目 2.Application->Qt Widgets Application 3.自己设置名称和路径 4.这一步非常非常重要&#xff0c;要选择编译器&#xff0c;&#xff08;MinGW是可以在Qt里用&#xff0c;如果想与VS交互&#xff0c;要选择MSVC&#xff09…
阅读更多...
去除pdf/word的水印艺术字

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印&#xff0c;则先另存为word&#xff0c;然后再按下面办法处理即可&#xff1a; 查看宏&#xff0c;创建&#xff1a;删除艺术字 添加内容&#xff1a; Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…
阅读更多...
如何使用谷歌浏览器连接linux服务器SSH服务

如何使用谷歌浏览器连接linux服务器SSH服务

环境&#xff1a; 谷歌浏览器 版本 116.0.5845.141&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; Win10 专业版 安全外壳 (SSH)v.0.58 问题描述&#xff1a; 如何使用谷歌浏览器连接linux服务器SSH服务 解决方案&#xff1a; 1.找了有台安装好了这个插…
阅读更多...
计算机视觉实战项目（图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别）

计算机视觉实战项目（图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别）

图像分类 教程博客_传送门链接:链接 在本教程中&#xff0c;您将学习如何使用迁移学习训练卷积神经网络以进行图像分类。您可以在 cs231n 上阅读有关迁移学习的更多信息。 本文主要目的是教会你如何自己搭建分类模型&#xff0c;耐心看完&#xff0c;相信会有很大收获。废话不…
阅读更多...
Vite+React+Electron开发入门，10分钟搭建本地环境并打包

Vite+React+Electron开发入门，10分钟搭建本地环境并打包

前言 想使用vite和react开发跨平台桌面的软件方案有electron和tauri两种&#xff0c;但是我个人更喜欢tauri&#xff0c;无奈electron名声大燥&#xff0c;面试要求里很多都写着&#xff1a;electron...可见这类公司多么落后。但是呢&#xff0c;又秉持着存在即合理的理念&…
阅读更多...
Ubuntu22.04开启后屏幕黄屏

Ubuntu22.04开启后屏幕黄屏

1. 故障现象 系统&#xff1a;Ubuntu22.04 现象&#xff1a;电脑从开机到进入桌面一直屏幕黄屏 2. 故障分析 可能为屏幕色彩调节出现故障 3. 解决方案 系统设置——》色彩——》删除原来的配置&#xff08;remove profile&#xff09;——》添加配置Colorspace:Compatibl…
阅读更多...
八股——const 关键字

八股——const 关键字

1.const作用 作用&#xff1a;const用于保护指针指向数据不被修改 测试代码1 显示数组的函数不小心修改了指针指向的值&#xff0c;这时候没有加const关键字&#xff0c;编译器不会报错 #include <stdio.h> void showar(int ar[]);int main(void) {int ar[4]{2,3,4,5…
阅读更多...
antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮 效果图代码解析 效果图 代码解析 import { Form, Upload, message } from antd; import { PlusOutlined } from ant-design/icons; import { useState, useEffect } from react; import { BASE_URL } from /utils/…
阅读更多...
kafka增加磁盘或者分区，topic重分区

kafka增加磁盘或者分区，topic重分区

场景&#xff1a;kafka配置文件log.dirs增加了几个目录&#xff0c;但是新目录没有分区数据写入&#xff0c;所以打算进行重分区一下。 1.生成迁移计划 进入kafka/bin目录 新建 topic-reassign.json,把要重分区的topic按下面格式写。 { "topics": [{ …
阅读更多...
深度学习基础之梯度下降

深度学习基础之梯度下降

1. 引言 梯度下降是一种用于最小化&#xff08;或最大化&#xff09;损失函数的优化算法。它是机器学习和深度学习中的一个关键概念&#xff0c;通常用于调整学习算法中的参数。 梯度下降背后的核心思想是迭代调整参数以最小化损失函数。它的工作原理是计算损失函数相对于每个…
阅读更多...
2023-09-12 LeetCode每日一题（课程表 IV）

2023-09-12 LeetCode每日一题（课程表 IV）

2023-03-29每日一题 一、题目编号 1462. 课程表 IV二、题目链接 点击跳转到题目位置 三、题目描述 你总共需要上 numCourses 门课&#xff0c;课程编号依次为 0 到 numCourses-1 。你会得到一个数组 prerequisite &#xff0c;其中 prerequisites[i] [ai, bi] 表示如果你…
阅读更多...
C基础-操作符详解

C基础-操作符详解

操作符分类&#xff1a; 算数操作符&#xff1a; - * / % //算数操作符 // int main() // { // // /除法 1.整数除法(除号两端都是整数) 2浮点数除法&#xff0c;除号的两端只要有一个小数就执行小数除法 // // 除法中&#xff0c;除数为0 // int a 7 / 2; /…
阅读更多...
Matlab图像处理-彩色图像基础

Matlab图像处理-彩色图像基础

彩色的物理认识 人类能够感知的物体的颜色是由物体反射的光的性质决定的。如图8-2所示&#xff0c;可见光是由电磁波谱中较窄的波段组成。 如果物体反射的光在所有可见光波长范围内都是平衡的&#xff0c;那么从观察者的角度来看&#xff0c;它是白色的&#xff1b; 如果物体…
阅读更多...
UG\NX CAM二次开发 设置工序检查边界 UF_CAMBND_append_bnd_from_curve

UG\NX CAM二次开发 设置工序检查边界 UF_CAMBND_append_bnd_from_curve

文章作者：代工 来源网站：NX CAM二次开发专栏 简介： UG\NX CAM二次开发 设置工序检查边界 UF_CAMBND_append_bnd_from_curve 效果： 代码： static int init_proc(UF_UI_selection_p_t select, void* user_data) { int errorCode = 0; int num_triples = 1; //…
阅读更多...
解决php导出excel中小数尾部0不显示的问题

解决php导出excel中小数尾部0不显示的问题

调整代码前&#xff1a; 新增代码&#xff1a; //小数避免末尾0不显示的问题 foreach ($list as &$line) {foreach ($line as &$column) {if (is_numeric($column) && strpos($column, .)!false) {$column " {$column} ";}} } 效果&#xf…
阅读更多...
SpringBoot整合Easy-ES操作演示文档

SpringBoot整合Easy-ES操作演示文档

文章目录 SpringBoot整合Easy-ES操作演示文档1 概述及特性1.1 官网1.2 主要特性 2 整合配置2.1 导入POM2.2 Yaml配置2.3 EsMapperScan 注解扫描2.4 配置Entity2.5 配置Mapper 3 基础操作3.1 批量保存3.2 数据更新3.3 数据删除3.4 组合查询3.5 高亮查询3.6 统计查询 4 整合异常4…
阅读更多...
深度学习：循环神经网络RNN及LSTM

深度学习：循环神经网络RNN及LSTM

深度学习&#xff1a;循环神经网络RNN及LSTM 循环神经网络RNN原理代码 长短期记忆网络LSTM原理遗忘门记忆门输出门 代码 循环神经网络RNN 原理 对于传统的神经网络&#xff0c;它的信号流从输入层到输出层依次流过&#xff0c;同一层级的神经元之间&#xff0c;信号是不会相互…
阅读更多...
华为CD32键盘使用教程

华为CD32键盘使用教程

华为CD32键盘使用教程 用爱发电写的教程&#xff01; 最后更新时间&#xff1a;2023.9.12 型号&#xff1a;华为有线键盘CD32 基本使用 此键盘在不安装驱动的情况下可以直接使用&#xff0c;但是不安装驱动指纹识别是无法使用的&#xff01;并且NFC功能只支持华为的部分电脑…
阅读更多...
小程序中使用分包

小程序中使用分包

前言 小程序在未使用的分包的情况下仅支持大小为2M,如果图片等资源过多的情况下可以使用分包功能&#xff0c;使用分包的情况下单个分包大小不能超过2M,总大小不能超过20M&#xff0c;分包有两种情况&#xff1a;普通分包和独立分包&#xff0c;下面介绍的是普通分包。官方文档…
阅读更多...
《使用 Helm 管理 Kubernetes 应用程序的最佳实践》

《使用 Helm 管理 Kubernetes 应用程序的最佳实践》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023