【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.rhkb.cn/news/304987.html

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

相关文章

Unity 九宫格

1. 把图片拖拽进资源文件夹 2.选中图片,然后设置图片 3.设置九宫格 4.使用图片,在界面上创建2个相同的Image,然后使用图片,修改Image Type 为Sliced

前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 涵盖了两个综合案例 做到了基础学得会,实战写的出

点击前往前端开发基础专栏: 文章目录 HTML5 CSS3 开发一、开发环境搭建下载 VS Code1. 2 插件的下载1.3 项目和文件的下载 二、 什么是 HTML2.1 标签的语法2.2 代码演示:2.3 小结 三 、HTML基本骨架3.1 快捷键生成HTML骨架3.2 代码展示3.3 小结 四、标…

第十四讲:C语言字符函数和字符串函数

目录 1. 字符分类函数 2、字符转换函数 3. strlen的使⽤和模拟实现 4. strcpy 的使⽤和模拟实现 5. strcat 的使⽤和模拟实现 6. strcmp 的使⽤和模拟实现 7. strncpy 函数的使⽤ 8. strncat 函数的使⽤ 9. strncmp函数的使⽤ 10. strstr 的使⽤和模拟实现 11. strt…

Redis的持久化

目录 一、RDB(Redis DataBase) 二、AOF(Append Only File) Redis 是内存数据库,如果不将内存中的数据库状态保存到磁盘,那么一旦服务器进程退出,服务器中 的数据库状态也会消失。所以 Redis 提供…

从文字到思维:呆马GPT在人工智能领域的创新之旅

引言 生成式预训练变换器(Generative Pre-trained Transformer,简称GPT)领域是人工智能技术中的一大革新。自OpenAI推出第一代GPT以来,该技术经历了多代发展,不断提升模型的规模、复杂度和智能化程度。GPT模型通过在大…

【Linux】vim 编辑器

Linux 系统自带了 gedit 和 vi 编辑器,gedit 是图形化界面的操作,而 vi 由比较难用,所以建议安装 vim 编辑器,vim 是从 vi 发展出来的一个文本编辑器,相当于增强版的 vi ,其代码补完、编译及错误跳转等功能…

从路由器syslog日志监控路由器流量

路由器是关键的网络基础设施组件,需要随时监控,定期监控路由器可以帮助管理员确保路由器通信正常。日常监控还可以清楚地显出通过网络的流量,通过分析路由器流量,安全管理员可及早识别可能发生的网络事件,从而避免停机…

负荆请罪将相和之后的廉颇蔺相如,下场如何?

“将相和”的故事相信许多人都听说过, 这个故事来自于司马迁的《史记》,并被许多版本的语文教科书所收录,而“完璧归赵”“负荆请罪”等成语也都是出自这个故事。但是这个故事并没有讲“将相和”之后的内容,实际上,蔺相…

C语言面试题之合法二叉搜索树

合法二叉搜索树 实例要求 实现一个函数,检查一棵二叉树是否为二叉搜索树; 示例 1: 输入:2/ \1 3 输出: true 示例 2: 输入:5/ \1 4/ \3 6 输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 ,但是其右子节点值为 4 …

VS2022使用属性表快速设置OpenCV工程属性

1.创建C控制台应用 2.配置工程 3.打开工程后,为工程添加属性表 打开属性管理器窗口,选择Debug|x64 然后右击选择添加新的项目属性表 并命名为opencv490_debug_x64 点击添加 Debug版本属性表添加成功 使用相同方法添加Release版本属性表 双击debug版本属性表并添加包含目录 添…

90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装)

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

Github第一Star数的国产免费开源防火墙--雷池社区版初步体验

前言 近期准备搭建一个博客网站,用来存储工作室同学们的学习笔记。服务器准备直接放在公网上,方便大家随时随地的上传和浏览,为了防止网站被人日穿成为肉鸡,一些防御措施还是要部署的。 首先明确自己的需求: 零成本…

【Python】控制台进度条

在Python开发中,有时需要向用户展示一个任务的进度,以提供更好的交互体验。下面我将展示如何使用Python来创建一个简单的控制台进度条。 效果: 代码: import time import sys def print_progress_bar(completed, total, length…

Windows搭建Jellyfin影音服务结合内网穿透实现公网访问本地视频文件

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及,各种各样的使用需求也被开发出来&…

【Web】NSSRound#1-20 Basic 刷题记录(全)

目录 [NSSRound#1 Basic]basic_check [NSSRound#1 Basic]sql_by_sql [NSSCTF 2nd]php签到 [NSSCTF 2nd]MyBox [NSSCTF 2nd]MyBox(revenge) [NSSCTF 2nd]MyHurricane [NSSCTF 2nd]MyJs [NSSRound#3 Team]This1sMysql [NSSRound#3 Team]path_by_path [NSSRound#…

二叉树应用——最优二叉树(Huffman树)、贪心算法—— Huffman编码

1、外部带权外部路径长度、Huffman树 从图中可以看出,深度越浅的叶子结点权重越大,深度越深的叶子结点权重越小的话,得出的带权外部路径长度越小。 Huffman树就是使得外部带权路径最小的二叉树 2、如何构造Huffman树 (1&#xf…

【Python-MP4文体提取】

Python-MP4文体提取 ■ pip 和 setuptools工具■ OpenCV和Tesseract■ Tesseract OCR V5.0安装教程(Windows)■ 1. 运行程序出现如下问题:我们需要安装Tesseract OCR■ 2. 下载Tesseract-OCR■ 3. 安装Tesseract-OCR■ 4. 添加到环境变量的系…

Golang中的上下文-context包的简介及使用

文章目录 简介context.Background()上下文取消函数上下文值传递建议Reference 简介 Go语言中的context包定义了一个名为Context的类型,它定义并传递截止日期、取消信号和其他请求范围的值,形成一个链式模型。如果我们查看官方文档,它是这样说…

Ollama利用嵌入模型实现RAG应用

Ollama支持embedding models嵌入模型,从而支持RAG(retrieval augmented generation)应用,结合文本提示词,检索到文档或相关数据。嵌入模型是通过训练生成向量嵌入,这是一长串数字数组,代表文本序…

练习 21 Web [GXYCTF2019]BabySQli

SQL联合查询,注意有源码看源码,Base64以及32的区别,MD5碰撞 打开后有登录框,先随意登录尝试 只有输入admin才是返回wrong pass! 其他返回wrong user 所以用户名字段一定要输入admin 养成好习惯,先查看源码…