CSS-标准盒模型和怪异盒模型box-sizing
来源:互联网 发布:python 按键精灵 编辑:程序博客网 时间:2024/06/07 08:29
盒模型
以上图为例:
在w3c标准盒模型下,
元素实际宽等于width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
元素实际高等于height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
怪异盒模型box-sizing
box-sizing;以特定的方式定义匹配某个区域的特定元素。
box-sizing可以取以下三个值:
1、border-box 边框的宽度和padding的宽度都在width内,将采用怪异模式解析计算,怪异盒模型;不会破坏整体位置布局。
但是border和padding给的值的总和,不能超过width,否则元素的实际宽度就会被撑开
2、content-box,border和padding不计算入width之内,将采用标准模式解析计算,也是默认模式
3、padding-box,padding计算入width内
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
两种模式的区别:
标准模式会被设置的padding撑开,而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子。盒子的大小并不会被padding所撑开。
阅读全文
0 0
- CSS-标准盒模型和怪异盒模型box-sizing
- 怪异盒模型 box-sizing
- css基础———box-sizing—标准盒模型&怪异盒模型
- CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性
- 盒模型和box-sizing
- CSS-标准盒模型 & 怪异盒模型
- CSS中的标准盒模型 和 怪异盒模型
- CSS-怪异盒模型和标准盒模型
- 怪异盒模型和标准盒模型
- box-sizing和calc()盒模型
- CSS盒模型之 CSS3 box-sizing属性
- 前端进阶---标准盒模型和怪异和模型---
- CSS3 box-sizing属性和IE盒模型
- box-sizing与盒模型的认识
- css3 box-sizing 盒模型 学习手记
- CSS3盒模型之box-sizing
- css之盒子模型box-sizing属性
- CCS3盒模型与盒模型属性box-sizing
- 如何更加安全、高效地选择开源项目(内附详解)
- JavaScript高程学习笔记之客户端检测(9)
- Java中String类常用方法(字符串中的子字符串的个数)
- 欢迎使用CSDN-markdown编辑器
- recover-binary-search-tree
- CSS-标准盒模型和怪异盒模型box-sizing
- C语言预习之指针
- XML和Schema命名空间详解
- iOS Xcode升级完iOS 11后出现提交审核无法提交原因
- C 变量
- redis配置文件记录
- Fresco简单应用与实践
- [AI教程]最全人工智能图谱解析和视频下载
- vue-router仿天猫底部导航栏