CSS学习之布局基础

文章的目录：

一、显示（display）

    1.1 盒模型（box-modle）

    1.2 行内元素以及块元素(inline && block )

    1.3 行内块元素（inline-block）

    1.4 弹性盒子布局（flex）

    1.5 隐藏（none）

二、位置（position） 

三、补充知识点

    3.1 浮动布局（float）

    3.2 层叠（z-index）

    3.3 溢出（overflow）

    3.4 resize( CSS3的内容 )

    3.5 分栏 ( column )

/*******************************************************************************************************************/

正文浏览

一、显示（display）

    1.1 标准的盒模型

    1.2 行内元素和块元素

     行内元素不能设置宽高，其宽度由内容决定。块元素默认占据一行

     行内元素：a、font（em、i、strong）、img、span

     块元素：div p ul li table form html5(header section footer)

    1.3 行内块元素（inline-block）

      消除两元素之间的空隙、两元素之间的空隙来源于元素之间的空格，拼接元素既可以消除

      例如

        <ul class="nav">  

            <li>首页</li><li>  

            文章</li><li>  

            留言</li>

         </ul>

    1.4 弹性盒子（flex）

        兼容性 ie11+, 小于ie10的需要做兼容处理

    1.5 隐藏元素（none:hidden）

        display：none会清除原本的空间

        visibility:hidden; // 隐藏元素display:none; // 隐藏元素并清除原本占用的布局空间

二、position定位

    static(静态定位)：默认值，没有定位，元素出现在正常的流中

    relative（相对定位）：生成相对定位的元素

    absolute(绝对定位)：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

    fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

三、关于CSS布局的补充

    3.1、float浮动布局

        浮动的妙用是用来做文字环绕图片，记得在父元素进行清除浮动的操作，overflow：hidden

    3.2 z-index层叠

        层叠可以控制元素的上下放置关系，值越大越在上面

    3.3 溢出overflow

    3.4 resize 定义用户是否可以调整当前元素框的大小

        resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

    3.5 分栏 column