Ø  默认情况下，内部元素（如：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. 小项目分析之C++ 实现模拟银行排队

      一.问题定义与分析 问题定义 •要解决的问题——银行一天之内的: 1.总客户数 2.客户总逗留时间 3.客户平均逗留时间 问题分析 •新来的人找个短的队伍,站在队尾开始排队 •排在队头的人可以办理 ...

  2. 3.27PSP及体会

    首先,我还是第一次了解老师这种先喂鸡汤,再打鸡血的行为,大老板的出现让我有些措手不及,我 的 天 啊! 话说这周alpha版本实现,真的是好费脑筋,因为预定是4~6周的项目一周弄完,而且还是在拥有几个 ...

  3. 《ERP系统》客户信用及风控代码

    1.风控核心代码: <?php namespace core\models; class SalesCustomersFacade extends \common\models\Base{ /* ...

  4. rabbitmq使用报错总结

    最近公司重构服务器架构,需要用到rabbitmq,在公司搞了一个下午还是连接不上,后来细看了英文说明,测试连接成功,得出如下报错几点. 我用的安装包:otp_win64_21.3.exe(erlang ...

  5. VMware下Mac系统自适应屏幕

    1.下载VMwareTool工具镜像 链接:https://pan.baidu.com/s/1gvXBdzrwYyOEl6yhJurUig 提取码:s1po 2.打开Mac系统,推出DVD 2.设置连 ...

  6. 睡前小dp-hdu3853-概率dp

    http://acm.hdu.edu.cn/showproblem.php?pid=3853 膜猴烧酒madoka 讲定义为dp[i][j] 位置为ij的魔法值期望,可以发现dp[i][j] = dp ...

  7. POJ1860（Currency Exchange）

    题意: 给出一张各种货币交换的网络,问在网络中交换原有的货币,问货币能否增值? 解析: 判断是否存在正环即可  用spfa  负环和正环的判定方法一样  如果一个点的进队次数超过n次 则存在环 代码如 ...

  8. Internet Explorer 10 administration IE10管理

    http://4sysops.com/archives/internet-explorer-10-administration-part-1-overview/ http://4sysops.com/ ...

  9. SharePoint 2013 APP 开发示例 （四）JQuery访问REST

    这个示例里,我们将用JQuery AJAX去发送一个 REST请求,并查看返回结果.为了让我们更好地理解REST 接口,我们将添加一个输入框让用户可以指定REST的URL, 这将让我们尝试着用构造的U ...

  10. luogu4187 [USACO18JAN]Stamp Painting (dp)

    可以发现,只要存在连续k个相同的,这个情况就一定是合法情况 然而这个不太好算,我们算不存在k个相同的,然后用$m^n$把它减掉 设f[i]为前i个,没有连续k个的 显然$f[i]=m^i ,i< ...