HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用
目标
能够认识 盒子模型 的组成部分
能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
能够计算盒子的 实际大小
能够了解 外边距折叠现象,并知道如何解决 盒子塌陷问题
一、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布局中无效!
HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用相关推荐
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础(三)——盒子模型
盒子模型:所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间,一般来说这些被占据的空间都要比单纯的内容要大.如何让元素进行位置的调整,其实就是通过调整盒子的边框和距离等参数来调整盒子的位置 盒 ...
- W3school:CSS基础:CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
- W3school:CSS基础:CSS注释、颜色(颜色、RGB、HEX、HSL)、背景(背景、背景图像、背景重复、背景附着、简写背景属性)
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...
- Day05-CSS布局-盒子模型
CSS布局-盒子模型 一.CSS三大特性 3.1 优先级的介绍 3.2 权重叠加计算 3.3 (拓展)权重叠加计算案例 4.1 Chrome调试工具 二.PxCook的基本使用 三.盒子模型 1.1 ...
- 【前端学习笔记】(五)(CSS布局 盒子模型)
目录 盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
- 阿ken的HTML、CSS的学习笔记_CSS盒子模型(笔记五)
走的越远你就越会发现 真正能在危难之时拉你一把的人 只有你自己 前段时间跟家里打视频电话 每每看到家人关怀的目光以及她们逐渐苍老的面庞 就不忍心再对他们言哭言累 有时午夜辗转反侧脑海里一想到他们 就会 ...
- html,css基础(2)~浮动布局,弹性布局,css2D,3D转换,css动画,长度单位
目录 1,浮动布局 2,弹性布局 3,CSS 2D 转换 4,CSS 3D 转换 5,css动画 6,长度单位 7,元素,文本阴影 8,表单元素 9,响应式布局 1,浮动布局 float,设置元素使用 ...
- CSS布局盒子模型(复习巩固)
文档流 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
- CSS基础学习--17 布局 - 水平 垂直对齐
一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
最新文章
- oracle 11g 的em启动不了
- c++ 异常处理(1)
- 如何利用线框图展示初期产品
- Windows x64内核学习笔记(一)—— 环境与配置
- springboot-websocket-netty
- JetBrains又出神器啦,Fleet,体验飞一般的感觉
- Java 面试题(4)—— 多线程
- Java IO学习--(五)字节和字符数组
- Linux虚拟化:Virtio: 一个 I/O 虚拟化框架
- Error:Execution failed for task ':clean'. Unable to delete directory :\build\intermediates (转)...
- 80X86寄存器详解
- java2实用教程第六版习题答案
- 使用青花瓷对Android app 抓包
- Qt QCompleter自动补全
- 员工考勤iPhone客户端1.0版简介
- 海思hisi v350报错librecovery (native:platform) should not link to libhi_common (native:vendor)
- elemen点击时,修改走马灯的播放索引
- java 消息摘要_java – 使用BouncyCastle签名消息摘要
- 【单片机】Android手机USB外接STM32单片机通过ADB实现投屏反向控制的功能
- Algorithm之PrA:PrA之IP整数规划(包括0-1整数规划)算法经典案例剖析+Matlab编程实现
热门文章
- c语言中%只能用于正数吗,C语言中%只能用于整数运算的运算符?
- 次世代游戏建模制作全流程
- html 表格中显示图片,layui如何在表格中显示图片
- Perl - use strict
- 卓克-极限:硬盘装满电影会变重吗?
- iOS开发:不可变数组和可变数组的区别分析(NSArray / NSMutableArray)
- NameError: free variable ‘xx‘ referenced before assignment in enclosing scope
- 我国主推的C-V2X成为全球车联网唯一的国际标准
- 用MindStudio进行TensorFlow模型开发流程详解
- 计算机系统中八个二进制位叫做一个,一个字节由几个二进制位组成(计算机系统有什么两部分组成)...