【CSS】CSS三大特性、盒子模型

目录

CSS三大特性

1、层叠性

2、继承性

3、优先级

盒子模型

1、网页布局的本质

2、盒子模型（Box Model）组成

3、边框（border）

3.1、边框的使用

3.2、表格的细线边框

3.3、边框会影响盒子实际大小

4、内边距（padding）

4.1、内边距的使用方式

4.2、内边距会影响盒子实际大小

5、外边距（margin）

5.1、外边距的使用方式

5.2、外边距典型应用

5.3、外边距合并

5.4、清除内外边距


⭐CSS三大特性

1、层叠性

​相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

​ 层叠性原则:

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

  • 样式不冲突，不会层叠

2、继承性

​CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：

​ （text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

 body {font:12px/1.5 Microsoft YaHei；}

  • 行高可以跟单位也可以不跟单位

  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5

  • 此时子元素的行高是：当前子元素的文字大小 * 1.5

  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性

  • 选择器不同，则根据选择器权重执行

选择器优先级计算表格：

优先级注意点:

  1. 权重是有4组数字组成,但是不会有进位。

  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

  4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.

  5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

  • div ul li ------> 0,0,0,3

  • .nav ul li ------> 0,0,1,2

  • a:hover -----—> 0,0,1,1

  • .nav a ------> 0,0,1,1

⭐盒子模型

1、网页布局的本质

网页布局的核心本质： 就是利用 CSS 摆盒子。

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

  2. 利用 CSS 设置好盒子样式，然后放置到相应位置。

  3. 向盒子里面补充内容

2、盒子模型（Box Model）组成

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

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

3、边框（border）

3.1、边框的使用

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

2、语法：

 border : border-width || border-style || border-color;  

边框样式 border-style 可以设置如下值：

  • none：没有边框即忽略所有边框的宽度（默认值）

  • solid：边框为单实线(最为常用的)

  • dashed：边框为虚线

  • dotted：边框为点线

3、边框的合写分写

边框简写：

 border: 1px solid red;  

边框分开写法：

 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */  
3.2、表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

 border-collapse:collapse;

collapse 单词是合并的意思

border-collapse: collapse; /*表示相邻边框合并在一起*/

3.3、边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

  • 测量盒子大小的时候,不量边框。

  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

4、内边距（padding）

4.1、内边距的使用方式

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

2、语法：

合写属性：

分写属性：

4.2、内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了两个改变：

  1. 内容和边框有了距离，添加了内边距。

  2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

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

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

3、解决方案：

  • ​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

5、外边距（margin）

5.1、外边距的使用方式

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

5.2、外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

  • 盒子必须指定了宽度（width）。

  • 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

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

5.3、外边距合并

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

主要有两种情况:

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

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

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

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

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

解决方案：

  • 可以为父元素定义上边框。

  • 可以为父元素定义上内边距。

  • 可以为父元素添加 

    overflow:hidden
5.4、清除内外边距

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

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

​ 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

____________________

⭐感谢你的阅读，希望本文能够对你有所帮助。如果你喜欢我的内容，记得点赞关注收藏我的博客，我会继续分享更多的内容。⭐

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

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

相关文章

通过前缀和来看golang的acm输入输出

通过前缀和来看golang的acm输入输出

