盒子模型

版权声明

     在讲理论之前，我们先要知道网页设计中常听的属性名：内容(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所以做个笔记，也没有想到这东西越写越多，在总结下去估计写不完了，还有一些比较重要的，比方说相对定位，标准流什么的，大家有兴趣总结去整理，以后我要用得到了我会在整理的。

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

 

css盒子模型（3）的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  3. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  4. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  5. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  6. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  7. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  8. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  9. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  10. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

随机推荐

  1. 【机器学习】人工神经网络ANN

    神经网络是从生物领域自然的鬼斧神工中学习智慧的一种应用.人工神经网络(ANN)的发展经历的了几次高潮低谷,如今,随着数据爆发.硬件计算能力暴增.深度学习算法的优化,我们迎来了又一次的ANN雄起时代,以 ...

  2. iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒

    如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒.做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发 ...

  3. 关于svg

    动画:css3动画,canvas(js动画),svg(html动画). svg基本元素 version: 表示 <svg> 的版本,目前只有 1.0,1.1 两种 xmlns:http:/ ...

  4. Bitmap.Config 说明 ALPHA_8 ARGB_4444 ARGB_8888 RGB_565

    这篇文章的目的是了解Bitmap.Config 你可以在使用这个方法的时候会遇到 Bitmap android.graphics.Bitmap.createBitmap(int width, int ...

  5. 【正则表达式】--python（表示字符）

    [前修知识] match :匹配    span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...

  6. 物联网蓝牙模块：DA14586蓝牙5模块很快到来

    Dialog半导体的SmartBond系列的下一代产品---DA14586已经发布.该全新的系统级芯片(SoC)是公司首款支持最新蓝牙5.0规范的独立器件,为先进应用提供最低的功耗和无可比拟的功能. ...

  7. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  8. 初学者易上手的SSH-整合

    许久没更新博客了! spring还有一章aop(面向切面),我就没讲述了,你们可以去看下代理模式. 那么我们开始整合:struts2  2.3.4 ,hibernate 5.2.10 ,spring ...

  9. IntelliJ IDEA（一） ：安装

    前言 我是从eclipse转IDEA的,对于习惯了eclipse快捷键的我来说,转IDEA开始很不习惯,IDEA快捷键多,组合多,记不住,虽然可以设置使用eclipse的快捷键,但是总感觉怪怪的.开始 ...

  10. MySQL 性能优化的最佳20多条经验分享（一）（转）

    当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这 ...