7(8)-2-CSS 盒子模型


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • CSS 盒子模型
    • 1 盒子模型(Box Model)组成
    • 2 边框(border)
    • 3 内边距(padding)
    • 4 外边距(margin)
      • 4.1 外边距典型应用
      • 4.2 外边距合并
      • 4.3 相邻块元素垂直外边距的合并
      • 4.4 嵌套块元素垂直外边距的塌陷
    • 5 清除内外边距
    • 6 单行文字垂直居中
    • 7 怪异盒子模型
  • 附:CSS margin与text-align居中的区别

CSS 盒子模型

页面布局三大核心,盒子模型浮动定位

在这里插入图片描述
在这里插入图片描述

网页布局过程:

  • 从大到小,大盒子包小盒子
  • 从外到里,从全局到局部
  • 先准备好相关的网页元素,网页元素基本都是盒子
  • 利用 CSS 设置好盒子样式,然后摆放到相应位置
  • 往盒子里面装内容
  • 网页布局的核心本质: 就是利用 CSS 摆盒子

1 盒子模型(Box Model)组成

所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容

在这里插入图片描述

内容宽度/高度使用属性:width / height

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

在这里插入图片描述

元素的高度也是同理。

2 边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色

语法:

border : border-width || border-style || border-color
  • border-width:定义边框粗细,单位是px
  • border-style:边框样式
    • none:没有边框即忽略所有边框的宽度(默认值)
    • solid:边框为单实线(最为常用的)
    • dashed:边框为虚线
    • dotted:边框为点线
  • border-color:边框颜色

边框简写:

border: 1px solid red;

边框分开写法:

border-top: 1px solid red;

请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色。

border影响了盒子实际大小,如果盒子已经有了宽度和高度,此时再指定边框,会撑大盒子。

3 内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离。

  • padding-left:左内边距
  • padding-right:右内边距
  • padding-top:上内边距
  • padding-bottom:下内边距

padding 属性(简写属性)可以有一到四个值。

  • padding: 5px:1个值,代表上下左右都有5像素内边距;
  • padding: 5px 10px:2个值,代表上下内边距是5像素 左右内边距是10像素;
  • padding: 5px 10px 20px:3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素;
  • padding: 5px 10px 20px 30px:4个值,上是5像素右10像素下20像素左是30像素 顺时针;

当我们给盒子指定 padding 值之后,发生了 2 件事情:

  1. 内容和边框有了距离,添加了内边距。
  2. padding影响了盒子实际大小。

如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子。

**解决方案:**如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。

如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

4 外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

  • margin-left:左外边距
  • margin-right:右外边距
  • margin-top:上外边距
  • margin-bottom:下外边距

margin 简写方式代表的意义跟 padding 完全一致。

4.1 外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:

  • 盒子必须指定了宽度(width)。
  • 盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}

常见的写法,以下三种都可以:

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;,常用

**注意:**以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

4.2 外边距合并

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。

主要有两种情况:

  1. 相邻块元素垂直外边距的合并
  2. 嵌套块元素垂直外边距的塌陷

4.3 相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

在这里插入图片描述

**解决方案:**尽量只给一个盒子添加 margin 值。

4.4 嵌套块元素垂直外边距的塌陷

针对于父子盒子的上外边距问题,正正取大,正负取和,负负取小

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 overflow:hidden。
  • 还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题,涉及到BFC,后面再讲解。

5 清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

* {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */}

**注意:**行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(无效)。但是转换为块级和行内块元素就可以了。

6 单行文字垂直居中

让文字的行高等于盒子的高度,可以让文字在当前盒子内垂直居中

在这里插入图片描述

这时候盒子的高度为100px,行高的上行间距和下行间距把文字挤到中间了。

如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下。

7 怪异盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

  1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
  2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

怪异盒子模型(box-sizing: border-box),也叫做内减盒模型,或者IE 盒子模型,我们可以通过 css 样式 box-sizing 来进行切换

select {box-sizing: border-box; /* 怪异盒子模型,内减盒子模型 */box-sizing: content-box; /* 标准盒子模型 */
}

内减盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同。

怪异盒子模型的 content 内容宽度会把 padding 和 border 算入其中,是由外而内的计算宽度。

怪异盒子模型当内减到负数的时候,那么表现形式和标准盒子模型差不多。

两种盒子模型区别

主要区别在于盒子的整体宽度高度计算方式不同

  1. 原理:正常盒模型的大小是由内到外的,由内部决定外部的大小;而怪异盒模型是由外而内的。
  2. 可以同时设置 box-sizing 属性来使用这一特性,是其改变 border 宽度也不影响其他元素;
  3. box-sizing:简单理解就是盒子大小基于什么计算的;

附:CSS margin与text-align居中的区别

1、margin: 0 auto只针对块级居中,对行内标签元素和行内块标签元素(含有inline)的无效。

2、父级加text-align: center ,对子级的文本或者行内标签元素和行内块标签元素(含有inline)进行居中,

对子级块级无效,由于继承性,子级块级如果没有重置text-align,子级块级孙子含有inline是有效的。

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

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

相关文章

软考程序员2024年5月报名流程及注意事项

