图解CSS3----盒子模型

一、效果：

二、代码：

box-sizing：border-box；

width: 200px;
height: 200px;
border: 20px solid red;
float: left;
margin: 0 20px 0 0;
text-align: center;
padding: 30px;

三、总结：border-box让元素维持IE传统的盒模型

content的宽（高） = 盒子的宽（高）-border宽（高）-padding宽（高）

一、效果：

二、代码：

box-sizing： content-box;

width: 200px;
height: 200px;
border: 20px solid red;
float: left;
margin: 0 20px 0 0;
text-align: center;
padding: 30px;

三、总结：content-box是默认值，让元素维持W3C的标准盒模型。

元素的宽（高） = border的宽（高）+padding宽（高）+content宽（高）；

一、

二、box-sizing： inherit;

三、继承父元素的样式

转载于:https://www.cnblogs.com/SunlikeLWL/p/7230025.html

图解CSS3----盒子模型相关推荐

web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS3盒子模型（CSS3）
CSS3盒子模型(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
CSS3—盒子模型讲解
一.盒子模型盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.W3C组织建议把网页上元素看成是一个个盒子.盒模型主要定义四个区域:内容(content).内边距(padding).边框 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
css3盒子模型微课_css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
CSS3盒子模型-盒子模型的布局
盒子模型布局稳定性开始学习盒子模型,我们初学者最大的困惑就是, 分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距?答案是: 其实他们大部分情况下是可以混用的. 就是说,你用内边距也可 ...
css3盒子模型微课_CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
css3盒子模型微课_css3之盒模型
什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性有: content .padding .m ...
css3盒子模型微课_CSS3 盒子模型
元素性质元素的性质分为两类块元素和行元素. 块元素行元素效果块元素行元素块元素是我们在 HTML 篇中列举过的盒子,它们通常作为其他元素的容器.跟行元素的区域在于,块元素可以 ...

图解CSS3----盒子模型

图解CSS3----盒子模型相关推荐

最新文章

热门文章