Ø  默认情况下，内部元素（如：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. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  2. js & float number bug

    js & float number bug 前端最好不要处理任何的 float number 的计算/精确度转换的操作,不热很容易丢失精度,显示错误! 前端显示个 0.0 都很费劲,最好的方式 ...

  3. docker--compose--sonarqube

    Create this docker-compose.yml file: version: "2" services: sonarqube: image: sonarqube po ...

  4. BZOJ4517[Scoi2016]美味——主席树

    题目描述 一家餐厅有 n 道菜,编号 1...n ,大家对第 i 道菜的评价值为 ai(1≤i≤n).有 m 位顾客,第 i 位顾客的期 望值为 bi,而他的偏好值为 xi .因此,第 i 位顾客认为 ...

  5. Git初次使用总结,安装到上传代码,多平台[码云|github]

    安装步骤 1.选择安装路径 2.选择创建图标,选择安装Git Bash和Git GUI 3.选择创建开始菜单 4.选择:use git and optional unix tools from the ...

  6. poj2965 【枚举】

    The game “The Pilots Brothers: following the stripy elephant” has a quest where a player needs to op ...

  7. P3312 [SDOI2014]数表

    啊啊啊我昨天怎么没写题解wwww 补昨日题解... 题目链接 : https://www.luogu.org/problemnew/show/P3312 也是莫反 我要把fft留到今天写 [和zyn小 ...

  8. 丢手帕问题 （约瑟夫问题）Java实现

    问题: 丢手帕游戏是约瑟夫问题的一个变种,游戏很简单,N个小孩围成一个圈,标号为1到N,从编号为m的小孩开始报数,报到第L个小孩退出游戏,然后下一个小孩继续从1开始报数,数到第L个小孩退出游戏,如此循 ...

  9. 洛谷 P3253 [JLOI2013]删除物品 解题报告

    P3253 [JLOI2013]删除物品 题目描述 箱子再分配问题需要解决如下问题: (1)一共有\(N\)个物品,堆成\(M\)堆. (2)所有物品都是一样的,但是它们有不同的优先级. (3)你只能 ...

  10. Mysql插入、替换和无视

    在现实的生产环境下,通常我们都会遇到这样的应用场景,需要我们更新数据.替换数据,若存在则不操作. insert into表示插入数据,数据库会检查主键,如果出现重复会报错: replace into表 ...