CSS-标准盒模型和怪异盒模型box-sizing

2024-04-25 04:28:58

盒模型

以上图为例：

在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所撑开。

CSS-标准盒模型和怪异盒模型box-sizing相关推荐

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
标准盒模型和怪异盒模型
怪异盒子模型 box-sizing :border-content; 标准盒子模型,平常不设置就默认是标准盒子模型 box-sizing :border-box; 怪异盒子模型标准盒子模型与怪异盒子 ...
普通盒模型和怪异盒模型
一.什么是盒模型? 1.根据盒子模型的概念,每个在页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子. 2.盒模型分为两种:分别是W3C标准盒模型(普通盒模型)和IE盒模型(怪异盒模型) ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...

最新文章

热门文章