【Web前端开发基础】CSS的盒子模型

CSS的盒子模型

一、学习目标

  1. 能够认识不同选择器的优先级公式
  2. 能够进行CSS权重叠加计算,分析并解决CSS 冲突问题
  3. 能够认识盒子模型的组成部分
  4. 能够掌握盒子模型的边框、内边距、外边距的作用及简写形式
  5. 能够计算盒子的实际大小
  6. 能够了解外边距折叠现象,并知道如何解决盒子塌陷问题

二、文章内容

2.1 CSS三大特性

目标:能认识不同选择器的优先级公式,能够进行CSS权重叠加计算,分析并解决CSS 冲突问题

2.1.1 优先级

特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级的公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <
!important

注意点:

  1. !important写在属性值的后面,分号的前面
  2. !important不能提升继承的优先级,只要是继承,优先级最低!!
  3. 实际开发过程中不建议使用!important

2.1.2 权重叠加计算公式

  • 场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生

  • 权重叠加计算公式:(每一级之间不存在进位)
    在这里插入图片描述

  • 比较规则:

    1. 先比较第一级数字,如果比较出来了,之后的统统不看
    2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
    3. ……
    4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
  • 注意点:!important如果不是继承,则权重最高,天下第一!

2.1.3 权重叠加计算案例

  • 权重计算题的解题步骤
    1. 先判断选择器是否能直接选中标签,如果不能直接选中 → 是继承,优先级最低 → 直接pass
    2. 通过权重计算公式,判断谁权重最高
  • 注意点:实际开发中选择标签需要精准,尽量避免多个选择器同时选中一个标签的情况,不要自己难为自己

2.2 Chrome调试工具查错流程

遇到样式出不来,要学会通过调试工具找错!!!
在这里插入图片描述

2.3 PxCook的基本使用

目标:能够使用 PxCook 工具测量设计图的尺寸和颜色,能够从psd文件中直接获取数据

  1. 通过软件打开设计图
    ① 打开软件 ② 拖拽入设计图 ③ 新建项目
  2. 常用快捷键
    放大设计图:ctrl + +
    缩小设计图:ctrl + -
    移动设计图:空格按住不放,鼠标拖动
  3. 常用工具 (量尺寸、吸颜色)
  4. 从psd文件中直接获取数据
    切换到开发界面,直接点击获取数据

2.4 盒子模型

目标:能够认识盒子模型的组成,能够掌握盒子模型边框、内边距、外边距的设置方法

2.4.1 盒子模型的介绍

  1. 盒子的概念
    页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
    浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称
    之为盒子
  2. 盒子模型
    CSS 中规定每个盒子分别由:
    内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin )
    构成,这就是盒子模型
  3. 记忆:可以联想现实中的包装盒
    在这里插入图片描述

2.4.2 内容的宽度和高度

  • 作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
  • 属性:width / height
  • 常见取值:数字 + px
    在这里插入图片描述

2.4.3 边框(border)

  1. 边框(border)- 单个属性

    • 作用:设置边框粗细、边框样式、边框颜色效果
    • 单个属性
      在这里插入图片描述
  2. 边框(border)- 连写形式

    • 属性名:border
    • 属性值:单个取值的连写,取值之间以空格隔开
      如:border : 10px solid red;
    • 快捷键:bd + tab
  3. 边框(border)- 单方向设置

    • 场景:只给盒子的某个方向单独设置边框
    • 属性名:border-方位名词
    • 方位名词:top right bottom left
    • 属性值:连写的取值
  4. 盒子实际大小初级计算公式

    • 注意点:
      ① 设置width和height是内容的宽高!
      ② 设置border会撑大盒子

    • 盒子实际大小初级计算公式:

      • 盒子宽度 = 左边框 + 内容高度 + 右边框
      • 盒子高度 = 上边框 + 内容高度 + 下边框
        在这里插入图片描述
    • 当盒子被border撑大后,如何满足需求?

      • 解决1:计算多余大小,手动在内容中减去(手动内减)
      • 解决2:设置box-sizing: border-box;即可
  5. 边框的应用

    • border可以实现有样式的分割线
  <div class="line"></div><style>.line {width: 500px;border-top: 1px solid blue;}</style>
  • border 可以实现各种箭头,例如,实现向下的箭头
<div class="arrow"></div>
<style>
.arrow {
/* 内容宽高为0,只显示边框 */
width: 0px;
height: 0px;
box-sizing: content-box;
border: 15px solid;
/* 只有上边框显示颜色,其他三个方向透明,形成向下的箭头 */
border-color: black transparent transparent transparent;
}
</style>

