實現雙飛翼的三種方法
雙飛翼布局的關鍵是左右兩欄加浮動,但是中間欄不佔據左右兩欄的位置。
一、用bfc實現
bfc規定bfc的區域不會與float box重疊,觸發條件為
1.html 就是乙個bfc
2. float屬性不為none
3. position為absolute或fixed
4. display為inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不為visible
所以可以將左右兩欄加浮動,中間用overflow:hidden;觸發bfc,使中間欄不佔據左右兩欄的位置。
注:必須將左右兩欄布局寫在center前面。
.box
.left
.center
.right
"box">
"left">
"right">
"center">
二、用margin實現
用margin解決左右兩欄浮動後,中間欄佔據左右兩欄位置的方法:
margin控制的是元素與元素之間的間距,可以用margin使中間欄這個元素距離父元素左右兩邊的間距恰好為為左右兩欄的寬度。
*
body,html
.box
.left
.right
.center
"box">
"left">
"right">
"center">
三、用padding實現
用padding解決左右兩欄浮動後,中間欄佔據左右兩欄位置的方法:
padding控制的是子元素在父元素裡面的位置關係,可以給中間欄加乙個父元素,然後用padding將子元素擠到中間,不佔據左右兩欄的位置。
*
html,body
.box
.left
.right
/* 中間的板塊 */
.center
.center-con
"box">
"left">
"right">
"center">
"center-con">
``
python爬蟲學習第十五天
from urllib.request import urlopen from bs4 import beautifulsoup import re import datetime import random def randomurl articleurl url articleurl html ...
python 學習第十五天(繼承)
python中繼承分為單繼承和多繼承 class parent1 如果沒有繼承,python3中會預設繼承object這個類 pass class parent2 pass class son1 parent1 單繼承,父類是parent1 pass class son2 parent1,paren...
C 高階學習第十五天
語言整合查詢,包含4個元件 linq to sql 查詢資料庫的資料 linq to dataset 查詢dataset中的資料,對其增刪等操作 linq to xml 查詢xml檔案 linq to objects 查詢集合資料,如陣列或list 1.int array from int a in...