CSS学习（2）-盒子模型

news2024/11/26 0:01:02

1. CSS 长度单位

  1. px ：像素。
  2. em ：相对元素 font-size 的倍数。
  3. rem ：相对根字体大小，html标签就是根。
  4. % ：相对父元素计算。

注意： CSS 中设置长度，必须加单位，否则样式无效！

2. 元素的显示模式

2.1 块元素（block）

特点：

  1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
  2. 默认宽度：撑满父元素。
  3. 默认高度：由内容撑开。
  4. 可以通过 CSS 设置宽高。

常见的如下：

  1. 主体结构标签： <html> 、 <body>
  2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
  3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
  4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
  5. <form> 与 <option>

2.2 行内元素（inline）

特点:

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
    列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 无法通过 CSS 设置宽高。

常见的如下：

  1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
  2. <a> 与 <label>

2.3 行内块元素（inline-block）

特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
    列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 可以通过 CSS 设置宽高。

常见的如下：

  1. 图片： <img>
  2. 单元格： <td> 、 <th>
  3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>
  4. 框架标签： <iframe>

2.4 修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
在这里插入图片描述

3. 盒子模型的组成

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

  1. margin（外边距）： 盒子与外界的距离。
  2. border（边框）： 盒子的边框。
  3. padding（内边距）： 紧贴内容的补白区域。
  4. content（内容）：元素中的文本或后代元素都是它的内容。

图示如下：
在这里插入图片描述

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

注意： 外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

3.1 盒子内容区（content）

在这里插入图片描述

注意：
max-width 、 min-width 一般不与 width 一起使用。
max-height 、 min-height 一般不与 height 一起使用。

3.2 关于默认宽度

  • 所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
  • 总宽度 = 父的 content — 自身的左右 margin 。
  • 内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右
    padding 。

3.3 盒子内边距（padding）

在这里插入图片描述

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 。（上、右、
    下、左）

注意点：

  1. padding 的值不能为负数。
  2. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
  3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

3.4 盒子边框（border）

在这里插入图片描述
边框相关属性共 20 个。
border-style 、 border-width 、 border-color 其实也是复合属性。

3.5 盒子外边距（margin）

在这里插入图片描述

1. margin 注意事项
  1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着
    子元素）
  2. 上margin 、左margin ：影响自己的位置；下margin 、右margin ：影响后面兄弟元素
    的位置。
  3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右
    margin可以完美设置，上下margin 设置无效。
  4. margin的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级
    元素会在父元素中水平居中。
  5. margin 的值可以是负值。
2. margin 塌陷问题

什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

  • 方案一： 给父元素设置不为 0 的 padding 。
  • 方案二： 给父元素设置宽度不为 0 的 border 。
  • 方案三：给父元素设置 css 样式 overflow:hidden。
3. margin 合并问题

什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 合并？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

3.6 处理内容溢出

在这里插入图片描述

注意：

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

3.7 隐藏元素的方式

方式1：visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式2： display 属性

设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

3.8 样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

1. 会继承的css属性

字体属性、文本属性（除了vertical-align）、文字颜色 等。

2. 不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式 等。

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

3.9 默认样式

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

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

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

3.10 布局小技巧

  1. 行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。 例如： text-align 、 line-height 、text-indent 等。

  1. 如何让子元素，在父亲中 水平居中：
    • 若子元素为块元素，给父元素加上： margin:0 auto; 。
    • 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
  2. 如何让子元素，在父亲中 垂直居中：
    • 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子
      总高) / 2。
    • 若子元素为行内元素、行内块元素：
      让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle; 。
      补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

3.11 元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：
  • 方案一： 去掉换行和空格（不推荐）。
  • 方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推
    荐）。

3.12 行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

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

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

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

相关文章

Arduino IDE配置ESP8266开发环境

Arduino IDE配置ESP8266开发环境

一、配置步骤 在Arduino IDE中配置ESP8266开发环境的详细步骤如下&#xff1a; 1.打开Arduino IDE&#xff0c;依次点击“文件”->“首选项”&#xff0c;在“附加开发板管理器网址”一栏添加ESP8266开发板的网址。常用的网址是&#xff1a; http://arduino.esp8266.com/s…
阅读更多...
精细化运营从开店到抖音运营

精细化运营从开店到抖音运营

