css3布局样式

css布局：是css知识体系的重中之重

一、css布局阶段：

1. 早期以table为主（简单）
2. 后来以技巧性布局为主（难）
3. 现在有flexbox/grid（偏简单）
4. 响应式布局是必备的

二、常用布局

1. table布局
2. float浮动+margin
3. inline-block 布局
4. flexbox布局

1.table布局 

.left{
            background:red;
        }
        .right{
            background:blue;
        }
        table{
            width:800px;
            height:200px;
            border-collapse: collapse;
        }

 
        
            
            
        
    
左
右

css3中类表格

.table{
            margin-top:20px;
            display: table;
            width:800px;
            height:200px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: middle;
            display: table-cell;
        }

        

            

                左
            
            

                右
            
        

2.其他布局的基础知识

盒模型

1. display/position  作用：确认元素的显示元素
2. block/inline/inline-block 作用：确认元素的位置
3. static/relative/absolute/fixed：absolute是相对最近的父级relative/absolute 没有向上找 找不到就相对body定位
4. z-index：z轴高度 有relative/absolute/fixed属性的可以使用

3.flexbox布局

1. 弹性盒子
2. 盒子本来就是并列的
3. 指定宽度即可
4. 但有兼容问题 

   .container{
            width:800px;
            height:200px;
            display: flex;
            border:1px solid black;
        }
        .flex{
            background:red;
            margin:5px;
            flex:1
        }

        

            flex
        
        

            flex
        
        

            flex
        
        

            flex
        
        

            flex
        

4.float布局

• 元素浮动
• 脱离文档流
• 不会脱离文本流

对float自身影响：

• 形成“块”(bfc)
• 位置尽量往上靠
• 位置尽量靠左(右)

对兄弟的影响：

• 上面贴非float元素
• 旁边贴float元素
• 不影响其他块级元素位置
• 影响其他块级元素内部文本

对父级元素的影响

• 从父级中消失
• 父级高度塌陷   解决办法：overflow:auto;/overflow:hidden;

清除浮动：

•     .class ::after{ content=" ";display:block;visibility:hidden;height:0; clear both;}
•    
   

三栏布局:

  .container{
            width:800px;
            height:200px;
        }
        .left{
            background:red;
            /* float:left; */
            /* height:100%; */
            width:200px;
            position: absolute;
            height:200px;
        }
        .right{
            background:blue;
            float:right;
            width:200px;
            height:100%;
        }
        .middle{
            margin-left:200px;
            margin-right:200px;
        }

        

            左
        
        

            右
        
        

            中间
        

5.inlink-block布局

1. 像文本一样排block元素
2. 没有清除浮动等问题
3. 需要处理间隙

  .container{
            width:800px;
            height:200px;
            font-size:0;/*处理间隙*/
        }
        .left{
            font-size:14px;
            background:red;
            display: inline-block;
            width:200px;
            height:200px;
        }
        .right{
            font-size:14px;
            background:blue;
            display: inline-block;
            width:600px;
            height:200px;
        }

        

            左
        
        

            右
        

三、响应式设计和布局

• 在不同设备上都能正常使用
• 一般主要处理屏幕大小问题

主要方法：

1. 隐藏+折行+自适应空间
2. rew（1rem=16px）
3. viewport  
4. media query:@media (max-width: 屏幕像素)

隐藏案例：

    
    
    
    
    


    

        

            这里是一些不重要的内容，比如友情链接、广告
        
        

            这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。
        
    

折行案例：
 

    
    
    
    
    


    

        

            介绍1
        
        

            介绍2
        
        

            介绍3
        
        

            介绍4
        
    

四、布局面试题:

1.实现两、三栏布局的方法：

1. table表格布局
2. float+margin布局(注意需清除浮动)
3. inline-block布局(注意处理间隙)
4. flexbox布局(注意兼容性)

2.position:absolute/fixed有什么不同？

1. position:absolute相对最近的absolute/relative
2. fiexd相对屏幕(vewport)  注意：在老版移动端存在兼容问题

3.display:inline-block的间隙

• 原因：字符间距
• 解决：消灭字符或者消灭间距

4.如何清除浮动

• 让盒子负责自己的布局
• overflow:hidden(auto)
• ::after{clear:both}

5.如何适配移动端的页面

• viewport
• rem/ciewport/media query
• 设计上：隐藏 折行 自适应