CSS常見布局

qujian 發布于2019-04-23 13:09 / 1625人閱讀

摘要：雙飛翼布局三列布局，左右定寬，中間寬度自適應中間欄要在瀏覽器中優先展示渲染允許任意列的高度最高。雙飛翼布局和圣杯布局基本一樣，不同之處在于解決遮蓋問題的方式不同。

一、單列布局

? 1. 水平居中

? ? 1.1 使用inline-block和text-align?

  .parent{text-align:center;}
  .child{display:inline-block;}

? ? ?1.2 使用margin:0 auto實現? ??

  .child{width:200px;margin:0 auto;}

? ? ?1.3 使用絕對定位實現

  .parent{position:relative;}
  .child{position:absolute;left:50%;margin-left:-100px;width:200px;}  /*margin-left的負值為盒子寬度的一半*/

? ? ?1.4 使用flex布局實現

  .parent{display:flex;justify-content:center;}

? 2. 垂直居中

? ??2.1 使用vertical-align

  .parent{line-height:100px}
  .child{display:inline-block;vertical-align:middle;}

? ??2.2 使用絕對定位實現

  .parent{position:relative;}
  .child{position:absolute;top:50%;margin-top:-100px;height:200px;}  /*margin-top的負值為盒子高度的一半*/

? ??2.3 使用flex實現

  .parent{display:flex;align-items:center;}

? 3. 水平垂直居中

? ??3.1 使用inline-block,text-align和vertical-align

  .parent{line-height:100px;text-align:center;}
  .child{display:inline-block;vertical-align:middle}

? ? 3.2 使用絕對定位實現

  .parent{position:relative;}
  .child{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;width:200px;height:200px;}  /*margin-top的負值為盒子高度的一半,margin-left的負值為盒子寬度的一半*/

? ? 3.3 使用flex實現

  .parent{display:flex;justify-content:center;align-items:center;}

二、多列布局

　 1. 圣杯布局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展示渲染；允許任意列的高度最高。

HTML：

 <div class="header">headerdiv>
 <div class="container">
    <div class="main">maindiv>    
    <div class="left">leftdiv>
    <div class="right">rightdiv>
 div>
 <div class="footer">footerdiv>

? ? (1) 基礎樣式

*{margin:0;padding:0}
body{min-width:800px;}
.header,.footer{
   border: 1px solid #333;
   background: #aaa;
   text-align: center;
}
.container{
   border:2px solid yellow;
}
.left{
   width:200px;
   background:skyblue;
 }
 .right{
   width:200px;
   background:pink;
 }
 .main{
   width:100%;
   background:tomato;
 }

.main,.left,.right{
   min-height:100px;
 }

? ?

? ? (2) 三列均設置左浮動?

.left,.main,.right{
    float:left;
}

? ? (3) 清除浮動

.container{       
   zoom:1;
}
.container:after{
   content:"";
   display:block;
   clear:both;
}

? ? (4) 讓left和right上移

.left{
     margin-left:-100%;   /*利用margin-left的負值，將left列移動到上一行的開頭*/
     width:200px;
     background:skyblue;
}
.right{
     margin-left:-200px;  /*利用margin-left的負值，將right列移動到上一行的末尾*/
     width:200px;
     background:pink;
}

left列和right列已經上移，但是可以看見，此時main已被遮蓋。

? ? (5) 解決遮蓋問題

? ? 給.containter左右內邊距，大小分別為left列的寬和right列的寬。

.container{
   padding:0px 200px;
   border:2px solid yellow;
   zoom:1;
}

? ? 然后利用相對定位，將left列和right列定位到兩側空白處。

.left{
    position:relative;
    left:-200px;
    margin-left:-100%; 
    width:200px;
    background:skyblue;
}
.right{
    position:relative;
    right:-200px;
    margin-left:-200px;
    width:200px;
    background:pink;
}

? ?遮擋問題已解決，main可見啦。

? ?至此，圣杯布局已完成，中間列寬度自適應。

? ?2. 雙飛翼布局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展示渲染；允許任意列的高度最高。

? ?雙飛翼布局和圣杯布局基本一樣，不同之處在于解決遮蓋問題的方式不同。

? ?雙飛翼布局在main元素中添加了一個子元素content，并給這個子元素設置margin-left和margin-right，以至于content里的內容不被遮蓋。

? ?HTML：

<div class="header">headerdiv>
<div class="container">
   <div class="main">
      <div class="content">contentdiv>
   div>
   <div class="left">leftdiv>
   <div class="right">rightdiv>
div>
<div class="footer">footerdiv>

? CSS：

.content{margin:0 200px}

? ?雙飛翼布局也完成了，個人感覺比圣杯布局更簡潔；完整代碼就不上了，很簡單的，不熟悉的可以動手試試哦。

云服務器 GPU云服務器 css布局 css布局教程學習css布局 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1496.html

前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0
CSS常見布局與居中

摘要：常用于控制頁面布局的定位機制普通流相對定位絕對定位和固定定位。左右布局最常用的就是通過浮動左浮或右浮來實現浮動。可以通過設置左右的外邊距為值來居中包括圖片。這里，就CSS左右布局，左中右布局，水平與垂直居中，進行討論。 CSS常用于控制頁面布局的定位機制：普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。 1.左右布局最常用的就是通過浮動（左浮或右浮）來實...

April 2019-08-30 15:54 評論0 收藏0