iOS转前端之盒子模型以及居中问题

来源：互联网发布：mysql删除表中的一列编辑：程序博客网时间：2024/06/07 08:41

OK。第三篇来了，今天来聊聊CSS布局中的盒子模型和居中问题。好了，直接开始吧~

前面介绍了一些HTML和CSS的基础知识，今天来说说CSS中的盒子模型和布局居中问题，这都是平时开发中经常遇到的问题。

盒子模型

---网页上的每一个标签都是一个盒子，每个盒子都有四个属性。

内容（content）

盒子里装的东西，网页中通常是指文字和图片。

填充（padding，内边距）

怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料。

边界（margin，外边距）

盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出。

边框（border）

盒子本身

下面看这张图片：

因为这个IE呢比较操蛋，喜欢不走寻常路，所以它的盒子模型跟别人不太一样，请看下面这两张图：

看出来不同了吧，没错，正常的浏览器的Width和Height属性算的就是显示内容的值，而IE的则是加上边框和内边距的总和。。。这让适配IE浏览器的同学很尴尬呀~~~

下面是关于盒子模型相关的一些属性：

内容属性：

边界属性：

下面是一个小例子：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{           background-color: green;           width: 300px;           height: 200px;            /*实线*/           /*border: 5px solid red;*/            /*虚线*/            /*border: 5px dashed red;*/            /*双线*/            border: 5px double red;           /*padding-left: 20px;*/           /*padding-top: 20px;*/           /*padding-right: 20px;*/           /*padding-bottom: 20px;*/           /*内边距*/           padding:15px;           /*设置边框的圆角*/           /*border-radius: 15px;*/           border-bottom-right-radius: 150px;          /*设置外边距*/            margin: 30px;        }    </style></head><body> <div>21212121</div></body>

在实际的书写过程中，我们可以单独设置上下左右任何一边的值，也可以一起设置，下面请看具体的写法：

当然光看还是不行的，要多敲敲代码，才可以记得更熟。盒子模型就介绍的差不多了，下面就来说说居中。居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。

先来说几种简单的、人畜无害的居中方法

1. 把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

2、使用 text-align:center

这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

3、使用line-height让单行的文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

4、使用表格

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。

5、使用display:table-cell来居中

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。

6、使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

7、另一种使用绝对定位来居中的方法

此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

下面用一段代码来了解这种方法：

8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。

浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。

9、利用font-size来实现垂直居中

如果父元素高度是已知的，要把它里面的子元素进行水平垂直居中，则可以使用这种方法，且子元素的宽度或高度都不必知道。

该方法只对IE6和IE7有效。

该方法的要点是给父元素设一个合适的font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须是一个inline或inline-block元素，需要加上vertical-align:middle属性。

至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。

上述所说就是我们经常使用的居中办法，下面还是用一段代码演示下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <!--      标签水平居中:      1. 行内标签  行内-块级标签 text-align: center;      2. 块级标签   margin: 0 auto;      标签的垂直居中:      line-height的高度等于height的高度    -->    <style>        #main{            width: 500px;            height: 300px;            background-color: red;            /*水平居中*/            text-align: center;            /*行高*/            /*line-height: 300px;*/        }        span{            background-color: yellowgreen;        }        .test1{            width: 350px;            /*height: 30px;*/            background-color: green;            text-align: center;            /*margin-left: auto;*/            /*margin-right: auto;*/            margin: 0 auto;            line-height: 300px;        }    </style></head><body>  <div id="main">     <!--行内标签-->      <!--<span>我是哈哈哈哈</span>-->     <!--行内-块级标签-->      <!--<input>-->     <!--块级标签-->      <div class="test1">123456</div>  </div></body></html>

CSS布局之浮动

上面的居中方法中提到了关于定位方面的知识，下面就展开来介=介绍下，这也是CSS布局中一个重要的知识点。

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

脱离标准流的方法有：

float属性

position属性和 left、right、top、bottom属性

float属性的常用取值有

left：脱离标准流，浮动在父标签的最左边

right：脱离标准流，浮动在父标签的最右边

OK，有点蒙，那先来看张图吧：

还是有点蒙，OK，还是要看看代码才能明白~

先来float布局相关的：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            background-color: red;            width: 500px;            height: 250px;        }        span{            background-color: blue;        }        .test1{            /*脱离标准流*/            float: right;        }        .test2{            float: left;        }    </style></head><body>   <div>       <span class="test2">111111</span>       <span class="test1">222222</span>       <span class="test3">33333</span>       <span>44444</span>   </div></body></html>

然后看下position属性相关的：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            background-color: red;            width: 500px;            height: 250px;        }        span{            background-color: blue;        }        .test1{            /*脱离标准流*/            float: right;        }        .test2{            float: left;        }    </style></head><body>   <div>       <span class="test2">111111</span>       <span class="test1">222222</span>       <span class="test3">33333</span>       <span>44444</span>   </div></body></html>

OK，今天的内容差不多就介绍到这，作为一个业余前端工程师，很多知识点肯定介绍的还是比较浅显，希望多多见谅，毕竟还是要靠iOS吃饭的，今天周五，明天不上班，哈哈，很开心~~~

阅读全文

0 0