本课程将覆盖精细化运营的各个方面&#xff0c;从实体店开店筹备到在抖音平台进行运营推广。学员将学习品牌定位、市场调研、社交媒体营销策略等内容&#xff0c;深入了解如何利用抖音等平台推动业务发展&#xff0c;提升品牌影响力。 课程大小&#xff1a;6.2G 课程下载&…
阅读更多...
快速排序(数据结构)

快速排序(数据结构)

1. 前言&#xff1a; 这两种排序经常使用&#xff0c;且在算法题中经常遇见。 这里我们简单分析讨论一下。 1. 快速排序 平均时间复杂度&#xff1a;O&#xff08;nlogn&#xff09; 最坏时间复杂度&#xff1a; O&#xff08;n^2&#xff09; 1.1. 左右向中遍历: 取最右侧4…
阅读更多...
MechanicalSoup，一个非常实用的 Python 自动化浏览器交互工具库！

MechanicalSoup，一个非常实用的 Python 自动化浏览器交互工具库！

目录 前言 什么是 Python MechanicalSoup 库&#xff1f; 核心功能 使用方法 1. 安装 MechanicalSoup 库 2. 创建 MechanicalSoup 客户端 3. 打开网页并与之交互 实际应用场景 1. 网页自动化测试 2. 网络爬虫与数据提取 3. 网页自动化操作 4. 自动化填写和提交多个表单 5.…
阅读更多...
数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目&#xff08;9&#xff09;—基于Verilog的SNN加速器 写在前面的话项目整体框图完整电路框图 项目简介和学习目的软件环境要求 Wave&CoverageTiming&#xff0c;Area & Power总结 写在前面的话 项目介绍&#xff1a; SNN硬件加速器是一种专为脉冲神经网…
阅读更多...
【论文笔记合集】Transformers in Time Series A Survey综述总结

【论文笔记合集】Transformers in Time Series A Survey综述总结

本文作者&#xff1a; slience_me 文章目录 Transformers in Time Series A Survey综述总结1 Introduction2 Transformer的组成Preliminaries of the Transformer2.1 Vanilla Transformer2.2 输入编码和位置编码 Input Encoding and Positional Encoding绝对位置编码 Absolute …
阅读更多...
GPT-1, GPT-2, GPT-3, InstructGPT / ChatGPT and GPT-4 总结

GPT-1, GPT-2, GPT-3, InstructGPT / ChatGPT and GPT-4 总结

1. GPT-1 What the problem GPT-1 solve? 在 GPT-1 之前&#xff0c;NLP 通常是一种监督模型。 对于每个任务&#xff0c;都有一些标记数据&#xff0c;然后根据这些标记数据开发监督模型。 这种方法存在几个问题&#xff1a;首先&#xff0c;需要标记数据。 但 NLP 不像 CV&…
阅读更多...
[ Linux ] vim的使用（附：命令模式的常见命令列表）

[ Linux ] vim的使用（附：命令模式的常见命令列表）

1.下载安装 这里是在通过yum进行下载安装 yum install -y vim 2.了解 vim是一款编辑器&#xff0c;它具有多模式的特点 主要有&#xff1a;插入模式&#xff0c;命令模式&#xff0c;底行模式 3.使用 打开 vim 文件名 命令模式的常见命令列表 插入模式 按「 i 」切换…
阅读更多...
MQ组件之RabbitMQ学习

MQ组件之RabbitMQ学习

MQ组件之RabbitMQ入门 同步调用和异步调用 在微服务架构中&#xff0c;服务之间的调用有同步调用和异步调用两种方式。 我们使用OpenFeign去调用是同步调用&#xff0c;同步调用的缺点很明显&#xff0c;在下图的场景中&#xff0c;支付完成后需要调用订单服务、仓库服务、短…
阅读更多...
echarts实践总结（常用二）：折线图（特点：渐变、面积区域）

echarts实践总结（常用二）：折线图（特点：渐变、面积区域）

目录 第一章 echarts基本使用 第二章 echarts实践——折线图 效果展示 第一章 echarts基本使用 Echarts常用配置项(详细入门)_echarts配置项手册-CSDN博客 柱状图案例&#xff1a; echarts实践总结(常用一)&#xff1a;柱状图&#xff08;特点&#xff1a;渐变色、点击缩放、…
阅读更多...
JavaScript Object对象

JavaScript Object对象

