Ø  默认情况下，内部元素（如：input）的宽度或高度，是不会包含元素的边框和内边距的，这时就需要使用 box-sizing 属性设置该元素。

Ø  box-sizing 是 CSS3 的属性，可以设置以上值：

1.   content-box: 元素 size 不包含 border 和 padding，默认值。

2.   border-box: 元素 size 包含 border 和 padding。

3.   inherit: 指定box-sizing属性的值，应该从父元素继承。

1)   示例1（不使用 box-sizing 属性）：

1.   HTML

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>box-sizing</title>


    <style type="text/css">


        #div1{


            width: 300px;


            height: 100px;


            border: solid 1px blue;


        }


        #text1, #text2{


            width: 100%;


        }


        #text2{


            padding-left: 10px;


        }


    </style>


</head>


<body>


    <div id="div1">


        <input type="text" id="text1" value="abc"/>


        <input type="text" id="text2" value="abc"/>


    </div>


</body>


</html>

2.   效果如图：

3.   可以发现，内部元素的宽度已经超过父元素宽度。

2)   示例2（使用 box-sizing 属性）：

1.   只需要加入如下样式

#text1, #text2{


    width: 100%;


    box-sizing: border-box;


}

2.   效果如图：

Ø  总结：木有^_^，会用就行。。

使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding的更多相关文章

  1. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  2. zIndex 属性设置元素的堆叠顺序。

    http://www.w3school.com.cn/jsref/prop_style_zindex.asp zIndex 属性设置元素的堆叠顺序. 该属性设置一个定位元素沿 z 轴的位置,z 轴定义 ...

  3. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  6. none，hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  7. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  8. CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置

    CSS3 GENERATOR可以同时为一个元素完成border-radius.box-shadow.gradient和opacity多项属性的设置 CSS3 GENERATOR 彩蛋爆料直击现场 CS ...

  9. CSS3教程:Transform的perspective属性设置

    1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...

随机推荐

  1. 解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题

    在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由于Ubuntu预装的是vim-tiny,而我们需要使用vim-full,解决 ...

  2. Android Studio & HTTP Proxy

    Android Studio & HTTP Proxy https://mirrors.neusoft.edu.cn/android https://mirrors.neusoft.edu.c ...

  3. 一个想休息的线程：JVM到底是怎么处理锁的？怎么不让我阻塞呢？

    我是一个线程,生活在JVM(Java虚拟机)中, 这一段日子过得有些无聊,整个世界似乎只有这一个人,天天忙着执行代码,想休息一下都很难. 我听说人类写的代码中有些特殊的地方,叫做临界区,比如synch ...

  4. python---random模块详解

    在python中用于生成随机数的模块是random,在使用前需要import, 下面看下它的用法. random.random random.random()用于生成一个0到1的随机符点数: 0 &l ...

  5. BZOJ2793[Poi2012]Vouchers——枚举

    题目描述 考虑正整数集合,现在有n组人依次来取数,假设第i组来了x人,他们每个取的数一定是x的倍数,并且是还剩下的最小的x个.正整数中有m个数被标成了幸运数,问有哪些人取到了幸运数. 输入 第一行一个 ...

  6. 自学Python2.9-循环（while、for)

    自学Python之路 自学Python2.9-循环(while.for) 1. while循环 Python中while语句的一般形式: while 判断条件: 语句 作用:提高开发效率,提高代码重用 ...

  7. 洛谷 P1057 传球游戏 解题报告

    P1057 传球游戏 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹 ...

  8. bzoj3277 串 (后缀数组+二分答案+ST表)

    常见操作:先把所有串都连到一起,但中间加上一个特殊的符号(不能在原串中/出现过)作为分割 由于全部的子串就等于所有后缀的所有前缀,那我们对于每一个后缀,去求一个最长的前缀,来满足这个前缀在至少K个原串 ...

  9. Elasticsearch基础知识要点QA

    前言:本文为学习整理实践他人成果的记录型博客.在此统一感谢各原作者,如果你对基础知识不甚了解,可以通过查看Elasticsearch权威指南中文版, 此处注意你的elasticsearch版本,版本不 ...

  10. Android 自定义ImageView支持缩放，拖拽，方便复用

    今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...