前缀和 问题引入 package mainimport ("fmt" )func main() {var n, q, l, r intfmt.Scan(&n, &q)a : make([]int, n)ap : make([]int64, n 1)ap[0] 0for i : 0; i < n; i {fmt.Scan(&a[i])ap[i 1] ap[i] int64(a[i])}for j : 0; j < q; j {f…
阅读更多...
创建型模式--1.单例模式【巴基速递】

创建型模式--1.单例模式【巴基速递】

1. 巴基的订单 在海贼世界中&#xff0c;巴基速递是巴基依靠手下强大的越狱犯兵力&#xff0c;组建的集团海贼派遣公司&#xff0c;它的主要业务是向世界有需要的地方输送雇佣兵&#xff08;其实是不干好事儿&#xff09;。 自从从特拉法尔加罗和路飞同盟击败了堂吉诃德家族 &…
阅读更多...
【ArcGIS学习笔记】ArcMap打开就卡在文档加载界面好久不动，打开很慢，要好长时间

【ArcGIS学习笔记】ArcMap打开就卡在文档加载界面好久不动，打开很慢，要好长时间

Arcmap之前用得好好&#xff0c;后来打开就卡在文档加载界面&#xff0c;然后界面就关闭了&#xff1f; - 知乎针对这一情况&#xff0c;主要有下面五种解决方法。其中&#xff0c;对于大部分用户而言&#xff0c;前两种方法大概率是可以解决问题的&#xff1b;…https://www.z…
阅读更多...
RocketMQ的docker安装和SpringBoot的集成

RocketMQ的docker安装和SpringBoot的集成

1.Docker安装 1.1创建docker-compose.yml文件 version: 3.5 services:rmqnamesrv:image: foxiswho/rocketmq:servercontainer_name: rmqnamesrvports:- 9876:9876networks:rmq:aliases:- rmqnamesrvrmqbroker:image: foxiswho/rocketmq:brokercontainer_name: rmqbrokerports…
阅读更多...
C++模板初阶(个人笔记)

C++模板初阶(个人笔记)

模板初阶 1.泛型编程2.函数模板2.1函数模板的实例化2.2模板参数的匹配规则 3.类模板3.1类模板的实例化 1.泛型编程 泛型编程&#xff1a;编写与类型无关的通用代码&#xff0c;是代码复用的一种手段。模板是泛型编程的基础。 //函数重载 //交换函数的逻辑是一致的&#xff0c…
阅读更多...
SpringBoot学习笔记四

SpringBoot学习笔记四

SpringBoot学习笔记四-监听机制 1. SpringBoot监听器1.1 无需配置1.1.1 CommandLineRunner使用1.1.2 ApplicationRunner的使用1.1.3 CommandLineRunner与ApplicationRunner的区别 1.2 需要创建META-INF文件&#xff0c;并在其中创建spring.factories&#xff0c;配置相关的信息…
阅读更多...
【CSDN创作优化2】内嵌图片 `＜img＞` 标签`height`和`width`属性

【CSDN创作优化2】内嵌图片 `＜img＞` 标签`height`和`width`属性

【CSDN创作优化2】内嵌图片 标签height和width属性 写在最前面<img> 标签简介控制图像尺寸&#xff1a;height和width属性实例为什么要指定height和width注意事项 使用百分比进行响应式设计小结 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字…
阅读更多...
【赛题】2024年“认证杯”数模网络挑战赛赛题发布

【赛题】2024年“认证杯”数模网络挑战赛赛题发布

2024年"认证杯"数学建模网络挑战赛——正式开赛&#xff01;&#xff01;&#xff01; 赛题已发布&#xff0c;后续无偿分享各题的解题思路、参考文献、完整论文可运行代码&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛题。祝大家都能取得一个好成…
阅读更多...
[dvwa] file upload

[dvwa] file upload

file upload 0x01 low 直接上传.php 内容写<? eval($_POST[jj]);?> 用antsword连 路径跳两层 0x02 medium 添加了两种验证&#xff0c;格式为图片&#xff0c;大小限制小于1000 上传 POST /learndvwa/vulnerabilities/upload/ HTTP/1.1 Host: dvt.dv Content-Le…
阅读更多...
WORD——效率提升10倍的18个神操作

WORD——效率提升10倍的18个神操作

1、万能F4键 在Word中F4 键的功能是重复上一步操作&#xff0c;也就说上一步你做了什么操作&#xff0c;只要按F4键&#xff0c;它就会自动帮你重来一次。比如&#xff0c;合并单元格&#xff0c;你再也不用反复去点合并按钮&#xff0c;只要合并第一个单元格后&#xff0c;剩…
阅读更多...
四种算法（麻雀搜索算法SSA、螳螂搜索算法MSA、红尾鹰算法RTH、霸王龙优化算法TROA）求解机器人路径规划（提供MATLAB代码）

四种算法（麻雀搜索算法SSA、螳螂搜索算法MSA、红尾鹰算法RTH、霸王龙优化算法TROA）求解机器人路径规划（提供MATLAB代码）

一、机器人路径规划介绍 移动机器人&#xff08;Mobile robot&#xff0c;MR&#xff09;的路径规划是 移动机器人研究的重要分支之&#xff0c;是对其进行控制的基础。根据环境信息的已知程度不同&#xff0c;路径规划分为基于环境信息已知的全局路径规划和基于环境信息未知或…
阅读更多...
第06章 网络传输介质

第06章 网络传输介质

6.1 本章目标 了解双绞线分类和特性了解同轴电缆分类和特性了解光纤分类和特性了解无线传输介质分类和特性 6.2 传输介质分类 现在社会还是以有线介质为主 计算机通信 - 有线通信 - 无线通信有线通信传输介质 - 双绞线 - 同轴电缆 - 光导纤维无线通信 - 卫星 - 微波 - 红外…
阅读更多...
【SpringBoot】-- 项目实现微信公众号扫码登录

【SpringBoot】-- 项目实现微信公众号扫码登录

目录 一、业务需求 二、内网穿透 三、服务器配置 ​编辑 四、依赖引入 pom.xml 五、验证服务器有效性 代码 controller类 SHA1工具类 六、用户订阅后自动回复消息 代码 controller类 MessageUtil工具类 七、用户发送文本消息后回复消息 代码 controller类 八、…
阅读更多...
基于SpringBoot+Vue的工厂生产设备维护管理系统（源码+文档+部署+讲解）

基于SpringBoot+Vue的工厂生产设备维护管理系统（源码+文档+部署+讲解）

一.系统概述 随着社会的发展&#xff0c;系统的管理形势越来越严峻。越来越多的用户利用互联网获得信息&#xff0c;但各种信息鱼龙混杂&#xff0c;信息真假难以辨别。为了方便用户更好的获得工厂生产设备维护信息&#xff0c;因此&#xff0c;设计一种安全高效的工厂生产设备…
阅读更多...
示波器接上机器板子信号就正常工作，拿下来就机器不正常工作

示波器接上机器板子信号就正常工作，拿下来就机器不正常工作

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 送给大学毕业后找不到奋斗方向的你&#xff08;每周不定时更新&#xff09; 【牛客网】构建从学习到职业的良性生态圈 中国计算…
阅读更多...
Windows系统安装WinSCP结合内网穿透实现公网远程SSH本地服务器

Windows系统安装WinSCP结合内网穿透实现公网远程SSH本地服务器

List item 文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本…
阅读更多...
一文读懂RISC-V与ARM

一文读懂RISC-V与ARM

RISC-V和ARM是近年来备受关注的两种处理器架构。RISC-V是一种基于精简指令集计算(RISC)原理的开源指令集架构(ISA)&#xff0c;而ARM是一种专有ISA&#xff0c;由于其长期存在于嵌入式系统和移动设备中&#xff0c;已成为嵌入式系统和移动设备的主导选择。市场以及多年积累的信…
阅读更多...
前端开发攻略---利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？

前端开发攻略---利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？

1、演示 2、flex布局 Flex布局是一种用于Web开发的弹性盒子布局模型&#xff0c;它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法&#xff1a; 容器属性&#xff1a; display: flex;&#xff1a;将容器指定为Flex布局。flex-dire…
阅读更多...
Realme GT Neo6 SE ROOT 解锁BL教程

Realme GT Neo6 SE ROOT 解锁BL教程

Realme GTNeo6 SE 解锁ROOT教程 前言&#xff1a; 本文解锁BL教程以及深度测试APP来自Realme官方社区。相关操作流程已进行简化&#xff0c;工具由本人制作并提供&#xff0c;降低上手难度&#xff0c;傻瓜式操作&#xff08;工具长期免费更新&#xff09;。 正文&#xff1a…
阅读更多...
Python docx：在Python中创建和操作Word文档

Python docx：在Python中创建和操作Word文档

使用docx库&#xff0c;可以执行各种任务 创建新文档&#xff1a;可以使用库从头开始或基于模板生成新的Word文档。这对于自动生成报告、信函和其他类型的文档非常有用。修改现有文档&#xff1a;可以打开现有的Word文档&#xff0c;并使用库修改其内容、格式、样式等。这对于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023