CSS (二)解析CSS盒子

      话说,一写博客还有些莫名的兴奋感……

      这几天一直挤时间忙于赶牛腩视频,迟到的CSS盒子,请谅解。    

      CSS盒子,一开始听起来还有点高大上的赶脚。后来了解之后,发现其实很容易理解。从功能上讲很方便,但真正做好熟练运用就并不是那么很容易了。

      它作为div的核心部分,可以说统治了大部分前台,其中比较不容易做好的主要是“浮动”“相对/绝对定位”问题。

      先系统说一下CSS盒子到底是什么。请看下图。

      

      我们先想一个现实生活中真实的纸盒子,盒子里装着灯泡。

      首先,这个盒子本身肯定是有厚度的,即border;灯泡易碎,要和盒子有个保护层起缓冲作用,保护层即padding;我们运送这个盒子时,要尽量不合其他易碎品或能产生强大压力的东西紧挨着,要有一个隔离空间,即margin;我们的灯泡就是盒子里的content。

      看到这,大家想必都明白了盒子是什么东西。那到底它在web页面设计中是怎么发挥作用的?与css有什么关系?为什么它会产生并得到广泛应用?

      实际上,用css+div开发web页面时,页面上的图片、行/段落文字、按钮等其实都是一个个盒子排列组合而成的,在代码里存在于div块中。css就是控制这些盒子怎么放、放在哪、以什么形式放的“控制器”。即,实现了结构和表现的分离。

      和传统的表格和表格的嵌套来定位来排版网页内容相比,显然更具有了灵活性和易操作性。

     

      简述浮动和定位:

      浮动:浮动主要是帮助对象在网页中对齐的。如,某块级元素很小,却占了一行,我们想让他挪到上边一行去,这时就要用浮动了。

      它分为none,左/右对齐,盒子内嵌套等多种情况。欲知详情,下篇博客会为大家说明。

      定位:定位分为静态和动态两类,静态(绝对定位)是“贡献的”,即它移走之后允许别人取代自己位置;同时它的定位以父级为参考的,反映在代码中即body。 动态(相对定位)是“自私的”,它移走后也不允许别人取代自己原来的位置;它以自己为参考。(之后有详述~~~)

 

      小结:CSS盒子我们可以把它分解为两方面来学习:一方面是它的实现原理,另一方面是它的控制应用。原理体现在css+div设计思想中,应用体现在web排版和设计上。

      

     

 

 

 

 

 

 

 

 

 

 

 

      

CSS (二)解析CSS盒子,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。