CSS盒子模型初解
2017-07-25 17:42
183 查看
我们如果以面向对象的角度去考虑CSS提供的盒子模型,可以建立一个BOX对象进行表示:
如下图所示
![](https://img-blog.csdn.net/20170725171432867?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaWNlcmFpbl81MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
CSS将每个元素都包在一个看不见的盒子中,这个盒子包括margin、border、padding以及content内容。marging决定盒子距离其父级元素的距离,boder决定盒子边框的样式,padding控制元素显示内容与框边的距离,content才是元素真正显示的部分。写一段测试代码如下:
效果图如下:
![](https://img-blog.csdn.net/20170725172133124?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaWNlcmFpbl81MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
盒子正如其名,想象一下我们收到的快递包裹,在买的物品<content>外面有一个盒子,盒子与物品直接有填充物<padding>防止物品损坏,盒子本身具有一定的厚度和高度<border>,而假设盒子被放在箱子(或任何容器,只要方便理解)中,箱子与盒子之间的距离就是外边距<margin>。
![](https://img-blog.csdn.net/20170725172525846?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaWNlcmFpbl81MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
我们知道,在平面显示中,需要确定上下左右的距离才能进行定位,在CSS中,定位也是一样的操作,如果同样使用面向对象进行理解,可以有如下对象:
CSS盒子模型标准分IE版和W3C版,一般都会选择W3C版作为显示标准,当然,如果不加以规定的话,在不同浏览器上显示效果可能有比较大的差异,浏览器的默认解析标准并不相同,所以一般会加上doctype 声明,告诉浏览器使用什么标准进行解析:
最后,希望本文能帮助到有需要的朋友
public class Box{ // 外边距:控制与父级元素的距离 public Margin margin; // 边框:控制边框的样式 public Border border; // 内边距:控制元素与边框之间的距离(又称之为填充) public Padding pad; // 元素内容:显示的文字内容 public Content con; }
如下图所示
CSS将每个元素都包在一个看不见的盒子中,这个盒子包括margin、border、padding以及content内容。marging决定盒子距离其父级元素的距离,boder决定盒子边框的样式,padding控制元素显示内容与框边的距离,content才是元素真正显示的部分。写一段测试代码如下:
<html> <head> <title>CSS盒子模型</title> <style type="text/css"> div{ /*设置元素部分的宽高*/ width:100px; height: 100px; /*设置边框*/ border-style:solid; border-color: #22DDDD; border-width:5px; /*设置该样式后,元素外框变大了*/ padding-left: 20px; padding-top: 50px; /*设置外边距*/ margin-left:50px; margin-top: 50px; } </style> </head> <body> <div class="ele" style="background-color: #66ffff"> 元素内容 </div> </body> </html>
效果图如下:
盒子正如其名,想象一下我们收到的快递包裹,在买的物品<content>外面有一个盒子,盒子与物品直接有填充物<padding>防止物品损坏,盒子本身具有一定的厚度和高度<border>,而假设盒子被放在箱子(或任何容器,只要方便理解)中,箱子与盒子之间的距离就是外边距<margin>。
我们知道,在平面显示中,需要确定上下左右的距离才能进行定位,在CSS中,定位也是一样的操作,如果同样使用面向对象进行理解,可以有如下对象:
public class Margin{ public String top;//上:表示为margin-top public String bottom;//下:表示为margin-bottom public String left;//左:表示为margin-left public String right;//右:表示为margin-right }外边距有上下左右四个属性,用来对元素进行定位以及分别设置不一样的样式,举个栗子:
border-style:dotted solid double dashed其代表的顺序是边框的上、右、下、左分别不同的样式设置。
CSS盒子模型标准分IE版和W3C版,一般都会选择W3C版作为显示标准,当然,如果不加以规定的话,在不同浏览器上显示效果可能有比较大的差异,浏览器的默认解析标准并不相同,所以一般会加上doctype 声明,告诉浏览器使用什么标准进行解析:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
最后,希望本文能帮助到有需要的朋友