雙飛翼佈局,聖盃佈局
負邊距的使用;
影響文檔流位置:會使它們在文檔流中的位置發生偏移,相對定位是原來的位子還在,可是影子不見了;負邊距則是本身的位置也被移動了;
影響文檔流寬度:若是元素沒有定寬,元素的寬度將會被增長;
影響浮動元素位置:好比說下面:
#div1 { background-color: red; width: 100%; float: left; } #div2 { background-color: blue; float: left; margin-left: -100%; } #div3 { background-color: yellow; float: left; margin-left: -60px; }
margin - left : -100% 被向左移動了父元素的寬度那麼長的距離;直接移到了上一行的那個位置,
margin - left: 60px (他本身的寬度),
向左移動了本身的寬度那麼長的距離,上一行從右邊開始減去60px的位置;
因此雙飛翼佈局,聖盃佈局的原理:
雙飛翼佈局:middle的div裏又插入一個div,經過調整內部div的margin值不被蓋住;
聖盃佈局
: container 是細腰,因此經過margin 複製調整到一行中後,咱們能夠經過position: relative 來不讓他們蓋住;
<style> .container{ padding-right: 40px; padding-left: 40px; background-color: gray; height: 400px ; } .main { background-color: red; width: 100%; float: left; height: 100%; } .left { background-color: blue; width: 40px; float: left; height: 100%; margin-left: -100%; position: relative; left: -40px; } .right { background-color: yellow; width: 40px; float: left; height: 100%; margin-left: -40px; position: relative; right: -40px; } </style></head><body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div></body></html>
負邊距對絕對定位的影響:絕對定位的元素如何居中對齊的解決方案的原理;
margin / padding 百分比是什麼的值?
padding/margin取形式爲百分比的值時,不管是left/right,仍是top/bottom,都是以父元素的width爲參照物的
border 百分比是什麼的值?
border 的值不支持百分比;
background-color 的覆蓋範圍
到 border的地方,包含content 和 padding;
今日頭條一面面試題:用css 畫一個正方形:
1. 使用vw ,vh 的單位;
2. 使用padding-bottom 的百分比是元素的寬度,同時設置height : 0 防止元素被撐開;
3. 使用父盒子的僞元素,margin-top爲100% 來撐開,可是僞元素會和父元素margin 重疊,因此在父盒子上面觸發 BFC 就能夠了;
.test { width: 200px; background-color: red; overflow:hidden; // 觸發 BFC } .test::after { margin-top: 100%; //經過兒子的margin-top 來撐開父親的高度,利用了margin百分比是父元素寬度 content: ''; // 僞元素的content 仍是不能少 display: block; }
vertical-align在什麼狀況下會起做用?
只有一個元素屬於
inline或是
inline-block(table-cell也能夠理解爲inline-block水平),其身上的vertical-align屬性纔會起做用,好比說:圖片,按鈕,單複選框,單行/多行文本框
vertical-align 和 line-height 有基友的關係,vertical的百分比就是 基於 line-height的:
{ line-height: 30px; vertical-align: -10%;}
{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ }
對於內聯元素,vertical-align與line-height雖然看不見,但實際上「處處都是」
line-height 的做用:
有一個空的div,<div></div>,若是沒有設置至少大於1像素高度height值時,該div的高度就是個0。若是該div裏面打入了一個空格或是文字,則此div就會有一個高度。那麼您思考過沒有,爲何div裏面有文字後就會有高度呢? 不是文字撐開了div的高度,而是line-height
首先,行內元素一行就會有一個行框,裏面有上,下邊距,加上文本高度;在文本高度裏面,有頂,中,基,底四個線。而基線之間的距離就是line-height的高度。
若是一段文本的高度爲16px,若是給他設置line-height的高度爲200,那麼至關於,文本的上下間距的高度增長了,可是文本自己的高度依然是16是不變的,而且一直默認在行框中垂直居中,而上間距和下間距平分了200px的高度而且減去文本自己的高度。因此,容器被這一行文本佔滿,而自己文字在本身的一行中是垂直居中的,因此看起來就像是在容器中垂直居中。
水平居中:
1. 行內元素,父元素 text-align : center
2. 塊級元素有定寬,margin:0 auto;
3. 塊級元素絕對定位,transform : translate(-50%,0);
4. 塊級元素絕對定位,而且知道寬度, margin-left: - 寬度的一半
5. 塊級元素絕對定位,left:0; right:0; margin:0 auto
垂直居中
1. 若元素是單行文本, 則可設置 line-height 等於父元素高度,原理見上面;
2. 若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和一個僞元素讓內容塊處於容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }
3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;
4. 絕對定位的塊用 transform: translate(0, -50%)
5. 絕對定位,而且有定高, margin-top : -高度的一半
注意不要用 margin-bottom, 不會生效的
6. 設置父元素相對定位(position:relative), 子元素以下css樣式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }