10.9 块级盒子的内外边距:如何使用box-sizing重新定义盒子模式?
块级盒子的内外边距:如何使用box-sizing重新定义盒子模式?
外边距 margin
margin 属性为给定元素设置所有四个(上下左右)方向的外边距属性。也就是 margin-top,margin-right,margin-bottom,和 margin-left 四个外边距属性设置的简写。
外边距margin,控制的是元素外部扩出的空间。相反,padding 操作元素内部空出的空间。
子样式属性:
margin-top
margin-right
margin-bottom
margin-left
示例:
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
简写示例:
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
margin 属性接受 1~4 个值。每个值可以是数值,或百分比,或 auto:
- 当只指定一个值时,该值会统一应用到全部四个边的外边距上。
- 指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边。
- 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。
- 指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的外边距。
外边距的作用:使块级元素居中?
在现代浏览器中实现水平居中,可以使用
display: flex; justify-content: center;。
不过在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中,上述代码并不会生效。此时要实现在父元素中居中,可使用 margin: 0 auto;。
示例:
<h1>外边距的作用:块级元素居中</h1>
<style>
span {
width: 100px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<div>
<span>我是span元素</span>
</div>
网页居中对齐的必要条件
- 块级元素 dislay
- 固定宽度 width
问题:能否上中居中?如何上下居中?
代码:
<h1>外边距的作用:块级元素居中2</h1>
<style>
.span32 {
width: 100px;
margin: auto auto;
border: 1px solid red;
}
</style>
<div style="height: 200px;width:300px">
<span class="span32">我是span元素2</span>
</div
auto的含义是什么?
margin: auto; /* 上边和下边:无外边距 */
/* 水平方向居中 */
内边距padding
padding-left
padding-right
padding-top
padding-bottom
padding
示例
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
简写示例:
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
盒子模型的尺寸:如何查看盒子尺寸?
代码:
<title>盒模型尺寸</title>
<style>
div{
width: 88px;
height: 88px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
}
</style>
在Web开发者工具中查看盒子模型尺寸:
使用box-sizing重定义盒子模式
box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。
有效值:
- content-box 是谷歌浏览器默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
width = content,谷歌浏览器等标签盒子计算方法
示例:
box-sizing: content-box;
width: 100%;
- border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
width = content+border+padding,IE盒子计算方法
示例:
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 10px;
9月30日
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- spring-boot - demo
- Mybatis - 动态sql
- git版本回退, github版本回退
- Mybatis高级查询之关联查询
- Mybatis-update - 数据库死锁 - 获取数据库连接池等待
- 使用Apache Server 的ab进行web请求压力测试
- Spring-AOP实践 - 统计访问时间
- mysql创建定时执行存储过程任务
- MongoDB-基础-limit-skip-sort
- MongoDB-基础-条件操作符
- mongodb-基础-update-remove
- Mybatis-mapper-xml-基础
- 2016.06 第一周 群问题分享
- MongoDB - basic
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Hexo+Next7.X 博客美化教程合集
- 波士顿房价预测 - 最简单入门机器学习 - Jupyter
- 机器学习竞赛分享:NFL大数据碗(上篇)
- 大文件分割、命名脚本 - Python
- adb常用命令总结
- Cypress执行测试并邮寄发送测试报告
- 重拾前端技能为你的职业前程保驾护航
- 检查图片是否损坏、图片后缀是否与实际图片类型对应 - Python
- 规则引擎 - drools 使用讲解(简单版) - Java
- Python奇技淫巧 - 持续更新中....
- 150+行Python代码实现带界面的数独游戏
- Python实现十大经典排序算法
- 140行Python代码实现Flippy Bird
- 200行Python代码实现贪吃蛇
- 简单说维特比算法 - python实现