5_CSS三大特性盒子模型

第5章-盒子模型【比屋教育】

本课目标(Objective)

  • 掌握CSS三大特性
  • 理解什么是盒子模型
  • 掌握内边距padding的用法
  • 掌握外边距margin的用法

1. CSS的层叠,继承,优先级

1.1 CSS层叠
  • 层叠:是指多个CSS样式叠加到同一个元素,遵循从上到下的原则,会应用最后加载的样式。

  • 案例:1.样式的重叠性.html

1.2 CSS继承
  • 继承:子元素会继承父元素的样式,继承的好处就是可以代码复用。

  • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性

  • 案例:2.样式的继承性.html

1.3 CSS优先级(重点)
  • 当出现多个规则应用在同一元素上时,选择器属性不同,就会出现优先级的问题。

1 权重计算公式

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)

标签选择器计算权重公式
继承的权重最低0,0,0,0
标签选择器0,0,0,1
类,伪类0,0,1,0
唯一ID0,1,0,0
行内联样式 style=""1,0,0,0
!important最高权重
!important用法:
div {color: red!important;
}
  • 案例:3.样式的优先级.html

2 权重叠加
  • 多个基础选择器组合时就会出现权重叠加的情况

  • 案例:4.权重叠加.html

3. 继承的权重
  • 继承的权重是最低的。

  • 案例:5.继承的权重.html

2.网页如何布局

  • 网页布局的本质:

    • 首先用CSS设置好盒子(DIV)的大小,然后摆放盒子的位置。

    • 最后把网页元素比如文字图片等等,放入盒子里面。

3. 什么是盒子模型

  • 浏览器中的盒子模型(DIV)

  • 案例:06-盒子边框设置1.html

  • 盒子模型案例:

4. 盒子边框设置 

  • 语法:

border : border-width || border-style || border-color
属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框颜色
  • 边框的样式:

    • none:没有边框即忽略所有边框的宽度(默认值)

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

    • dashed:边框为虚线

    • dotted:边框为点线

4.1 边框综合设置
border-bottom: 2px solid yewllo;
4.2 盒子边框写法总结表
  • 可以单独给4个边框分别指定的。

  • 案例:07-盒子边框设置2.html

上边框下边框左边框右边框
border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;
border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;
border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;
border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;

5. 内边距(padding)

4.1 内边距:
  • padding属性用于设置内边距。 表示边框与内容之间的距离。

  • 指定padding值之后

    • 内容和边框有了距离,添加了内边距。

    • 盒子会被撑大

4.2 内边距属性设置
属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
  • 简写表达方式:

值的个数表达意思
1个值padding:上下左右内边距;
2个值padding: 上下内边距 左右内边距 ;
3个值padding:上内边距 左右内边距 下内边距;
4个值padding: 上内边距 右内边距 下内边距 左内边距 ;

  • 案例:08.内边距设置.html

4.3 课堂案例: 网页导航制作
  • 案例:09.网页导航案例.html

4.4 盒子实际的大小计算

  • 宽度:content width + padding + border

  • 高度:content height + padding + border

  • 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

  • 案例:10.盒子实际大小计算方式.html

4.5 内边距为什么会撑开盒子
  • 如果设置内边距就会撑大原来的盒子

  • 一个盒子宽度为50, padding为 20, 边框为15像素,问这个盒子实际的宽度的是()

6. 外边距(margin)

6.1 外边距设置:
属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
  • 案例:11.外边距设置.html

6.2 盒子水平居中
  • 可以让一个块级盒子实现水平居中必须:

    • 盒子必须指定了宽度(width)

    • 然后就给左右的外边距都设置为auto

      • 常见的写法:

        • margin-left: auto; margin-right: auto;

        • margin: auto;

        • margin: 0 auto;

  • 案例:12.盒子居中对齐.html

6.3 文字居中和盒子居中区别
  • 盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐

  • 块级盒子水平居中 左右margin 改为 auto

  • 案例:13.文字居中和盒子居中.html

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
6.4 插入图片和背景图片区别
  • 插入图片的控制:只能靠盒模型 padding与margin来控制

  • 背景图片的控制:只能通过 background-position来控制

  • 案例:14.插入图片和背景图片的区别.html

