CSS盒子模型 box-sizing 用法
盒子模型 box-sizing 属性
语法：box-sizing ：content-box || border-box || inherit
属性值：
content-box 为(w3c标准盒子模型)
border-box 为（ie标准盒子模型）
inherit：继承父级盒子模型
区别：
w3c模型 中height= 内容的高度;
ie 模型 height=边框+内边距+内容的高度
如图：
例子：写两个div，设置 box-sizing 属性分别为content-box/border-box，其他属性完全相同。
<!doctype html>
<html lang="en">
<head>
<title>box-sizing</title>
<meta charset="UTF-8">
<style>
.model-w3c{
box-sizing: content-box;
float: left;
width: 100px;
height:100px;
border:10px solid #aeeeff;
margin: 10px;
padding: 10px;
}
.model-ie{
box-sizing: border-box;
float: left;
width: 100px;
height:100px;
border:10px solid #aeeeff;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body> <div class="model-w3c">
padding
<div>
w3c标准
</div>
</div>
<div class="model-ie">
ie标准
</div>
</body>
</html>
运行效果如图：
over!!
CSS盒子模型 box-sizing 用法的更多相关文章
- 教你吃透CSS的盒子模型(Box Model)
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- CSS盒子模型（框模型）
一.如何理解盒子模型 盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...
- CSS：CSS 盒子模型
ylbtech-CSS:CSS 盒子模型 1.返回顶部 1. CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&quo ...
- 1.26学习总结——css盒子模型
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- CSS 盒子模型（Box model）中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- HTML和CSS的盒子模型(Box model)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...
- CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 51nod--1006 最长公共子序列Lcs （动态规划）
题目: 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...
- Django ----- app 和 ORM的操作和介绍
创建APP ORM 介绍 ORM的操作 说明一下 GET 和 POST 的区别: , GET ①获取一个页面 ②提交数据 数据显示在URL ?user=alex&pwd=alexdsb ,PO ...
- hihocoder 1496 寻找最大值
题解: 注意到$ai$只有$1e6$这件事情肯定要枚举和这个有关的东西 考虑枚举$ai\&aj$的值就可以了 那么这个集合一定是ai,aj的子集 于是我们对每个集合从大到小枚举丢掉一位转移就行 ...
- BZOJ4503 两个串 多项式 FFT
题目传送门 - BZOJ4503 题意概括 给定两个字符串S和T,回答T在S中出现了几次,在哪些位置出现.注意T中可能有?字符,可以匹配任何字符. 题解 首先,假装你已经知道了这是一道$FFT$题. ...
- BZOJ3257 [Zjoi2014]力 多项式 FFT
原文链接http://www.cnblogs.com/zhouzhendong/p/8762639.html 题目传送门 - BZOJ3527 题意 给出长度为$m$的序列$q_{1..m}$,让你输 ...
- 堡垒机jumpserver测试记录--安装
一步一步安装(CentOS) 基本都是官网的东西,只是有些坑做了记录. http://docs.jumpserver.org/zh/docs/step_by_step.html 环境 系统: Cent ...
- Data Science Project
https://drivendata.github.io/cookiecutter-data-science/
- jmeter下TPS插件的安装
1.下载插件http://pan.baidu.com/s/1mioVJni 2.解压下载的安装包: 将 jpgc-graphs-basic-2.0.zip 解压缩后只有一个 lib 目录,该目录下有一 ...
- GMA Round 1 最短距离
传送门 最短距离 在椭圆C:$\frac{x^2}{20^2}+\frac{y^2}{18^2}=1$上作两条相互垂直的切线,切线交点为P,求P到椭圆C的最短距离.结果保留6位小数. 设椭圆方程:$\ ...
- (93)Wangdao.com_第二十六天_鼠标事件
鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click 按下鼠标(通常是按下主按钮)时触发. mousedown 首先触发,mouseup 接着 ...