创建object类型对象的三种方式 ES中object类型的对象大致由三种创建方式&#xff1a; 直接使用花括号创建使用function创建使用Object.create方法创建。 直接使用花括号创建 代码示例&#xff1a; var obj {v: 6,innerObj: {v: 7,},logV: function() {console.log(this.v…
阅读更多...
C#求水仙花数

C#求水仙花数

目录 1.何谓水仙花数 2.求三位数的水仙花数 3.在遍历中使用Math.DivRem方法再求水仙花数 1.何谓水仙花数 水仙花数&#xff08;Narcissistic number&#xff09;是指一个 n 位正整数&#xff0c;它的每个位上的数字的 n 次幂之和等于它本身。例如&#xff0c;153 是一个 3 …
阅读更多...
慢sql优化

慢sql优化

1.避免使用select *&#xff0c;而是明确列出需要的列&#xff0c; 2.小表驱动大表&#xff0c;in适用于左边大表&#xff0c;右边小表。 exists适用于左边小表&#xff0c;右边大表。 3.批量操作&#xff1a;如果每次插入数据库数据&#xff0c;都要连接一次数据库&#xf…
阅读更多...
【LeetCode每日一题】2684. 矩阵中移动的最大次数

【LeetCode每日一题】2684. 矩阵中移动的最大次数

文章目录 [2684. 矩阵中移动的最大次数](https://leetcode.cn/problems/maximum-number-of-moves-in-a-grid/)思虑&#xff1a;代码&#xff1a; 2684. 矩阵中移动的最大次数 思虑&#xff1a; 1.将第一列的所有行坐标&#xff0c;用IntStream 来生成一个范围 [0, m) 内的整数…
阅读更多...
一命通关递归

一命通关递归

递归 简介 递归是我们在学C语言的时候&#xff0c;就已经接触到了的一个概念&#xff0c;相信大家的递归都是从这里开始的&#xff1a; 但是&#xff0c;在老师念ppt的时候&#xff0c;伴随着一些前轱辘不转后轱辘转的语言&#xff0c;我们往往都没有太去了解递归的工作原理和…
阅读更多...
【C语言】字符函数与字符串函数以及内存函数 { 超详细攻略，一篇学会 }

【C语言】字符函数与字符串函数以及内存函数 { 超详细攻略，一篇学会 }

今日分享&#xff1a;字符、字符串函数和内存函数 内存函数就是对内存进行操作的函数 字符串函数就是对字符串进行操作的函数 字符函数就是对字符进行操作的函数 str前缀的函数是字符串函数&#xff0c;头文件string.h mem前缀的函数是内存函数&#xff0c;头文件stdlib.h 字符…
阅读更多...
【pynput】监控是否打开百度贴吧网页

【pynput】监控是否打开百度贴吧网页

文章目录 简介Demo 简介 有网友提过一个要求&#xff0c;用 Python 实现一个 电脑打开某网站就自动关机的功能。 想到的思路有两个&#xff1a; 【windows 平台】, 获取活动的窗口标题&#xff0c;如果标题里包含了某些网站名称, 那就使用关机命令 可以定时拉取标题, 也可以使…
阅读更多...
代码算法训练营day9 | 28. 实现 strStr() 、459.重复的子字符串

代码算法训练营day9 | 28. 实现 strStr() 、459.重复的子字符串

day9&#xff1a; 28. 实现 strStr()KMP的主要应用&#xff1a;什么是前缀表&#xff1a;前缀表是如何记录的&#xff1a; 如何计算前缀表&#xff1a;构造next数组&#xff1a;1、初始化2、处理前后缀不相同的情况3、处理前后缀相同的情况 代码&#xff1a; 459.重复的子字符串…
阅读更多...
P1303 A*B Problem（高精度乘法）

P1303 A*B Problem（高精度乘法）

题目描述&#xff1a; 图解&#xff1a; 此图来源于ACwing一位大佬的题解 AC代码&#xff1a; #include<iostream> #include<vector>using namespace std;vector<int> mul(vector<int> &A,vector<int> &B) {vector<int> C(A.…
阅读更多...
C#创建第一个PIESDK模版的项目

C#创建第一个PIESDK模版的项目

目录 环境配置创建项目方式 环境配置 1软件安装 通过安装光盘或者U盘等介质读取PIE软件的安装程序和使用文档。程序安装过程比较简单&#xff0c;软件本身不借助与任何第三方程序&#xff0c;直接双击安装程序【PIESDK.Net_V6.3_Windows_X64.exe】安装文件&#xff0c;即可安装…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023