Ø  默认情况下，内部元素（如：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# 语言习惯

    目录 一.使用属性而不是可访问的数据成员 二.使用运行时常量(readonly)而不是编译时常量(const) 三.推荐使用 is 或 as 操作符而不是强制类型转换 四.使用 Conditional ...

  2. Layui_1.0.9_分页实例_Java

    一.实体 package com.ebd.application.modules.taskManage.pojo; import com.ebd.application.common.Base.Bas ...

  3. [ctsc2018] 混合果汁 【可持久化线段树】【二分答案】

    题目分析 首先考虑到最小值最大,二分答案.假设答案为k,显然这满足单调性.如果某个k使得这个情况下选不出.那么比k大的一定也选不出,所以二分答案. 接着我们可以贪心,当我们确认了k以后,一定会优先选费 ...

  4. Educational Codeforces Round 4 B. HDD is Outdated Technology

    题目链接:http://codeforces.com/problemset/problem/612/B 解题思路: 一开始看错了题意,他要求的是从1-n所耗费的时间,n表示的是数值而不是下标, 实现代 ...

  5. MT【58】反演圆和极线极点和谐统一

    解答:如图 评:1.反演圆及其性质介绍: 评2:此题的源头是1995年全国卷压轴题,这里用极线极点的相关性质也可以处理: 注:用相关点法很容易得到轨迹.

  6. Python Matplot中文显示完美解决方案

    原因与现象 Matplot是一个功能强大的Python图表绘制库,很遗憾目前版本自带的字体库中并不支持中文字体.所以如果在绘制内容中需要显示中文,那么就会显示为方格字符. 解决办法 有一个较为完美的解 ...

  7. android 组件使用()

    程序入口点 类似于win32程序里的WinMain函数,Android自然也有它的程序入口点.它通过在AndroidManifest.xml文件中配置来指明,可以看到名为NotesList的activ ...

  8. emwin 之消息 WM_INIT_DIALOG

    @2018-08-09 小记 消息 WM_INIT_DIALOG 在创建窗口时首先发送且只在创建窗口时发送即只发送这一次

  9. Django + Uwsgi +Nginx生产环境部署

    python manage.py runserver 0.0.0.0:80 ,一定不要用这个轻量级Server作为你的生产环境下的Server,因为它只能用于开发自测阶段.它既没有安全审计功能,而且又 ...

  10. Looper Handler Mssage

    1. 一个Handler只有一个队列;2. 在调用Handler.post(Runnable runnable)方法时,会将runnable封装成一个Message;3. 在队列执行时,会判断当前的M ...