複習下css佈局記錄

時間 2019-11-29

標籤複習 css 佈局記錄欄目 CSS 简体版

原文原文鏈接

寫在前面

今天面試，結果其中就有死在了一個炒雞簡單的css佈局上面，css

經典的html

問A、C定高，B定寬，D自適應，怎麼搞web

http://www.javashuo.com/article/p-yfkljbtm-bn.html面試

基礎的position

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        html,body,.parent{height:100%;overflow:hidden;}
        div{outline: #000 solid 1px;}
        .top{position:absolute;top:0;left:0;right:0;height:100px;}
        .left{position:absolute;left:0;top:100px;bottom:50px;width:200px;}
        .right{position:absolute;left:200px;right:0;top:100px;bottom:50px;}
        .bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}
	</style>
</head>
<body>
<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

Flex

http://www.runoob.com/w3cnote/flex-grammar.htmlsegmentfault

Flex是Flexible Box的縮寫，意爲」彈性佈局」，佈局

任何一個容器均可以指定爲Flex佈局。學習

.box{
  display: flex;
}
.box{
  display: inline-flex;
}
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。測試

容器6個屬性

flex-direction屬性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin: 0;
	    }
        div{outline: #000 solid 1px;}
        .test{width: 50px;height: 50px}
        .partent{display: flex;flex-direction:row;}
	</style>
</head>
<body>
<div class="partent">
	<div class="test a">A</div>
	<div class="test b">B</div>
	<div class="test c">C</div>
	<div class="test d">D</div>
</div>
</body>
</html>

flex-direction屬性決定主軸的方向（即項目的排列方向）。ps：具體名詞看教程flex

flex-wrap屬性

默認狀況下，項目都排在一條軸線上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。spa

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默認）：不換行。，在測試的時候還發現這仍是會自適，

ps：後面知道了是應爲flex-shrink：1

這裏的都是200*200的正方形。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸爲從左到右。

flex-start（默認值）：頭對齊

flex-end：尾對齊

center：居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

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

水平垂直居中的用法

align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

項目6個屬性

如下6個屬性設置在項目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0

flex-grow屬性
flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

ps：看到這裏就明白前面的爲何不換行或有適應效果了。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

學習完畢，而後重寫（抄）下那種佈局的flex寫法

這裏有個小點：由於是未知高，須要設立最外的parent div充滿，

因此學習了一個vh單位

vh爲相對於視口的高度。視口被均分爲100單位的vh

因此

.parent{
    display:flex;
    flex-direction:column;
    min-height: 100vh;
}

代碼爲

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin: 0;
	    }
        div{outline: #000 solid 1px;}
        .parent{display:flex;flex-direction:column;min-height: 100vh;}/*列方向進行佈局*/
        .top{height:100px;}
        .bottom{height:50px;}
        .middle{flex:1;display:flex;}/*佔據剩餘區域,而後又做爲新的容器*/
        .left{width:200px;}
        .right{flex:1;}
	</style>
</head>
<body>
<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left">aaaa</div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。