CSS学习（2）-盒子模型

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://xiahunao.cn/news/2869270.html

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

相关文章

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Row）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Row）

沿水平方向布局容器。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Row(value?:{space?: number | string }) 从API version 9开始&#xff0c;该接口支持在…
阅读更多...
HTML5CSS3提高导读

HTML5CSS3提高导读

HTML5CSS3提高导读 2024/2/20 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这 …
阅读更多...
基于opencv的图像处理系统的设计与实现

基于opencv的图像处理系统的设计与实现

概要 随着计算机技术的飞速发展&#xff0c;图像技术在各领域的研究和应用日渐深入和广泛。opencv是近年来推出的开源、免费的计算机视觉库,利用其所包含的函数可以很方便地实现数字图像处理。本文旨在对opencv进行一个快速全面简介,通过介绍图像处理的相关函数&#xff0c;使读…
阅读更多...
如何重置iPhone的网络设置？这里提供详细步骤

如何重置iPhone的网络设置？这里提供详细步骤

前言 本文介绍如何重置iPhone上的网络设置。该信息适用于iPhone 12到iPhone 6以及iOS 14到iOS 8。 如何在iPhone上重置网络设置 采取以下步骤重置iPhone上的网络设置&#xff1a; 1、在iPhone上&#xff0c;打开设置应用程序。 2、单击通用。 3、滚动到屏幕底部&#xff…
阅读更多...
知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

在区块链技术的风起云涌和Web3生态的蓬勃发展中&#xff0c;知名a16z Crypto的合伙人Jane Lippencott已确认出席即将于2024年4月9日至10日在香港数码港举行的Hack.Summit() 2024区块链开发者大会。作为亚洲首次举办的Hack.Summit()&#xff0c;此次大会将为全球区块链开发者及业…
阅读更多...
智慧城市与数字孪生：共创未来城市的智慧生活

智慧城市与数字孪生：共创未来城市的智慧生活

目录 一、智慧城市与数字孪生的概念与特点 二、智慧城市与数字孪生共创智慧生活的路径 1、城市规划与建设的智能化 2、城市管理与服务的智慧化 3、城市安全与应急管理的智能化 三、智慧城市与数字孪生面临的挑战与对策 四、智慧城市与数字孪生的发展趋势与展望 1、技术…
阅读更多...
HttpServer整合模块设计与实现(http模块五)

HttpServer整合模块设计与实现(http模块五)

目录 类功能 类定义 类实现 编译测试 源码路标 类功能 类定义 // HttpServer模块功能设计 class HttpServer { private:using Handler std::function<void(const HttpRequest &, HttpResponse &)>;std::unordered_map<std::string, Handler> _get_r…
阅读更多...
六级英语单词（一）

六级英语单词（一）

Day one.
阅读更多...
从阿里云降价，看中国云计算创新之变

从阿里云降价，看中国云计算创新之变

继“疯狂星期四”历史级大降价后&#xff0c;阿里云“AI驱动、公共云优先”的战略布局再落一子。 近日&#xff0c;阿里云与菜鸟、高德地图、中远海运、东航物流、圆通速递、申通快递、中通快递、德邦快递、G7易流、地上铁、浙江大学智能交通研究所等共同发起成立“物流智能联…
阅读更多...
【LeetCode热题100】148. 排序链表（链表）

【LeetCode热题100】148. 排序链表（链表）

一.题目要求 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 二.题目难度 中等 三.输入样例 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输…
阅读更多...
挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…
阅读更多...
THM学习笔记—Simple CTF

THM学习笔记—Simple CTF

nmap扫描&#xff0c;发现2222端口很奇怪啊&#xff0c;重新换一种方式扫描2222端口 发现是ssh 先用ftp试试&#xff0c;尝试匿名登录 下载所有文件 发现只有一个ForMitch.txt&#xff0c;告诉我们其账号密码为弱密码&#xff0c;我们猜测Mitch为其用户名&#xff0c;尝试暴力…
阅读更多...
「SpringBrick快速入门指南」：一款基于Spring Boot的高级插件化开发框架

「SpringBrick快速入门指南」：一款基于Spring Boot的高级插件化开发框架

文章目录 关于 | About技术文档 | Document开源项目 | Project 案例 | Demo项目结构 | Structure主程序配置集成 | Settings引入框架依赖 | Framework在配置文件加入配置 | YamlSpringBoot启动类改引导类 | Change 插件配置集成 | Settings引入依赖 | XML定义插件引导类 | Clas…
阅读更多...
Git版本管理--远程仓库

Git版本管理--远程仓库

前言&#xff1a; 本文记录学习使用 Git 版本管理工具的学习笔记&#xff0c;通过阅读参考链接中的博文和实际操作&#xff0c;快速的上手使用 Git 工具。 本文参考了引用链接博文里的内容。 引用: 重学Git-Git远程仓库管理_git remote add origin-CSDN博客 Git学习笔记&am…
阅读更多...
【Qt问题】vs里直接打开qt项目的ui会崩溃

【Qt问题】vs里直接打开qt项目的ui会崩溃

问题描述&#xff1a; 当我用VS2019开发Qt的时候&#xff0c;在VS编译器里要用到Qt的ui设计&#xff0c;但是双击打开发现直接就崩溃了。 解决办法&#xff1a; 崩溃的原因很简单&#xff0c;是因为VS默认用的qt designer打开&#xff0c;所以会崩溃&#xff0c;我们右键单击…
阅读更多...
Transformer学习笔记（二）

Transformer学习笔记（二）

一、文本嵌入层Embedding 1、作用&#xff1a; 无论是源文本嵌入还是目标文本嵌入&#xff0c;都是为了将文本中词汇的数字表示转变为向量表示&#xff0c;希望在这样的高维空间捕捉词汇间的关系。 二、位置编码器Positional Encoding 1、作用&#xff1a; 因为在Transformer…
阅读更多...
ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件)

ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件)

ChatGPT编程—实现小工具软件(批量替换文本、批量处理图像文件) 今天借助[小蜜蜂AI][https://zglg.work]网站的ChatGPT编程实现一个功能&#xff1a;批量处理文件及其内容&#xff0c;例如批量替换文本、批量处理图像文件等。 环境&#xff1a;Pycharm 2021 系统&#xff1a…
阅读更多...
前后端分离：现代Web开发的协作模式

前后端分离：现代Web开发的协作模式

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
Java基础 - 9 - 集合进阶（二）

Java基础 - 9 - 集合进阶（二）

一. Collection的其他相关知识 1.1 可变参数 可变参数就是一种特殊形参&#xff0c;定义在方法、构造器的形参列表里&#xff0c;格式是&#xff1a;数据类型…参数名称; 可变参数的特点和好处 特点&#xff1a;可以不传数据给它&#xff1b;可以传一个或者同时传多个数据给…
阅读更多...
【自然语言处理】NLP入门（八）：1、正则表达式与Python中的实现（8）：正则表达式元字符：.、[]、^、$、*、+、?、{m,n}

【自然语言处理】NLP入门（八）：1、正则表达式与Python中的实现（8）：正则表达式元字符：.、[]、^、$、*、+、?、{m,n}

文章目录 一、前言二、正则表达式与Python中的实现1、字符串构造2、字符串截取3、字符串格式化输出4、字符转义符5、字符串常用函数6、字符串常用方法7、正则表达式1. .&#xff1a;表示除换行符以外的任意字符2. []&#xff1a;指定字符集3. ^ &#xff1a;匹配行首&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023