CSS中的页面布局方式

页面布局

在实际工作,页面布局有以下几种:

  • table 布局

  • div+css布局

  • 弹性布局

  • 网格布局

table布局(了解)

这种布局方式早期经常使用,大概在 2000 看开始就基本上不使用这种布局方式了。因为它解析性能差。




    
    table 布局



    
        
    
    
        
    
    
        
    
顶部内容
           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
用户注册
用户名
密码
性别
爱好 写作 听音乐 体育
省份                                                    
自我介绍
                                                                               
           
       
底部

DIV+CSS布局

盒子模型

div是一个标准块标签,而HTML的块标签都存在了 margin, padding, border 等属性,我们就可以通过这些内边距、边框、外边距来控制不同的标签的布局和存放位置,这个就是我们经常说的盒子模型。

自从 1996 年 CSS1 的推出,W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中,我们可以通过控制盒子属性,来操作页面。

盒模型主要定义四个区域:内容(content)、内边距(padding)、边界(border)和外边距(margin),如图5-1所示。

示例案例




    
    DIV+CSS布局
    


   

用户注册

   
       
                               
       
                               
       
                                           
       
                                           
       
                               
       
                               
       
                               
   

DIV+CSS




    
    DIV+CSS布局
    


   
用户注册
   
       
                               
       
                               
       
                                           
       
                                           
       
                               
       
           
自我介绍
           
       
           

弹性布局

        弹性布局是 CSS3 中出现一种布局方式,它的作用是更加方便快捷来进行页面布局。但它只能对一维元素进行布局,如果是多维元素就不能胜任。

要想使用弹性布局,我们就需要使用 display: flex; 来开启弹性布局。

引入案例:

1)不使用弹性布局,而是使用 DIV+CSS




    
    使用DIV+CSS实现导航菜单
    


   
           
  • 游戏1
  •        
  • 游戏2
  •        
  • 游戏3
  •        
  • 游戏4
  •        
  • 游戏5
  •        
  • 游戏6
  •        
  • 游戏7
  •        
  • 游戏8
  •        
  • 游戏9
  •    

2)使用弹性布局




    
    使用弹性布局实现导航菜单
    


   
           
  • 游戏1
  •        
  • 游戏2
  •        
  • 游戏3
  •        
  • 游戏4
  •        
  • 游戏5
  •        
  • 游戏6
  •        
  • 游戏7
  •        
  • 游戏8
  •        
  • 游戏9
  •    

弹性布局属性介绍

  • flex-direction:指定弹性容器中子元素的排列方式,默认是以水平轴为主轴,垂直轴为辅助轴。有以下几个值:

    • row,默认值,水平排列

    • row-reverse:水平反向排列

    • column:垂直排列

    • column-reverse:垂直反向排列

  • flex-wrap:设置弹性盒子的子元素超出父容器时是否换行,有以下几个值:

    • nowrap:不换行,默认值

    • wrap:换行

    • wrap-reverse:换行并反向排列

  • flex-flow:它是上面两个的简写方式

  • align-items:设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式,有以下几个值:

    • flex-start:顶对齐,默认值

    • flex-end:底对齐

    • center:垂直居中对齐

    • baseline:基线对齐

    • stretch:拉申充满容器

  • align-content:修改 flex-wrap 属性的行为,类似于 align-items,但不是设置子元素对齐,而是设置行对齐。

  • justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式,有以下几个值:

    • flex-start:左对齐

    • flex-end:右对齐

    • center:水平居中对齐

    • space-around:子元素的左右空白相等的对齐方式

    • space-between:子元素平均分配空白,则左右两边对齐

    • space-evenly:子元素平均分配空白对象




    
    弹性布局属性介绍
    


       
  • 1
  •    
  • 2
  •    
  • 3
  •                    

商品案例




    
    弹性布局案例
    


   
           
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •        
  •                        
                   蕾丝薄杯                舒适透气            
                       
  •    

登录案例




    
    弹性布局之登录案例
    


   
           
   
       
                       
                                           
           
                                           
       
   

网格布局

        前面的弹性布局只适合用于对一维布局,而对于二维的布局就不行,我们需要使用网格布局来实现。它是通过行(row)和列(column)来构成的。

下面以一个简单案例来演示网格布局如何使用。案例的效果图如下:




    
    网格布局
    


   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
7
   
8
   
9
   
9
   
9
   
9

你可能感兴趣的:(前端,css,javascript,css3,linux)