聖杯布局，老生常談

2021-10-23 02:18:24 字數 1400 閱讀 5043

聖杯布局的定義應該是乙個header，乙個footer，中間是container，包含乙個自適應寬度的center，center左邊和右邊各有乙個寬度確定的div，大概是這樣

（1）使用普通的css來表現

首先是基本的html**

header


middle


left


right


footer
然後我們簡單地定義header和footer，賦予其高度和背景顏色，順便clear:both

#header,#footer
然後我們定義center left right的寬高背景顏色，同時設定他們向左浮動，並且設定parent的padding-left為left的寬度，padding-right為right的寬度

#parent


#left, #right, #middle


#left


#right


#middle
這時候的效果是

現在我們想要這個left，能出現在middle的左邊，我們可以使用margin-left： -100%,這時候百分比的分母是父元素的寬度，由於父元素的middle撐起來的，所以剛好是middle的寬度，此時left會疊加在middle上面

這時候我們想讓他往左貼，可以使用postion:relative定位，然後左移乙個自己的寬度，left:-60px;

舉一反三，如果希望right也出現在上面，我們可以顯然right在middle裡面，然後利用position移動出來.先使用margin-left:-40px,之後position:relative; left: 40px;噹噹當，完成了！

**如下:

(2)利用flex布局來實習

父元素使用display:flex;子元素使用order控制順序，對center使用flex:1;使得center盡可能撐滿父元素，over

CSS布局 Float布局過程與老生常談的三欄布局

使用css布局網頁，那是前端的基本功了，什麼兩欄布局，三欄布局，那也是前端面試的基本題了。一般來說，可以使用cssposition屬性進行布局，或者使用cssfloat屬性布局。前者適合布局首頁，因為首頁上的內容往往可以完全控制。後者適合布局模板，模板中填充的內容你沒法控制 比如，在編輯wordpr...

老生常談session,cookie的區別，安全性

一，為什麼session,cookie經常會有人提到 做web開發的人基本上都會用session和cookie，但是僅僅只是會用，並不知道session和cookie的真正的工作原理，都只是憑著感覺來猜測。web開發者只要利用它們來完成工作就行了，所以每個人的理解基本都會有大同小異，我想這就是ses...

老生常談session cookie的區別 安全性

一，為什麼session,cookie經常會有人提到 做web開發的人基本上都會用session和cookie，但是僅僅只是會用，並不知道session和cookie的真正的工作原理，都只是憑著感覺來猜測。web開發者只要利用它們來完成工作就行了，所以每個人的理解基本都會有大同小異，我想這就是ses...