盒模型box-sizing:

取值

1.content-box 默认值，标准盒模型，设置宽度为内容宽度，实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度

2.border-box 设置宽度等于元素内容宽度，content包含了元素的border和padding

3.inherit 继承父元素的盒模型模式

兼容 iE8+

解决问题：
边框和填充被计算到盒模型内，不会破坏布局

CSS3中box-sizing属性的作用以及应用场景的更多相关文章

  1. html的标签中 unselectable=on 属性的作用

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...

  2. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  3. CSS3中哪些新属性—阴影、文本省略（1）

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

  4. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  5. ASP.NET Web网站中App_Code文件夹的作用及使用场景

    原文地址:Web Site项目和ASP.NET Web Application中App_Code文件夹的作用作者:宾的宾 我现在要建一个ASP.NET的网站了,不难吧,开始动手.如下图: 这种方法建立 ...

  6. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  7. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  8. CSS3中的一些属性

    1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...

  9. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

随机推荐

  1. Java学习：Properties类

    Java学习:Properties类 学习目标 认识properties文件,理解其含义,会正确创建properties文件. 会使用java.util.Properties类来操作propertie ...

  2. Mysql序列（七）—— order by优化

    前言 在mysql中满足order by的处理方式有两种: 让索引满足排序,即扫描有序索引然后再找到对应的行结果,这样结果即是有序: 使用索引查询出结果或者扫描表得到结果然后使用filesort排序: ...

  3. KVM学习

    获取镜像目前大小 # qemu-img info debian.img 添加额外的10G空间到镜像中 # qemu-img resize -f raw debian.img +10GB 注意:并不是所 ...

  4. 【java】java反射获取属性和属性值，java反射设置属性和属性值

    今日份代码如下: /** * * @Author: SXD * @Description: * @Date: create in 2019/9/20 15:39 */ public class Pro ...

  5. 【Python3爬虫】最新的12306爬虫

    一.写在前面 我在以前写过一次12306网站的爬虫,当时实现了模拟登录和查询车票,但是感觉还不太够,所以对之前的代码加以修改,还实现了一个订购车票的功能. 二.主要思路 在使用Selenium做模拟登 ...

  6. HDU2023求平均成绩 - biaobiao88

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2023 求平均成绩 Problem Description 假设一个班有n(n<=50)个学生,每 ...

  7. 基于vue+springboot+docker网站搭建【四】安装nginx

    安装nginx 搜索镜像:systemctl search nginx 下载镜像(注意带上版本):docker pull nginx:1.10 查看自己机器的所有镜像:docker images 启动 ...

  8. linux命令之——grep详解

    grep命令用于查找文件里符合条件的字符串:也可以用于查找内容包含指定的范本样式的文件.它能使用正则表达式搜索,用于在文件中搜索指定的字符串模式,列出含有匹配模式子符串的文件名,并输出含有该字符串的文 ...

  9. 攻防世界-web -高手进阶区-PHP2

    题目 首先发现源码泄露 /index.phps 查看源代码 即: <?php if("admin"===$_GET[id]) { echo("<p>no ...

  10. datagrid相关

    int rowID = Convert.ToInt32(dataGrid_OpenBoxScan.CurrentRowIndex.ToString());//得到所选行的行号              ...