2.4.4 内边距(padding)

  1. 内边距(padding)- 取值
    • 作用:设置边框与内容区域之间的
    • 属性名:padding
    • 常见取值:
      在这里插入图片描述
    • 记忆规则:先从上开始赋值,然后顺时针赋值,如果没有赋值的???看对面的!!!
  2. 内边距(padding)- 单方向
  • 场景:只给盒子的某个方向单独设置内边距
  • 属性名:padding-方位名词
  • 方位名词:top right bottom left
  • 属性值:数字 + px
  1. 盒子实际大小终极计算公式
    • 注意点:
      ① 设置width和height是内容的宽高!
      ② 设置border会撑大盒子
      ③ 设置padding会撑大盒子
    • 盒子实际大小终极计算公式:
      • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
      • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
        在这里插入图片描述
  • 解决:当盒子被border和padding撑大后,如何满足需求?
    解决1:自己计算多余大小,手动在内容中减去(手动内减)
    解决2:设置box-sizing: border-box;即可
  1. 不会撑大盒子的特殊情况(块级元素)
    ① 如果盒子没有设置宽度,此时宽度默认是父元素的宽度
    ② 此时给盒子设置左右的padding或者左右的border此时不会撑大盒子
  2. CSS3盒模型(自动内减)
    • 需求:给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
    • 解决方法 ① :手动内减
      • 操作:自己计算多余大小,手动在内容中减去
      • 缺点:项目中计算量太大,很麻烦
    • 解决方法 ② :自动内减
      • 操作:给盒子设置属性 box-sizing : border-box
      • 优点:浏览器会自动计算多余大小,自动在内容中减去

2.4.5 外边距(margin)

  1. 外边距(margin)- 取值

    • 作用:设置边框以外,盒子与盒子之间的距离
    • 属性名:margin
    • 常见取值:
      在这里插入图片描述
    • 记忆规则:先从上开始赋值,然后顺时针赋值,如果没有赋值的???看对面的!!!
  2. 外边距(margin)- 单方向设置

    • 场景:只给盒子的某个方向单独设置外边距
    • 属性名:margin - 方位名词
    • 属性值:数字 + px
  3. margin单方向设置的应用
    在这里插入图片描述

  4. 清除默认内外边距

    • 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
      • 比如:body标签默认有margin:8px
      • 比如:p标签默认有上下的margin
      • 比如:ul标签默认由上下的margin和padding-left
      • ……
    • 解决方法
/* 淘宝代码 */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3,
h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul
{
margin: 0;
padding: 0;
}
/* 京东代码 */
* {
margin: 0;
padding: 0;
}
  1. 外边距正常情况
    • 场景:水平布局的盒子,左右的margin正常,互不影响
    • 结果:最终两者距离为左右margin的和
  2. 外边距折叠现象 – ① 合并现象
    • 场景:垂直布局的块级元素,上下的margin会合并
    • 结果:最终两者距离为margin的最大值
    • 解决方法:避免就好,只给其中一个盒子设置margin即可
  3. 外边距折叠现象 – ② 塌陷现象
    • 场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
    • 结果:导致父元素一起往下移动
    • 解决方法:
      1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
      2. 给父元素设置overflow:hidden
      3. 转换成行内块元素
      4. 设置浮动
  4. 行内元素的margin和padding无效的情况
    • 场景:给行内元素设置margin和padding时
    • 结果:
      1. 水平方向的margin和padding布局有效!
      2. 垂直方向的margin和padding布局无效!

2.4.6 box-sizing属性

box-sizing属性决定了盒子的计算方式,取值如下:

  1. content-box(默认取值)
    此时width和height指内容的宽度和高度,border和padding不计入width和height之内
    盒子的总宽度 = width + padding + border + margin
    盒子的总高度 = height + padding + border + margin
  2. padding-box
    此时width和height包含内容和padding
    盒子的总宽度 = width + border + margin
    盒子的总高度 = width + border+ margin
  3. border-box(开发中经常用到)
    此时width和height包含内容和padding、border
    盒子的总宽度 = width + margin
    盒子的总高度 = width + margin

三、综合案例

