css盒子模型(3)
2017-01-18 16:17
204 查看
盒子模型
作者博客地址:https://home.cnblogs.com/u/qdhxhz/
在讲理论之前,我们先要知道网页设计中常听的属性名:内容(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所以做个笔记,也没有想到这东西越写越多,在总结下去估计写不完了,还有一些比较重要的,比方说相对定位,标准流什么的,大家有兴趣总结去整理,以后我要用得到了我会在整理的。
欢迎大家给我纠错,或者没有写全的欢迎大家补充,谢谢了。
版权声明
本文原创作者:雨点的名字作者博客地址:https://home.cnblogs.com/u/qdhxhz/
在讲理论之前,我们先要知道网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
那具体指什么含义呢,我用通俗的话来给大家解释一下:
就好比你现在网上买了一个手机华为,那么新手机肯定是放在一个盒子里给你寄来。那么这华为本身就指的是内容(content),为了让手机安全寄到会在盒子里放点泡沫这就是填充(padding),那么这个盒子本身肯定是有它的宽度的这叫边框(border),每个盒子与每个盒子之间(也可以是块与块)的距离叫边界(margin)。
下面这个图看不懂没关系,接下来我会详细讲。
我们先来看一个小案例:我设置好一个块级标签的宽度为250;
<!DOCTYPE html> <html> <head> <title>盒子模型</title> <style type="text/css"> div{ width:250px; padding:10px; border:5px solid red; margin:10px; } </style> </head> <body> <div>欢迎关注博客园博客:雨点的名字</div> </body> </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 中间用空格
举个列子:
<!DOCTYPE html> <html> <head> <title>CSS的盒子模型</title> <style type="text/css"> input{ /*先统一去除表单原本的样式*/ border: none; /*默认情况下标签的border都是none,而input标签你使用的时候发现在外面会有一圈,所以input默认是有的*/ outline-style: none;/*这个有和没有也是有差别的,具体你可以自己测试,细微不同我这里就不延伸了*/ } .username{ border: 1px dashed red; background: yellowgreen; } .username:focus{ /*这里代表当class="username"的元素,一旦获得焦点那么元素的背景色就会改变*/ background-color: red; } .email{ border-bottom: 1px solid red; /*这个就代表就在底部设置一条线*/ } .mobile{ border:1px solid green; } </style> </head> <body> <label for="usernameid">用户名: </label> <!--这里的for=“”,这个是和input的id绑定,当我们点击input前面的文本标识会自动聚焦到文本框--> <!--这个例子,当我点击用户名的时候也就相当于input获得了焦点,也就是光标会自动定位到文本框里--> <input type="text" class="username" id="usernameid"> <br> <br> <label for="emailid">邮 箱:</label> <input type="text" class="email" id="emailid"> <br> <br> <label for="mobileid">电话: </label> <input type="text" class="mobile" id="mobileid"> </body> </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两者的最大值。
<!DOCTYPE html> <html> <head> <title>margin</title> <style type="text/css"> div{ margin:10px; } </style> </head> <body> <div>11111</div> <div>22222</div> <!--尽管上面的margin-bottom为10;下面的margin-top为10,按常理来说应该是10+10=20--> <div>33333</div> <!--,但是答案仍然是10px--> </body> </html
运行结果:
再看盒子的宽度
前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box
如上图(别的博客引用过来),div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。
建议大家在为系统写css时候,第一个样式是:
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢?
总结:关于盒子模型我就先讲这么多,接下来有关css或者http不着重写了,因为我本来是后台开发的,只是现在学了点http所以做个笔记,也没有想到这东西越写越多,在总结下去估计写不完了,还有一些比较重要的,比方说相对定位,标准流什么的,大家有兴趣总结去整理,以后我要用得到了我会在整理的。
欢迎大家给我纠错,或者没有写全的欢迎大家补充,谢谢了。