盒子模型  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 用法的更多相关文章

  1. 教你吃透CSS的盒子模型(Box Model)

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  2. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  3. CSS盒子模型（框模型）

     一.如何理解盒子模型  盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...

  4. CSS：CSS 盒子模型

    ylbtech-CSS:CSS 盒子模型 1.返回顶部 1. CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&quo ...

  5. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  6. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  7. HTML和CSS的盒子模型(Box model)

    本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...

  8. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  9. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  10. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. ScheduledThreadPoolExecutor Usage

    refs: https://blog.csdn.net/wenzhi20102321/article/details/78681379 对比一下Timer和ScheduledThreadPoolExe ...

  2. RxJS操作符（一）

    一.创建类操作符 创建类操作符是连接传统编程和响应式编程的强梁 from: 可以把数组.Promise.以及Iterable转化为Observable. fromEvent: 可以把事件转化为Obse ...

  3. k个一组翻转链表

    给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定这个链表: ...

  4. 使用BITSADMIN下载文件

    BITSADMIN /RAWRETURN /TRANSFER D /PRIORITY HIGH http://127.0.0.1:80/file.exe C:\ProgramData\file.exe

  5. 2018-2019-1 20189201《Linux内核原理与分析》第三周作业

    写作业之前,写了时光博物馆参观感受.1978-2018 40年的改革开放历程. 一.C语言中内嵌汇编语言的写法 内嵌汇编的语法如下: asm volatile ( 汇编语句模版: 输出部分: 输入部分 ...

  6. AWS S3 递归上传文件和递归下载文件, 以及S3之间拷贝文件夹

    1. 递归上传文件: aws s3 cp 本地文件夹 s3://bucket-name -- recursive --region us-east-1 2. 递归下载S3上的文件夹: cd  本地下载 ...

  7. tar 压缩归档

    压缩归档 掌握归档的定义:归档(archiving)就是将许多文件(或目录)打包成一个文件. 了解归档的目的:归档的目的就是方便备份.还原及文件的传输操作. 掌握tar命令的功能:将多个文件(也可能包 ...

  8. C# 接口属性的定义&get、set访问器的简单应用

    using System; using System.Collections.Generic; using System.Linq; using System.Text;   namespace 接口 ...

  9. HttpConnection

    1.HttpConnection 用于接受和发送网络数据 网络操作必须新开个子线程执行,否则会出现 ANR(Application Not Response) 应用无响应异常 Get: /** * 通 ...

  10. sublime 学习笔记

    一.subline text 常用快捷键1.安装插件:ctrl + shift + p -> packages controll -> 输入插件的名字即可2.python 的脚本的运行 c ...