3.1 综合案例:新浪导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清除标签默认的margin和padding */* {margin: 0;padding: 0;}.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.box a {display: inline-block;/* width: 80px; */height: 40px;/* 通过内边距设置边框与内容的间距 */padding: 0 20px;color: #4c4c4c;text-decoration: none;text-align: center;line-height: 40px;font-size: 12px;}.box a:hover {background-color: #edeef0;color: #ff8400;}</style>
</head>
<body><div class="box"><a href="#">新浪导航</a><a href="#">新浪导航新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div>
</body>
</html>

在这里插入图片描述

3.2 综合案例:网页新闻列表案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清除标签默认的margin和padding */* {margin: 0;padding: 0;}body {/* 去除行高带来的默认间隙,完成精准布局 */line-height: 1;}.box {width: 500px;height: 400px;/* background-color: pink; */border: 1px solid #ccc;padding: 41px 30px 0;/* 自动内减 */box-sizing: border-box;}.box h2 {height: 41px;/* background-color: pink; */border-bottom: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;font-size: 30px;}.box ul {list-style: none;}.box ul li {height: 50px;padding-left: 30px;border-bottom: 1px dashed #ccc;line-height: 50px;}.box li a {text-decoration: none;font-size: 18px;color: #666;}</style>
</head>
<body><div class="box"><h2>最新文章/New Articles</h2><ul><li><a href="#">北京招聘网页设计,平面设计,php</a></li><li><a href="#">体验javascript的魅力</a></li><li><a href="#">jquery世界来临</a></li><li><a href="#">网页设计师的梦想</a></li><li><a href="#">jquery中的链式编程是什么</a></li></ul></div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

Linux用户空间和内核空间所有15种内存分配方法

在Linux操作系统中&#xff0c;内存管理是一个关键的系统功能。用户空间和内核空间分别使用不同的函数来申请内存。以下是用户空间和内核空间内存申请函数的详细列表&#xff1a; Linux用户空间内存申请函数 1. malloc() 函数&#xff1a; void* malloc(size_t size); 用于…

在IDEA中使用快捷键让XML注释更加规范

Setting -> Editor -> Code Style -> XML 取消勾选 Line comment at first column 这样我们在使用ctrl / 快速注释时&#xff0c;就可以让注释符号紧贴注释内容&#xff0c;不出现空格。

如何唯一标识一个进程

如何唯一标识一个进程 进程ID (PID)&#xff1a; 每个运行中的进程都有一个全局唯一的整数标识符&#xff0c;称为进程ID&#xff08;Process ID&#xff09;。PID由内核分配&#xff0c;并在整个系统范围内保持唯一。 在shell中输入echo $$来查看当前shell的进程ID&#xf…

java 中 Iterator 与Iterable的作用

如果需要按照元素的自然顺序进行排序&#xff0c;应该使用哪个集合类&#xff1f; 如果需要按照元素的自然顺序进行排序&#xff0c;应该使用TreeSet或TreeMap集合类。 TreeSet&#xff1a;TreeSet 是一个有序的集合&#xff0c;它会使用元素的自然顺序对元素进行排序&#xf…

ip_vs 的管理以及 keepalived + lvs 案例

ip_vs 的管理 ipvsadm 与 keepalived for lvs ipvsadm 命令及参数介绍 部署和配置LVS服务会经常用到一些命令&#xff0c;如ipvsadm&#xff0c;可以使用“ipvsadm -help”命令查看使用帮助。 ipvsadm 命令的常用参数及其说明如下&#xff1a; # 添加虚拟服务器# 语法&#x…

PLC从HTTP服务端获取JSON文件,解析数据到寄存器

智能网关IGT-DSER集成了多种PLC协议&#xff0c;方便实现各种PLC与HTTP服务端之间通讯。通过网关的参数配置软件绑定JSON文件的字段与PLC寄存器地址&#xff0c;配置URL&#xff0c;即可采用POST命令&#xff0c;将JSON文件提交给HTTP的服务端&#xff1b; 服务端有返回的JSON&…

【JavaEE】认识网络的工作原理

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

66 C++对象模型探索。C++编译器在什么时候给我们创建默认的构造函数?

一 前提&#xff0c;关于C编译器给我们生成 默认构造函数 的错误认知 传统知识认为&#xff1a;如果在一个类中&#xff0c;我们没有定义任何的构造函数&#xff0c;那么编译器会为我们隐式自动定义一个默认的构造函数&#xff0c;我们称这种构造函数为 "合成的默认构造函…

德思特方案|EMI兼容测试方案——匹配不同测试标准,准确高效!

方案背景 近场测试非常适合产品开发阶段辐射发射的EMI预兼容测试。在EMC测试中&#xff0c;进行辐射发射测试时&#xff0c;通常天线离被测物EUT很远&#xff0c;进行的都是远场测量。标准的远场辐射发射测试&#xff0c;可以准确定量的告诉我们被测件是否符合相应的EMC/EMI标…

网络工程师:新兴科技基础知识面试题(十三)

112.对区块链的理解与看法&#xff1f; 区块链是一种分布式的、公开透明的数据库技术&#xff0c;以区块的形式将交易数据进行链式连接。它通过去中心化的方式&#xff0c;将数据存储和交易验证的权力分散给网络中的多个节点&#xff0c;提供了一种安全、可信的数据交换和存储方…

case语句、case分支应用示例、函数及中断控制、字符串截取、替换、删除

1 案例1&#xff1a;中断及退出 1.1 问题 本案例要求编写两个Shell脚本&#xff0c;相关要求如下&#xff1a; 从键盘循环取整数&#xff08;0结束&#xff09;并求和&#xff0c;输出最终结果 1.2 方案 通过break、continue、exit在Shell脚本中实现中断与退出的功能。 e…

SpringCloudConfig+SpringCloudBus+Actuator+Git实现Eureka关键配置属性热更新(全程不重启服务)

文章目录 前言1.痛点2.解决方案3.具体实现3.1搭建热配置服务3.2编写配置文件3.3搭建版本控制仓库3.4Eureka-Client引入以下依赖3.5Eureka-Client微服务编写以下配置bootstrap.yml提前加载3.6分别编写测试Controller3.7测试效果3.8下线场景压测 4.SpringCloudBus优化 前言 在上…

vue组件间通信

Vue组件之间通信方式有哪些 一、父子组件通讯 1、props&#xff0c;emit 父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件&#xff0c;使父组件可以获得事件函数传递过来的形参。 2、$parent、$children、ref 父组件可以通过 c h i l d r e n 获取…

imgaug库图像增强指南(32):塑造【雪景】效果的视觉魔法

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

我的项目管理工具TaskSaas

这次使用的技术是Python的Django框架,以及Django框架自带的前端模版语法. Open-TaskSaas: 项目、学习管理工具 项目已经开源,但我在此基础上已经开始更新Vue3Springboot版本,也希望喜欢开源和学习的小伙伴共同加入进来! 基本的样式,操作,都从线上环境可以看得到了! 首页 测…

Django(九)

1. 用户登录-Cookie和Session 什么是cookie和session&#xff1f; 发送HTTP请求或者HTTPS请求(无状态&短连接) http://127.0.0.1:8000/admin/list/ https://127.0.0.1:8000/admin/list/http无状态短连接&#xff1a;一次请求响应之后断开连接&#xff0c;再发请求重新连…

PCB导线阻抗概念

1. 计算公式 https://baijiahao.baidu.com/s?id1750340479004609055&wfrspider&forpc Z087/SQRT(εr1.41)ln[(5.98h)/(0.8wt)] 常规来说阻抗与介电常数成反比,与介质层厚度成正比,与线宽成反比,与铜厚成反比。 Z0&#xff1a;印刷导线的特性阻抗 εr&#xff1a;绝缘…

RK3568笔记十:Zlmediakit交叉编译

若该文为原创文章&#xff0c;转载请注明原文出处。 编译Zlmediakit的主要目的是想实现在RK3568拉取多路RTPS流&#xff0c;并通过MPP硬解码&#xff0c;DRM显示出来。为了实现拉取多路流选择了Zlmediakit,使用FFMEPG也可以&#xff0c;在RV1126上已经验证了可行性。 一、环境…

CPU和GPU的工作原理及区别

CPU&#xff08;Central Processing Unit&#xff09;和GPU&#xff08;Graphics Processing Unit&#xff09;是计算机系统中的两种主要处理器类型&#xff0c;它们在工作原理和用途上有一些显著的区别。 CPU&#xff08;中央处理器&#xff09; 工作原理&#xff1a; 通用…

CEF框架中的一些宏定义(一):CHECK DCHECK

文章目录 CHECK & DCHECKDCHECK_IS_ON 日志相关COMPACT_GOOGLE_LOG_FATALLogMessageLOG_STREAM(FATAL)LAZY_STREAMLogMessageVoidify 在CEF框架中&#xff0c;有很多的宏定义&#xff0c;有必要拿出来说一说&#xff0c;在阅读源码的时候更好的理解。 CHECK & DCHECK …