css盒子模型(3)

时间:2022-12-13 22:49:15

盒子模型

版权声明

     在讲理论之前,我们先要知道网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

那具体指什么含义呢,我用通俗的话来给大家解释一下:

    就好比你现在网上买了一个手机华为,那么新手机肯定是放在一个盒子里给你寄来。那么这华为本身就指的是内容(content),为了让手机安全寄到会在盒子里放点泡沫这就是填充(padding),那么这个盒子本身肯定是有它的宽度的这叫边框(border),每个盒子与每个盒子之间(也可以是块与块)的距离叫边界(margin)。

下面这个图看不懂没关系,接下来我会详细讲。

    css盒子模型(3)

我们先来看一个小案例:我设置好一个块级标签的宽度为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。

css盒子模型(3) 

因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + 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

运行结果如下:

css盒子模型(3)

上面实现几个特点: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

运行结果:

css盒子模型(3)

再看盒子的宽度

前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box

css盒子模型(3)

如上图(别的博客引用过来),div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。

建议大家在为系统写css时候,第一个样式是:

css盒子模型(3)

大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢?

总结:关于盒子模型我就先讲这么多,接下来有关css或者http不着重写了,因为我本来是后台开发的,只是现在学了点http所以做个笔记,也没有想到这东西越写越多,在总结下去估计写不完了,还有一些比较重要的,比方说相对定位,标准流什么的,大家有兴趣总结去整理,以后我要用得到了我会在整理的。

欢迎大家给我纠错,或者没有写全的欢迎大家补充,谢谢了。