HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用

news2024/12/23 13:14:34

目标

能够认识 盒子模型 的组成部分
能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
能够计算盒子的 实际大小
能够了解 外边距折叠现象,并知道如何解决 盒子塌陷问题

一、PxCook的基本使用

1. 通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目

2. 常用快捷键
1. 放大设计图:ctrl + +
2. 缩小设计图:ctrl + -
3. 移动设计图:空格按住不放,鼠标拖动

3. 常用工具
1. 量尺寸
2. 吸颜色

4. 从psd文件中直接获取数据
1. 切换到开发界面,直接点击获取数据

二、盒子模型

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

1. 盒子模型的介绍

1. 盒子的概念
1. 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
2. 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子

2. 盒子模型
➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)构成,这就是 盒子模型

3. 记忆:可以联想现实中的包装盒

2. 内容区域的宽度和高度

作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性: width / height
常见取值:数字+px

3. 边框( border )

3.1 边框(border)- 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:

3.2 边框(border)- 连写形式

属性名:border 属性值:单个取值的连写,取值之间以空格隔开
• 如:border : 10px solid red;
快捷键:bd + tab

3.3 边框(border)- 单方向设置

场景:只给盒子的某个方向单独设置边框
属性名: border - 方位名词
属性值:连写的取值

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

需求:盒子尺寸 400*400,背景绿色,边框10px 实线 黑色,如何完成?
• 注意点: ① 设置width和height是内容的宽高!② 设置border会撑大盒子!
盒子实际大小初级计算公式:
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
解决:当盒子被border撑大后,如何满足需求?
• 解决: 计算多余大小,手动在内容中减去(手动内减)

4. 内边距( padding )

4.1 内边距(padding)- 连写

作用:设置 边框 与 内容区域 之间的距离
属性名:padding
常见取值:
记忆规则: 从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的

4.2 内边距(padding)- 单方向设置

场景:只给盒子的某个方向单独设置内边距
属性名: padding - 方位名词
属性值:数字 + px

4.3 盒子实际大小终极计算公式

需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
• 注意点:① 设置width和height是内容的宽高!② 设置border会撑大盒子 ③ 设置padding会撑大盒子

盒子实际大小终极计算公式:
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

解决:当盒子被border和padding撑大后,如何满足需求?
自己计算多余大小,手动在内容中减去(手动内减)

4.4 拓展:不会撑大盒子的特殊情况

不会撑大盒子的特殊情况(块级元素)
1. 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子

4.5 CSS3盒模型(自动内减)

需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
• 给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
解决方法 ① :手动内减
• 操作:自己计算多余大小,手动在内容中减去
• 缺点:项目中计算量太大,很麻烦
解决方法 ② :自动内减
• 操作:给盒子设置属性 box-sizing : border-box ; 即可
• 优点:浏览器会自动计算多余大小,自动在内容中减去

5. 外边距(margin)

5.1 外边距(margin)- 连写

作用:设置边框以外, 盒子与盒子之间的距离
属性名:margin
常见取值:
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的

5.2 外边距(margin) - 单方向设置

场景:只给盒子的某个方向单独设置外边距
属性名: margin - 方位名词
属性值:数字 + px

5.3 清除默认内外边距

场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续自己设置
• 比如:body标签默认有margin:8px
• 比如:p标签默认有上下的margin
• 比如:ul标签默认由上下的margin和padding-left
• ……

解决方法:

5.4 外边距正常情况

场景: 水平布局 的盒子,左右的margin正常,互不影响
结果:最终两者距离为 左右margin的和

5.5 外边距折叠现象 – ① 合并现象

场景: 垂直布局块级元素,上下的margin会合并
结果:最终两者距离为 margin的最大值
解决方法:避免就好
只给其中一个盒子设置margin即可

5.6 外边距折叠现象 – ② 塌陷现象

场景: 互相嵌套块级元素,子元素的 margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
1. 给 父元素设置 border-top 或者 padding-top(分隔父子元素的margin-top)
2. 给 父元素设置 overflow:hidden
3. 转换成 行内块元素
4. 设置 浮动

5.7 行内元素的margin和padding无效情况

场景:给行内元素设置margin和padding时
结果:
1. 水平方向的margin和padding布局中有效!
2. 垂直方向的margin和padding布局中无效!

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

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

相关文章

Acwing---99.激光炸弹

激光炸弹1.题目2.基本思想3.代码实现1.题目 地图上有 NNN 个目标,用整数 Xi,YiXi,YiXi,Yi 表示目标在地图上的位置,每个目标都有一个价值 WiWiWi。 注意:不同目标可能在同一位置。 现在有一种新型的激光炸弹,可以摧毁一个包含 …

Java中常用API总结(4)—— Object类(含实例解读和源码阅读)

Object类一、前言二、概述1.API帮助文档2.使用方法三、常用方法1.toString方法1️⃣格式2️⃣实例3️⃣源码阅读4️⃣快捷键重写方法2.equals方法1️⃣格式2️⃣实例3️⃣源码阅读4️⃣重写方法3.对象克隆四、结语一、前言 本文将讲述有关于Object类相关知识点 二、概述 1.A…

C语言文件操作的细节

目录 文本文件和二进制文件 概念 一个数据在内存中是怎么存储的呢? 通过VS2013可以查看二进制数值 文件读取结束的判定 文件缓冲区 文本文件和二进制文件 概念 根据数据的组织形式,数据文件被称为文本文件或者二进制文件。 数据在内存中以二进制的…

YOLOv5 以txt 或json格式输出预测结果