2024年5月软考程序员报名入口: 中国计算机技术职业资格网(http://www.ruankao.org.cn/) 2024年软考报名时间暂未公布,考试时间上半年为5月25日到28日,下半年考试时间为11月9日到12日。不想错过考试最新消息的考友可以…

题目:学习使用register定义变量的方法。

题目:学习使用register定义变量的方法。 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated …

C语言-翁恺-PTA-81-120课后练习题-03

title: C语言-翁恺-PTA-81-120课后练习题-03 tags: PTAC语言 description: ’ ’ mathjax: true date: 2024-04-05 22:21:00 categories:PTA 7-84 连续因子 80-以后的题目感觉都不是很好做 一个正整数 N 的因子中可能存在若干连续的数字。例如 630 可以分解为 3567&#xff…

多线程4

死锁 想获取到第二把锁,就需要执行完第一层大括号,想要执行完第一层大括号,就要先获取到第二层的锁。 synchronized (counter2){ synchronized (counter2){} } 例子:t2先启动,t2进行加锁后一定成功,但是如果t2进行二…

c++ const关键词介绍

在C中,const 关键字用于定义常量或指定函数参数、成员函数、成员变量等为常量,表示其值在程序的执行过程中不能被修改。 //1. 定义常量: const int MAX_SIZE 100;//2. 常量指针: int x 10; const int* ptr &x; // 指向整型…

基于YOLOv8的木材缺陷检测系统说明

基于YOLOv8的木材缺陷检测系统说明 一、系统概述 基于YOLOv8的木材缺陷检测系统是一个利用深度学习技术进行木材表面缺陷自动检测的智能系统。该系统通过训练YOLOv8模型,实现对木材表面缺陷的快速、准确识别,从而提高木材加工的质量控制和生产效率。 …

图数据库技术:知识图谱的存储与查询

图数据库技术:知识图谱的存储与查询 一、引言 在探索知识的宇宙中,知识图谱是组织和理解海量信息的星系图。在这张图中,每一个概念、实体与事物不再是孤立的点,而是通过关系与边相互连接,形成一个复杂而有机的网络。图…

mysql利用延迟复制恢复误删的表

(1)在主库3306中创建测试数据 (rootlocalhost) [(none)] create database test; Query OK, 1 row affected (0.00 sec) (rootlocalhost) [(none)] use test ; Database changed (rootlocalhost) [test] create table t1(id int primary key); Query OK, …

计算机网络练习-计算机网络概述与性能指标

计算机网络概述 ----------------------------------------------------------------------------------------------------------------------------- 1. 计算机网络最据本的功能的是( )。 1,差错控制 Ⅱ.路由选择 Ⅲ,分布式处理 IV.传输控制 …

3.网络编程-TCP

目录 TCP 建立连接的过程是怎样的 TCP为什么是三次握手 TCP 断开连接的过程是怎样的 TCP挥手为什么需要四次 为什么TIME_WAIT等待的时间是2MSL TCP详解之滑动窗口 TCP 半连接队列和全连接队列是什么 TCP粘包,拆包是怎么发生的,如何解决 TCP是如何…

书生·浦语大模型实战营之茴香豆:搭建你的 RAG 智能助理

书生浦语大模型实战营之茴香豆:搭建你的 RAG 智能助理 RAG(Retrieval Augmented Generation)技术,通过检索与用户输入相关的信息,并结合外部知识库来生成更准确、更丰富的回答。解决 LLMs 在处理知识密集型任务时可能遇…

高项-进度管理

成本管理就是要确保项目在批准的预算内完成。 成本的类型 成本的组成 项目成本管理储备成本基准(需要经过批准才能进行变更) 成本基准应急储备工作包成本(在基准内的可以不经过批准变更) 工作包成本活动成本活动应急储备&…

物联网实战--驱动篇之(三)LoRa(sx1278)

目录 一、LoRa简介 二、sx1278模块 三、硬件抽象层 四、SX1278初始化 五、发送时间计算 六、发送模式 七、接收模式 八、总结 一、LoRa简介 LoRa在物联网传输领域有着举足轻重的地位,平时大家可能比较少听说,因为它主要还是在行业应用&#xff0…

C语言整数和小数的存储

1.整数在内存中的存储 计算机使用二进制进行存储、运算,整数在内存中存储使用的是二进制补码 1.1原码、反码、补码 整数的2进制表⽰⽅法有三种,即 原码、反码和补码 三种表⽰⽅法均有符号位和数值位两部分,符号位都是⽤0表⽰“正”&am…

鸿蒙内核源码分析 (Fork 篇) | 一次调用,两次返回

第一次看到 fork 时,说是一次调用,两次返回,当时就懵圈了,多新鲜,真的很难理解。因为这足以颠覆了以往对函数的认知, 函数调用还能这么玩,父进程调用一次,父子进程各返回一次。而且只…

机器学习贝叶斯算法是什么

参考一篇理解性文章:如何让10岁的表弟也能理解贝叶斯公式 问: 机器学习贝叶斯算法是什么,它的会被用于分类或者回归分析吗,它有什么优势? 答: 机器学习中的贝叶斯算法是一种基于贝叶斯定理的算法&#…

设计原则、设计模式、设计模式项目实战

设计原则 封装、继承、多态、抽象分别可以解决哪些编程问题 封装:也叫做信息隐藏或数据保护访问。数据 通过暴露有限的访问接口,授权外部仅能通过类提供接口访问,对内的类private私有化属性,通过封装简化操作,让用户更…

记Postman参数化

因为需要在WEB页面上处理部分数据,手动操作太慢,所以考虑使用接口方式处理,因急于使用,用Python Request的方式,写代码也来得慢,故采用Postman加外部文件参数化方式来实现。 接口请求是Post方式&#xff0c…

Healthcare医疗健康领域常见的几个单词

有几个医疗健康领域的单词总是傻傻分不清楚 inpatient,住院病人 outpatient ,门诊病人 urgentcare ,急需护理 ambulatory,非卧床病人 emergency, 急诊(比前面那个病情或者伤情更加严重) wellne…

电商平台混战之下,天猫破解品牌增长奥秘

行业共识是追上风,才有好生意,但风很多时候不会只有一个方向。 4月2日,上海,TopTalk 2024天猫超级品牌私享会举行。这个活动已举办数年,每一年天猫都会发布新一年度的品牌经营策略,只是与往年不同的是&…