重學CSS筆記

時間 2019-11-30

標籤 css 筆記欄目 CSS 简体版

原文原文鏈接

1. 聖盃佈局和雙飛翼佈局

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
複製代碼

聖盃佈局

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
    float: left;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
複製代碼

雙飛翼佈局

<div class="container">
    <div class="center-container">
        <div class="center"></div>
    </div>
    <div class="left">left</div>
    <div class="right">left</div>
<div>
複製代碼

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: #94E8FF;

    margin-left: 100px;        /* 新添加的屬性 */
    margin-right: 200px;       /* 新添加的屬性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
}
複製代碼

2. 媒體查詢

link媒體查詢

你可能想針對將要顯示頁面的設備調整頁面的樣式，能夠用media屬性,在link元素中增長這個屬性.如css

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
# 其餘屬性包括min-device-width,max-device-width,orientation(橫向landscape,縱向portrait)
複製代碼

css媒體查詢

能夠直接在css中增長媒體查詢,使用@media規則,把對全部媒體類型都通用的規則放在@media規則下面,例如html

@media screen and (min-device-width: 481px){//當設備屏幕寬度大於480px時使用
#guarantee {
  margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//當設備屏幕小於等於480px時使用
 #guarantee {
   margin-right: 30px;
 }
}
@media print { // 若是要打印頁面，使用該規則
body {
  font-family: Times, "Times New Roman", serif;
}
}
複製代碼

總結實踐

若是css文件至關龐大，建議使用link元素
除了給出設備的媒體屬性，若是你更關心瀏覽器大小，能夠用max-width和min-width

3. Flex佈局

/** 父容器：塊級元素 | 行內元素 **/
display: flex | inline-flex; 

/** 
  *父容器能夠設置如下屬性 
  *
  */
flex-direction: row | row-reverse | column | column-reverse;
/**主軸方向：橫左 | 橫右 | 豎上 | 豎下 **/


flex-wrap: nowrap | wrap | wrap-reverse;/**換行方式： 不換行 | 換行從上排 | 換行從下排 **/ 

flex-flow：<flex-direction> || <flex-wrap>; /** 主軸及換行（簡寫），中間空格 **/

justify-content: flex-start | flex-end | center | space-between | space-around;
/**主軸對齊：起點 | 終點 | 中心 | 均分無邊隙 | 均分有邊隙**/


align-items: flex-start | flex-end | center | baseline | stretch;
/** 交叉軸對齊方式：起點 | 終點 | 中心 | 文字的基線對齊 | item未設置高度/auto，撐整個容器（默認值） **/


align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**交叉軸多行/排對齊方式：起點 | 終點 | 中心 | 均分無邊隙 | 均分有邊隙 **/

複製代碼

Flex佈局小Demo瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>張真人</title>
<style> .container{ width:500px; height:600px; background:#e2e2e2; flex-direction:column-reverse; display:flex; flex-wrap:wrap; align-content:space-around; } .item{ width:100px; height:100px; line-height:100px; text-align:center; background:green; margin:5px; color:white; font-weight:600; font-size:42px; border-radius:50px; } </style>
</head>

<body>
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="item">9</div>
	</div>
</body>
</html>
複製代碼

/**子元素能夠設置一下屬性**/

order: <integer>;/**排序：數值越小越靠前，默認值0**/

flex-grow: <number>; 
/*
放大比例：默認值0；
若是全部項目的 flex-grow 都爲 1，則全部項目平分剩餘空間；
若是其中某個項目的 flex-grow 爲 2，其他項目的 flex-grow 爲 1，則前者佔據的剩餘空間比其餘項目多一倍。
*/

flex-shrink: <number>;
/*
縮小比例：默認值1；
空間不足時，會自動縮小
若是全部項目的 flex-shrink 都爲 1，當空間不足時，全部項目都將等比縮小；
若是其中一個項目的 flex-shrink 爲 0，其他都爲 1，當空間不足時，flex-shrink 爲 0 的不縮小。
負值對該屬性無效
*/

flex-basis：10px | 10%;
/*
主軸上寬或高：默認auto; 優先級高於width/height
*/

flex: <flex-grow> || <flex-shrink> || <flex-basis> ;默認值：0 1 auto,後兩個屬性可選;
/*
放大縮小空間簡寫: 
兩個快捷值：
  auto（1 1 auto）表明在須要的時候能夠拉伸也能夠收縮;
  none（0 0 auto）表示既不能拉伸也不能收縮;
*/

align-self: auto | flex-start | flex-end | center | baseline | stretch;

/*
當前對齊方式,能夠覆蓋 align-items 屬性;
用來定義單個項目與其餘項目不同的對齊方式，能夠覆蓋 align-items 屬性;
默認屬性值是 auto，即繼承父元素的 align-items 屬性值;
當沒有父元素時，它的表現等同於 stretch;
*/

複製代碼