6.6 清除元素的默认内外边距(重要)

  • 为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除

  • 案例:15.清除元素默认的内外边距.html

* {padding:0;         /* 清除内边距 */  margin:0;          /* 清除外边距 */
}
6.7 外边距合并
  • 使用margin定义块元素的垂直外边距时,可能会出现相邻块元素垂直外边距的合并。

    • 当上下相邻的两个块元素相遇时,如果上面的元素有margin-bottom,下面的元素有margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。

    • 会取两个值中的较大者:这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

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

    • 案例:16.外边距合并之上下外边距.html

  • 嵌套块元素垂直外边距的合并(塌陷)

    • 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并。合并后的外边距为两者中的较大者。

    • 解决方案:

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

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

      • 可以为父元素添加overflow:hidden。

    • 案例:17.嵌套关系外边距合并.html

7. 盒子模型布局总结

  • margin:会有外边距合并的问题。

  • padding:会影响盒子大小。

8. 综合案例训练

  • 无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,去掉这些列表样式代码如下。

li { list-style: none; 
}

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

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

相关文章

Web(8)SQL注入

Web网站(对外门户) 原理:not>and>or(优先级) 一.低级注入 order by的作用是对字段进行排序,如order by 5,根据第五个字段 进行排序,如果一共有4个字段,输入order by 5系统就会报错不 …

详细介绍开源固件-TF-A

什么是TF-A? TF-A(Trusted Firmware-A)是一种用于嵌入式系统的开源固件,而不是Linux的一部分。TF-A主要用于ARM架构的处理器和设备,它提供了一组安全和可信任的软件组件,用于引导和初始化系统。 如下是其…

GD32F30X-RT-Thread学习-线程管理

1. 软硬件平台 GD32F307E-START Board开发板MDK-ARM Keil 2.RT-Thread Nano 3.RT-Thread 内核学习-线程管理 ​ 在多线程操作系统中,可以把一个复杂的应用分解成多个小的、可调度的、序列化的程序单元,当合理地划分任务并正确地执行时,这…

qt可以详细写的项目或技术

1.QT 图形视图框架 2.QT 模型视图结构 3.QT列表显示大量信息 4.QT播放器 5.QT 编解码 6.QT opencv

Linux--RedHat--安装和配置C++环境

百度下载,安装包: 链接:https://pan.baidu.com/s/1IgBfCCRxGYZ_PPiedad0xQ 提取码:ffff 下载后,建个目录,先解压好安装包! (两种方法)执行如下命令: 参考…

Bypass open_basedir

讲解 open_basedir是php.ini中的一个配置选项,可用于将用户访问文件的活动范围限制在指定的区域。 假设open_basedir/var/www/html/web1/:/tmp/,那么通过web1访问服务器的用户就无法获取服务器上除了/var/www/html/web1/和/tmp/这两个目录以外的文件。…

Java——面试:String 和 StringBuffer 的区别?

相同点: String 和 StringBuffer,它们可以储存和操作字符串, 即包含多个字符的字符数据。 String 和 StringBuffer 的区别有以下几点: 1.String 类提供了数值不可改变的字符串。而 StringBuffer 类提供的字符串进行修改。 当你知…

洛谷 P8674 [蓝桥杯 2018 国 B] 调手表

文章目录 [蓝桥杯 2018 国 B] 调手表题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题意解析CODE分析一下复杂度 [蓝桥杯 2018 国 B] 调手表 题目描述 小明买了块高端大气上档次的电子手表,他正准备调时间呢。 在 M78 星云,时间的计量…

JVM虚拟机:命令行查看JVM垃圾回收器的执行信息

在eclipse中打开命令行窗口 window->show view->Terminal 这样就打开了Terminal窗口,效果如下所示: java -XX:PrintCommandLineFlags -version 这个命令可以查看一些配置信息,其中最重要的配置信息就是,当前使用的G1回收器…

什么是漏洞扫描

