Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别
2024-08-28 14:34:29
首先介绍Css的盒模型也就是标准盒模型(BOX Model)
包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin)
这是大家经常用到的,也是现在的标准,其实IE的盒子结构和标准基本一样,但是IE盒模型content包含了padding 和 border
标准盒子实际宽 width = content +margin+padding+border IE盒子的实际宽 width = content+margin
box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架,都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用:
1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
最新文章
- SQL SERVER中什么情况会导致索引查找变成索引扫描
- jQuery.attr() 函数详解
- windows系统命令服务安装卸载
- LoadRunner中取Request、Response
- hdu3639 强连通
- filter在CSS中的效果
- uva 11825
- ListVeiw新增记录及 滚动条移动到指定位置
- python学习(二)
- mysql的索引问题
- nsstring遍历汉子
- 【LeetCode】171. Excel Sheet Column Number
- hibernate 调用存储过程返回参数
- 如何加速GitHub访问速度
- volatile和synchronized实现内存可见性的区别
- 微信小程序wxml無法實現頁面跳轉的問題
- gogs : 添加 ssh An error has occurred : addKey: fail to parse public key: exec: ";ssh-keygen";: executable file not found in %PATH% - exec: ";ssh-keygen";: executable file not found in %PATH%
- ASP.NET MVC+HighCharts开发统计图表
- Elasticsearch -- Head插件安装
- 备份与还原mysql 数据库的常用命令。
热门文章
- java9新特性-10-语法改进:UnderScore(下划线)使用的限制
- 每位 Ubuntu 18.04 用户都应该知道的快捷键
- Conservative GC (Part two :MostlyCopyingGC )
- 中国象棋程序的设计与实现(十一)--第2次回答CSDN读者的一些问题
- 一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间
- unity 自动删除未引用的Assets下的资源
- Nutch1.6学习笔记
- Project Euler:Problem 58 Spiral primes
- iOS多线程与网络开发之多线程GCD
- 11.ng-init