css盒子模型（3）
2017-01-19 10:31
387 查看
盒子模型
作者博客地址：http://blog.csdn.net/yudiandemingzi
在讲理论之前，我们先要知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
那具体指什么含义呢，我用通俗的话来给大家解释一下：
就好比你现在网上买了一个手机华为，那么新手机肯定是放在一个盒子里给你寄来。那么这华为本身就指的是内容（content），为了让手机安全寄到会在盒子里放点泡沫这就是填充（padding），那么这个盒子本身肯定是有它的宽度的这叫边框（border），每个盒子与每个盒子之间（也可以是块与块）的距离叫边界（margin）。
下面这个图看不懂没关系，接下来我会详细讲。
我们先来看一个小案例：我设置好一个块级标签的宽度为250；
运行结果：下面里面那圈黑线是我自己加进去的，为的是让大家看的更加清楚padding是哪一部分。它这里总宽度就指：文字内容宽度：250;中间空白：10px(左右各10);boeder宽度:5px(左右各5)；margin：10px（左右各10），所以总共真是的宽度为300px。
因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。具体怎么解决我们晚点讲，接下来我们还是先讲属性。
1：边框(border)
border:1px solid red;
1px 是边框的粗细，red是边框的颜色，solid是边框的样式
border-width 边框宽度：一般用像素表示
border-color 颜色有：可以是英文单词；也可以是16进制（记得有#号）
border-style 样式有：dashed虚线/dotted点线/solid实线/double双线（像素跳高才明显）/hidden隐藏/groove3D 凹槽边框/ridge：3D垄状边框/inset：3D朝内边框/outset：3D朝外边框
边框的四边：
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格
举个列子：
运行结果如下：
上面实现几个特点：1：用户名右边文本框得到焦点，那么背景色会自动变成红色。2：当你点击用户名焦点会到input文本框中3：邮箱中的input告诉我们为什么前面要对input标签做一个处理去掉border。
注解：border: none ： 取消表单边框
outline-style:none;取消表单轮廓线
.username:focus ：直接为这个类的标签添加焦点事件，这个很有用需要大家牢记
2：填充（padding）
内容与边框之间是可以设置距离，称之为填充。其顺序为上 右 下 左
padding:10px 20px 30px 40px;
也可以分开写
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
如果上 右 下 左 的值是一样的；可以直接写成一个
padding:10px;
如果上 下；右 左一样；可以写成两个
padding:10px 20px;
3：边界（margin）
它的用法和填充一样的，所以具体这里不再多说。不过有一点希望大家记住：
1：两个盒子垂直显示的时候，如果上方的盒子设置了margin-bottom: Mpx并且下方的盒子设置了 margin-top:Npx；那么两者的实际间距并不是M+N而是M、N两者的最大值。
运行结果：
再看盒子的宽度
前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box
如上图（别的博客引用过来），div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。
建议大家在为系统写css时候，第一个样式是：
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？
总结：关于盒子模型我就先讲这么多，接下来有关css或者http不着重写了，因为我本来是后台开发的，只是现在学了点http所以做个笔记，也没有想到这东西越写越多，在总结下去估计写不完了，还有一些比较重要的，比方说相对定位，标准流什么的，大家有兴趣总结去整理，以后我要用得到了我会在整理的。
欢迎大家给我纠错，或者没有写全的欢迎大家补充，谢谢了。
版权声明
本文原创作者：蜗牛的博客作者博客地址：http://blog.csdn.net/yudiandemingzi
在讲理论之前，我们先要知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
那具体指什么含义呢，我用通俗的话来给大家解释一下：
就好比你现在网上买了一个手机华为，那么新手机肯定是放在一个盒子里给你寄来。那么这华为本身就指的是内容（content），为了让手机安全寄到会在盒子里放点泡沫这就是填充（padding），那么这个盒子本身肯定是有它的宽度的这叫边框（border），每个盒子与每个盒子之间（也可以是块与块）的距离叫边界（margin）。
下面这个图看不懂没关系，接下来我会详细讲。
我们先来看一个小案例：我设置好一个块级标签的宽度为250；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>盒子模型</title>
5 <style type="text/css">
6 div{
7 width:250px;
8 padding:10px;
9 border:5px solid red;
10 margin:10px;
11 }
12 </style>
13 </head>
14 <body>
15 <div>欢迎关注博客园博客：雨点的名字</div>
16 </body>
17 </html>运行结果：下面里面那圈黑线是我自己加进去的，为的是让大家看的更加清楚padding是哪一部分。它这里总宽度就指：文字内容宽度：250;中间空白：10px(左右各10);boeder宽度:5px(左右各5)；margin：10px（左右各10），所以总共真是的宽度为300px。
因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。具体怎么解决我们晚点讲，接下来我们还是先讲属性。
1：边框(border)
border:1px solid red;
1px 是边框的粗细，red是边框的颜色，solid是边框的样式
border-width 边框宽度：一般用像素表示
border-color 颜色有：可以是英文单词；也可以是16进制（记得有#号）
border-style 样式有：dashed虚线/dotted点线/solid实线/double双线（像素跳高才明显）/hidden隐藏/groove3D 凹槽边框/ridge：3D垄状边框/inset：3D朝内边框/outset：3D朝外边框
边框的四边：
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格
举个列子：
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <title>CSS的盒子模型</title>
6 <style type="text/css">
7
8 input{ /*先统一去除表单原本的样式*/
9 border: none; /*默认情况下标签的border都是none，而input标签你使用的时候发现在外面会有一圈，所以input默认是有的*/
10 outline-style: none;/*这个有和没有也是有差别的，具体你可以自己测试，细微不同我这里就不延伸了*/
11 }
12
13 .username{
14 border: 1px dashed red;
15 background: yellowgreen;
16 }
17
18 .username:focus{ /*这里代表当class="username"的元素，一旦获得焦点那么元素的背景色就会改变*/
19 background-color: red;
20 }
21
22 .email{
23 border-bottom: 1px solid red; /*这个就代表就在底部设置一条线*/
24 }
25
26 .mobile{
27 border:1px solid green;
28
29 }
30
31 </style>
32 </head>
33 <body>
34 <label for="usernameid">用户名: </label> <!--这里的for=“”,这个是和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框-->
35 <!--这个例子，当我点击用户名的时候也就相当于input获得了焦点，也就是光标会自动定位到文本框里-->
36 <input type="text" class="username" id="usernameid">
37 <br>
38 <br>
39 <label for="emailid">邮 箱：</label>
40 <input type="text" class="email" id="emailid">
41 <br>
42 <br>
43 <label for="mobileid">电话: </label>
44 <input type="text" class="mobile" id="mobileid">
45 </body>
46 </html运行结果如下：
上面实现几个特点：1：用户名右边文本框得到焦点，那么背景色会自动变成红色。2：当你点击用户名焦点会到input文本框中3：邮箱中的input告诉我们为什么前面要对input标签做一个处理去掉border。
注解：border: none ： 取消表单边框
outline-style:none;取消表单轮廓线
.username:focus ：直接为这个类的标签添加焦点事件，这个很有用需要大家牢记
2：填充（padding）
内容与边框之间是可以设置距离，称之为填充。其顺序为上 右 下 左
padding:10px 20px 30px 40px;
也可以分开写
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
如果上 右 下 左 的值是一样的；可以直接写成一个
padding:10px;
如果上 下；右 左一样；可以写成两个
padding:10px 20px;
3：边界（margin）
它的用法和填充一样的，所以具体这里不再多说。不过有一点希望大家记住：
1：两个盒子垂直显示的时候，如果上方的盒子设置了margin-bottom: Mpx并且下方的盒子设置了 margin-top:Npx；那么两者的实际间距并不是M+N而是M、N两者的最大值。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>margin</title>
5 <style type="text/css">
6 div{
7 margin:10px;
8 }
9 </style>
10 </head>
11 <body>
12 <div>11111</div>
13 <div>22222</div> <!--尽管上面的margin-bottom为10；下面的margin-top为10，按常理来说应该是10+10=20-->
14 <div>33333</div> <!--，但是答案仍然是10px-->15 </body>
16 </html运行结果：
再看盒子的宽度
前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box
如上图（别的博客引用过来），div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。
建议大家在为系统写css时候，第一个样式是：
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？
总结：关于盒子模型我就先讲这么多，接下来有关css或者http不着重写了，因为我本来是后台开发的，只是现在学了点http所以做个笔记，也没有想到这东西越写越多，在总结下去估计写不完了，还有一些比较重要的，比方说相对定位，标准流什么的，大家有兴趣总结去整理，以后我要用得到了我会在整理的。
欢迎大家给我纠错，或者没有写全的欢迎大家补充，谢谢了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 