YOLOv5 以txt 或json格式输出预测结果1.YOLOv5源码以多种格式输出预测结果1.run函数——传入参数2.run函数——保存打印2.YOLOv5以.txt格式输出预测结果1.执行以下代码就可以得到以.txt格式输出预测结果2.输出格式:3.YOLOv5以.json格式输出预测结果1.需要在源码中加…

零售行业交易数据分析(3)——群组/同期群分析(留存率分析)

内容简介 本文介绍了群组分析(同期群分析)的方法以及Python实现过程,并继续对一家零售公司的交易数据进行用户留存分析和可视化。 本系列的文章: 《零售行业交易数据分析(1)——客户终身价值(CLTV)计算和…

Qt扫盲-QSplitter理论总结

QSplitter理论总结一、概述二、使用说明1. 添加子控件2. 内部控件大小和位置一、概述 QSplitter允许用户通过拖动子部件之间的边界来控制子部件的大小。这个经常在我们使用的一些工具软件中最常使用 比如就像 QAssistant 里面的索引栏和内容直间,鼠标放在那个分界区…

3dMax中的两足动物及动画制作方法

3dMax的两足动物简介 3DMax是一款专业的3D电脑设计软件,用于制作3D动画、游戏、模型、图像等,在视频游戏开发商、影视工作室的工作中发挥着重要作用。Biped 是3D max 软件中动画的基本部分。3dMax中的Biped为角色建模中的角色部分提供运动并将其连接到现…

基于Java+SpringMvc+vue+element实现驾校管理系统详细设计

基于JavaSpringMvcvueelement实现驾校管理系统详细设计 博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取…

PPI网络的构建与美化(String+Cytoscape)

目录写在前面一、使用string分析数据二、使用Cytoscape构建网络1. 导入TSV文件2. Analyze Network3. Generate Style4. CytoNCA计算Betweenness三、美化网络1. 根据Betweenness调整网络2. 选择你需要的蛋白,做个双环网络图3. 调整字体大小颜色、气泡大小等4. 保存图…

【TypeScript】JavaScript VS TypeScript数据类型

💭💭 ✨:JavaScript VS TypeScript数据类型   💟:东非不开森的主页   💜: 你若盛开,清风自来💜💜   🌸: 如有错误或不足之处,希望可以指正&…

【TS】TypeScript 实践中的 Equals 是如何工作的?

How does the Equals work in typescript 循着线索慢慢来 在 ts 中如何判断两种类型完全一致? 三年前,在社区有一场关于支持 type level equal operator 的讨论 TypeScript#27024。 大佬 mattmccutchen 给出了一个非常精彩的解决方案: Her…

智公网:教师编的这些规则要知道!

1、有了教师资格证,是否还需要考取编制? 答:有了教师资格证之后是需要继续教师编制考试的。只有通过了教师编制考试才能有教师编,只有一个教师资格证,只能证明是具备了从业资格。通过教师编制的人员被称为在编人员&am…

【Web开发】Python实现Web图表功能(D-Tale编译打包)

🍺基于Flask实现服务器的相关文章如下🍺: 🎈【Web开发】Python实现Web服务器(Flask快速入门)🎈🎈【Web开发】Python实现Web服务器(Flask案例测试)&#x1f3…

MySQL中SQL语句执行顺序及优化

概要 本文章主要是分析SQL语句关键字的执行顺序,以及在每一个阶段我们有哪些优化,可以去做哪些优化,和注意事项。 1. SQL语句关键字的执行顺序 通常我们执行一条SQL语句它的执行顺序如下 selectfrom.joinwheregroup byhavingorder by聚合函…

Vitepress(二):部署

什么是Git Page github Pages可以被认为是用户编写的、托管在github上的静态网页。 github pages有300M免费空间,资料自己管理,保存可靠; 实现项目自动推送到Github 首先新建一个自己的项目用于存放github pages的内容 格式是 自己githu…

《元宇宙2086》影视工业弯道超车?《科普时报》刊登采访报道

科普时报-第267期 2023年01月06日 星期五 第05版:书香文史刊载了题目为“《元宇宙2086》影视工业弯道超车?”的关于高泽龙的采访报道。全文内容如下:在2022年中国金鸡百花电影节暨第35届中国电影金鸡奖期间,我创作的中国首部元宇宙…

Linux开发工具的使用(二)

文章目录Linux开发工具的使用(二)1.Linux编译器gcc/g使用1.1 背景1.2 验证每一个阶段的效果1.2.1 预处理1.2.2 编译1.2.3 汇编1.2.4 链接1.2.5 记忆1.3 链接的理解1.3.1 ldd指令1.3.2 预备1.3.3 动态库和静态库感性理解到实际理解2.Linux项目自动化构建工…

吴恩达《机器学习》——SVM支持向量机

SVM支持向量机1. 线性SVM1.1 从Logistic回归出发1.2 大边界分类与SVM1.3 调整正则化参数2. 非线性SVM(高斯核函数)2.1 高斯核2.2 非线性分类2.3 参数搜索数据集、源文件可以在Github项目中获得 链接: https://github.com/Raymond-Yang-2001/AndrewNg-Mac…

Java编程基础

1,基本概念 (1)JDK、JRE、JVM的关系: JDK:Java Development Kit,Java开发工具包JRE: Java Runtime Environment,Java运行环境JVM:Java Virtual Machine,Java虚拟机JDK包…

2023年山东最新建筑八大员(电气施工员)模拟真题题库及答案

百分百题库提供建筑八大员(电气)考试试题、建筑八大员(电气)考试预测题、建筑八大员(电气)考试真题、建筑八大员(电气)证考试题库等,提供在线做题刷题,在线模拟考试&…