Ø  默认情况下，内部元素（如：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. array与List之间相互转化

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/28 16:05 # @Author : zhang chao # @Fi ...

  2. 微信小程序开发4之form表单与弹出层

    第一 表单的提交和重置 第二 radio组件 第三 checkbox组件 第四 loading组件 第五 toast组件 第六 modal组件

  3. SP5973 SELTEAM - Selecting Teams

    SP5973 SELTEAM - Selecting Teams [题目描述] 他已经有 n 个心仪的妹子了,但随着时间的流逝,只有 m(1<=m<=k)个直伴随在他的身边,而小小迪发现他 ...

  4. day30 hashlib模块

    hashlib 提供摘要算法 最常见的就是MD5,当然一般来说MD5已经被足够了 不管算法多不一样,但是摘要的功能是不变的 对于相同的字符串进行摘要,使用同一个算法得到的值总是不变的 不同算法的话,会 ...

  5. day26 单继承

    继承是创建新类的一种方式,目的就为了减少代码.表达了子类是父类的关系,比如狗是动物,教授是老师一个类可以多个类继承,所有语言都是这样的一个类可以继承多个父类 ,只有python支持多继承子类可以找到父 ...

  6. Linux开机自动挂载存储的两种方式

    登录服务器,给查看了下,发现确实是没有自动加载,df -h只能显示本地硬盘的分区,fdisk -l 还是能看到存储空间,这说明这个服务器连接存储是木有问题的. 输入history | grep mou ...

  7. Stack Overflow：研究发现访问PHP和 Android的流量更可能来自低收入国家

    Stack Overflow 的数据科学家  David Robinson 发现,软件行业的分工让不同发达地区的程序员依赖于不同的编程语言.软件已经是一个全球性的行业,也有高端低端之分,最高端的是数据 ...

  8. Twitter数据挖掘：如何使用Python分析大数据

    我们可以创建变量来存放待拉取的微博数量(即count),以及待拉取的用户(即name).然后用这两个参数调用user_timeline()函数.下面是更新后的代码(注意,在代码的顶部应该保持认证和AP ...

  9. 老铁，这年头得玩玩这个：Git基本操作【github】

    GitHub创建项目 本地创建项目 1.初始化配置,设置仓库人员的用户名和邮箱地址,这一步必不可少 git config --global user.name "uncleyong" ...

  10. luogu4197 Peaks (kruskal重构树+主席树)

    按照边权排序建出kruskal重构树,每次就变成了先找一个权值<=x的最远的祖先,然后看这个子树的第k小.离散化一下,在dfs序上做主席树即可 而且只需要建叶节点的主席树 注意输出的是第k小点的 ...