zoukankan      html  css  js  c++  java
  • CSS (二)解析CSS盒子

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

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

          CSS盒子,一開始听起来还有点高大上的赶脚。

    后来了解之后,发现事实上非常easy理解。从功能上讲非常方便,但真正做好熟练运用就并非那么非常easy了。

          它作为div的核心部分。能够说统治了大部分前台,当中比較不easy做好的主要是“浮动”“相对/绝对定位”问题。

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

          

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

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

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

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

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

         

          简述浮动和定位:

          浮动:浮动主要是帮助对象在网页中对齐的。

    如。某块级元素非常小。却占了一行,我们想让他挪到上边一行去。这时就要用浮动了。

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

          定位:定位分为静态和动态两类。静态(绝对定位)是“贡献的”,即它移走之后同意别人代替自己位置;同一时候它的定位以父级为參考的。反映在代码中即body。

    动态(相对定位)是“自私的”,它移走后也不同意别人代替自己原来的位置。它以自己为參考。

    (之后有详述~~~)

     

          小结:CSS盒子我们能够把它分解为双方面来学习:一方面是它的实现原理,还有一方面是它的控制应用。原理体如今css+div设计思想中,应用体如今web排版和设计上。

          

         

     

     

     

     

     

     

     

     

     

     

     

          

  • 相关阅读:
    JS设计模式——工厂模式详解
    JS 使用const声明常量的本质(很多人都有误解)
    模拟ES6中的Promise实现,让原理一目了然
    JS设计模式——观察者模式(通俗易懂)
    JS设计模式——单例模式剖析
    C#播放文字内容
    通过自定义扩展方法DistinctBy实现去重
    C#缓存HttpRuntime.Cache
    Oracle中dblink的使用
    Oracle查询最近执行的sql脚本
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/6821549.html
Copyright © 2011-2022 走看看