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是有效的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

传统海外仓的管理模式有什么缺点?使用位像素海外仓系统的海外仓有什么优势?

传统的海外仓管理模式主要需要大量的人工操作和相对简单的信息化手段进行仓库的日常运营。因此,传统海外仓的运作比较依赖仓库员工的手工记录、核对和处理各种仓储和物流信息。 然而,传统海外仓管理模式通常存在一些缺点: 效率低下 因为需…

LLMOps快速入门,轻松开发部署大语言模型

大家好,如今我们能够与ChatGPT进行轻松互动:只需输入提示,按下回车,就能迅速得到回应。然而,这个无缝互动的底层,是一系列复杂而有序的自动执行步骤,即大型语言模型运营(LLMOps&…

postgresql数据库|

概述 Oracle_fdw 是一种postgresql外部表插件,可以读取到Oracle上面的数据。是一种非常方便且常见的pg与Oracle的同步数据的方法 配置Oracle环境 Oracle_fdw 的编译依赖pg_config和Oracle的客户端环境 pg_config 是什么呢?其实就是postgresql的一个可执…

OpenFOAM学习笔记

OpenFOAM 计算流体力学:用计算机求解流体控制方程,来模拟真实情况下,流体的流动状态OpenFOAM的离散方法:有限体积法,将整个空间划分成若干个控制体OpenFOAM使用的网格系统:同位网格(Collocated…

动态属性的响应式问题和行内编辑的问题

动态属性的响应式问题 通过点击给目标添加动态数据,该数据不具备响应式特性 如下图: 点击编辑,前面的数据框会变成输入框,点取消会消失 // 获取数据 async getList () {const res await xxxthis.list res.data.rows// 1. 获…

跨国网络通信挑战与解决方案:优化越南工厂与中国总部连接的网络质量

在全球化不断深入的今天,越来越多的中国企业走出国门,在世界各地设立分支机构和生产基地。然而,随之而来的是跨国网络通信的挑战。最近,客户位于越南的工厂与中国总部之间的网络连接出现了问题,直接影响了企业的日常运…

Windows启动项管理器Autoruns

文章目录 AutoRunsVirusTotalAutorunsc AutoRuns AutoRuns用于启动程序管理,可显示系统启动或登录时的各种自动启动行为,并扩展和加载各种系统进程,要比任务管理器中的自启动管理高级得多,其界面如下,列出了所有开机启…

阿里云幻兽帕鲁多人联机服务器多少钱?4核16G或8核32G配置

2024阿里云幻兽帕鲁专用服务器价格表:4核16G幻兽帕鲁专用服务器26元一个月、149元半年,默认10M公网带宽,8核32G幻兽帕鲁服务器10M带宽价格90元1个月、271元3个月。阿里云提供的Palworld服务器是ECS经济型e实例,CPU采用Intel Xeon …

c++11 标准模板(STL)本地化库 - 平面类别 - (std::ctype) 定义字符分类表(五)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 定义字符分类表 std::ctype template< class CharT > clas…

159 Linux C++ 通讯架构实战14,epoll 函数代码实战

ngx_epoll_init函数的调用 //&#xff08;3.2&#xff09;ngx_epoll_init函数的调用&#xff08;要在子进程中执行&#xff09; //四章&#xff0c;四节 project1.cpp&#xff1a;nginx中创建worker子进程&#xff1b; //nginx中创建worker子进程 //官方nginx ,一个…

卫星遥感影像统计农业产量、作物分类及面积

卫星遥感技术的广泛应用为农业领域带来了巨大的变革&#xff0c;其中&#xff0c;卫星遥感影像在农业产量估算方面的应用正成为一项关键技术。通过高分辨率的遥感数据&#xff0c;农业生产者可以更准确、及时地了解农田状况&#xff0c;实现精准农业管理&#xff0c;提高产量和…

零基础如何闯入IT的神秘大门?

前言 随着信息技术的飞速发展&#xff0c;IT行业成为了许多有志之士梦寐以求的职业领域。但对于零基础的人来说&#xff0c;如何成功进入这个行业却是一个不小的挑战。下面&#xff0c;我将结合自身的C语言专业知识&#xff0c;为大家详细阐述一条可行的学习路径&#xff0c;并…

canvas画图,画矩形、圆形、直线可拖拽移动,可拖拽更改尺寸大小

提示&#xff1a;canvas画图&#xff0c;画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动 文章目录 前言一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动总结 前言 一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖…

LLM大语言模型(九):LangChain封装自定义的LLM

背景 想基于ChatGLM3-6B用LangChain做LLM应用&#xff0c;需要先了解下LangChain中对LLM的封装。本文以一个hello world的封装来示例。 LangChain中对LLM的封装 继承关系&#xff1a;BaseLanguageModel——》BaseLLM——》LLM LLM类 简化和LLM的交互 _call抽象方法定义 ab…

教你快速认识Java中的抽象类和接口

目录 引言 抽象类&#xff08;Abstract Class&#xff09; 抽象类的概念 抽象类的图标 抽象类的语法 抽象类的特点 接口&#xff08;Interface&#xff09; 接口的概念 接口的图标 接口的语法 接口的特点 接口的使用 接口的意义 抽象类与接口的区别 Object类 结…

idea开发 java web 高校学籍管理系统bootstrap框架web结构java编程计算机网页

一、源码特点 java 高校学籍管理系统是一套完善的完整信息系统&#xff0c;结合java web开发和bootstrap UI框架完成本系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 css jq…

最优算法100例之33-数据流的中位数

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 中位数是有序列表中间的数。如果列表长度是偶数,中位数则是中间两个数的平均值。 例如, [2,3,4] 的中位数是 3 [2,3] 的中位…

对PAC的侧信道攻击

PAC存不存在安全性问题&#xff1f;侧信道攻击&#xff1f;本博客探讨这些问题。

达梦DMHS-Manager工具安装部署

目录 1、前言 1.1、平台架构 1.2、平台原理 2、环境准备 2.1、硬件环境 2.2、软件环境 2.3、安装DMHS 2.3.1、源端DMHS前期准备 2.3.2、源端DMHS安装 2.3.3、目的端DMHS安装 3、DMHS-Manager客户端部署 3.1、启动dmhs web服务 3.2、登录web管理平台 4、添加DMHS实…

手搓Docker-Image-Creator(DIC)工具(03):实现alpine+jre的镜像

此篇博客将介绍如何使用 Docker 创建一个alpine3.10-jre1.8.0_401 的 Docker 镜像&#xff0c;并使用 Docker 运行起来。将用到 Dockerfile 的 COPY 命令、RUN 命令、ENV 命令&#xff0c;最终实现基于单一应用的 Dockerfile 构建镜像和运行。 紧急修改&#xff1a;代码我是在m…