漏洞扫描是指基于漏洞数据库,通过扫描等手段对指定的远程或者本地计算机系统的安全脆弱性进行检测,发现可利用漏洞的一种安全检测的 行为,也是一类重要的网络安全技术。它和防火墙、入侵检测系统互相配合,能够有效提高网络的安全性…

键盘打字盲打练习系列之成为大师——5

一.欢迎来到我的酒馆 盲打,成为大师! 目录 一.欢迎来到我的酒馆二.关于盲打你需要知道三.值得收藏的练习打字网站 二.关于盲打你需要知道 盲打系列教程,终于写到终章了。。。一开始在看网上视频,看到up主熟练的打字技巧&#xff…

LabVIEW与Tektronix示波器实现电源测试自动化

LabVIEW与Tektronix示波器实现电源测试自动化 在现代电子测试与测量领域,自动化测试系统的构建是提高效率和精确度的关键。本案例介绍了如何利用LabVIEW软件结合Tektronix MDO MSO DPO2000/3000/4000系列示波器,开发一个自动化测试项目。该项目旨在自动…

javascript中Reflect是什么?三分钟初识

目录 1. Reflect是什么?2. 为什么会出现Reflect?3. 需要怎么去使用Reflect?4. 最终的结果解决什么?5. 使用的注意点6. 常用的技巧 Reflect是Javascript中的一个内置对象,它提供了一组用于操作对象的方法,可…

Spring - BeanFactory和FactoryBean的理解

BeanFactory是什么? BeanFactory是Spring 容器的根接口,它是IOC的基本容器,负责管理和加载Bean,它为具体的IOC容器提供了最基本的规范,比如DefaultListableBeanFactory和ConfigurableBeanFactory,BeanFact…

《C++新经典设计模式》之第17章 中介者模式

《C新经典设计模式》之第17章 中介者模式 中介者模式.cpp 中介者模式.cpp #include <iostream> #include <map> #include <memory> using namespace std;// 中介者封装一系列的对象交互 // 4种角色 // Mediator&#xff08;抽象中介者类&#xff09;&#x…

MYSQL练题笔记-高级查询和连接-指定日期的产品价格

这依旧是中等题&#xff0c;想了好久&#xff0c;终于理解了很开心&#xff01; 一、题目相关内容 1&#xff09;相关的表和题目 2&#xff09;帮助理解题目的示例&#xff0c;提供返回结果的格式 二、自己初步的理解 题目是找出2019-08-16 时全部产品的价格&#xff0c;所以…

数字化时代的到来,IT运维产业正在发生深刻的变革

IT运维产业是随着信息技术的发展而产生的&#xff0c;它涵盖了从硬件到软件、从应用到数据、从终端到云端等各个方面的维护和管理。随着数字化时代的到来&#xff0c;IT运维产业正在发生深刻的变革。其中&#xff0c;大数据技术的广泛应用和数据资源的日益丰富&#xff0c;正在…

使用最小花费爬楼梯

1.状态表示 2.状态转移方程 3.初始化 保证填表时&#xff0c; 不越界 4.填表顺序 从左往右 5.返回值 解法2&#xff1a; 1.状态表示 2.状态转移方程 3.初始化 4.填表 从右往左 5.返回值 min( dp[0] , dp[1] ) ----------------------------------------------------…

java+springboot+ssm学生社团管理系统76c2e

本系统包括前台和后台两个部分。前台主要是展示社团列表、社团风采、社团活动、新闻列表等&#xff0c;前台登录后进入个人中心&#xff0c;在个人中心能申请加入社团、查看参加的社团活动等&#xff1b;后台为管理员与社团负责人使用&#xff0c;应用于对社团的管理及内容发布…

Vue3源码梳理:源码目录结构及源码阅读方法

VUE3 源码目录结构 1 ) 下载源码三种方式 方式1&#xff0c;Download ZIP&#xff0c;不推荐方式2&#xff0c;通过https,或ssh或github cli来克隆项目 $ git clone https://github.com/vuejs/core.git$ git clone gitgithub.com:vuejs/core.git 方式3&#xff0c;点击Fork, …