手寫clearfix flex佈局 flex-direction 主軸的方向 justify-content 主軸的對齊方式 align-items 縱軸的對齊方式 align-content 縱軸的對齊方式 縱軸上留有空間 水平居中 1.行內元素 2.塊級元素 3.絕對定位 + left + ma ...
手寫clearfix
.clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; }
flex佈局
.container { display: flex; } .item { flex: 1; }
flex-direction 主軸的方向
flex-direction: row // 主軸為水平方向，起點在左
flex-direction: row-reverse // 主軸為水平方向，起點在右
flex-direction: column // 主軸為垂直方向，起點在上
flex-direction: column-reverse // 主軸為垂直方向，起點在下
justify-content 主軸的對齊方式
justify-content: flex-start // 向起點對齊
justify-content: flex-end // 向終點對齊
justify-content: center // 居中對齊
justify-content: space-between // 兩端對齊
justify-content: space-around // 平均分佈
align-items 縱軸的對齊方式
align-items: flex-start; // 向起點對齊
align-items: flex-end; // 向終點對齊
align-items: center; // 居中對齊
align-items: stretch; // 拉伸
align-items: baseline; // 基線對齊
align-content 縱軸的對齊方式
縱軸上留有空間
align-content: flex-start; // 向起點對齊
align-content: flex-end; // 向終點對齊
align-content: center; // 居中對齊
align-content: stretch; // 拉伸
align-content: space-between; // 兩端對齊
align-content: space-around; // 平均分佈
水平居中
1.行內元素
text-align: center;
2.塊級元素
width: 固定的寬度;
margin: auto;
3.絕對定位 + left + margin
position: absolute;
left: 50%;
width: 300px;
height: 100px;
margin: 負的寬度的一半;
垂直居中
1.行內元素
height: 50px;
line-height: 50px;
2.絕對定位 + left + margin
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 40px;
margin-top: -20px;
margin-left: -40px;
3.絕對定位 + transform
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 40px;
transform: translate(-50%, -50%);
4.絕對定位 + margin
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100px;
height: 50px;
margin: auto;
三欄佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三欄佈局</title> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } body { display: flex; } .left, .right { width: 200px; height: 100%; background-color: yellow; } .main { flex: 1; } </style> </head> <body> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </body> </html>View Code
聖杯佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聖杯佈局</title> <style> * { margin: 0; padding: 0; } body { min-width: 600px; } .container { padding: 0 200px; overflow: hidden; } .container div{ float: left; } .main { width: 100%; height: 200px; background-color: yellow; } .left, .right { position: relative; width: 200px; height: 200px; background-color: #ccc; } .left { left: -200px; margin-left: -100%; } .right { left: 200px; margin-left: -200px; } </style> </head> <body> <!-- 兩邊兩欄寬度固定，中間欄寬度自適應 --> <!-- 在HTML結構上中間欄在最前面 --> <!-- container設置padding屬性 --> <header>聖杯佈局</header> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <footer>footer</footer> </body> </html>View Code
雙飛翼佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雙飛翼佈局</title> <style> * { margin: 0; padding: 0; } body { min-width: 600px; } .container { overflow: hidden; } .container div{ float: left; } .main { width: 100%; height: 200px; background-color: yellow; } .main-content { margin: 0 200px; } .left, .right { width: 200px; height: 200px; background-color: #ccc; } .left { margin-left: -100%; } .right { margin-left: -200px; } </style> </head> <body> <!-- 兩邊兩欄寬度固定，中間欄寬度自適應 --> <!-- 在HTML結構上中間欄在最前面 --> <!-- 增加main-content，設置margin --> <header>雙飛翼佈局</header> <div class="container"> <div class="main"> <div class="main-content">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <footer>footer</footer> </body> </html>View Code
CSS技巧
1.font快捷寫法格式：
body { font: font-style font-variant font-weight font-size line-height font-family; }
2.link的四種狀態，需要按照下麵的前後順序進行設置：
a:link
a:visited
a:hover
a:active
3.text-transform用於將所有字母變成小寫字母、大寫字母或首字母大寫
4.font-variant用於將字體變成小型的大寫字母
5.透明元素
.element { filter:alpha(opacity=50); // 相容IE -webkit-opacity: 0.5; -moz-opacity:0.5; opacity: 0.5; }
6.CSS三角形
.triangle { width: 0; height: 0; border: 50px solid; border-color: transparent transparent #000 transparent; }
7.圖片替換文字
h1 { width:200px; height:50px; background:url("h1-image.jpg") no-repeat; text-indent:-9999px; }
8.表格單元格等寬
automatic 列寬度由單元格內容設定 此演算法有時會較慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的內容
fixed 列寬由表格寬度和列寬度設定 固定表格佈局與自動表格佈局相比，允許瀏覽器更快地對錶格進行佈局
.calendar { table-layout: fixed; }
9.使用屬性選擇器用於空鏈接
當a元素沒有文本值，但 href 屬性有鏈接的時候顯示鏈接：
a[href^="http"]:empty::before { content: attr(href); }
10.禁用滑鼠事件
CSS3 新增的 pointer-events 讓你能夠禁用元素的滑鼠事件
.disabled { pointer-events: none; }
11.模糊文本
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
12.禁止用戶選中文本
div { user-select: none; }
13.清除手機tap事件後element 時候出現的一個高亮
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
14.box-sizing
沒有設置box-sizing，css里寫的width指的是content
設置了box-sizing，css里寫的width指的是content + padding + border
div { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; border: 5px solid #000; background-color: yellow; }
15.隱藏沒有靜音、自動播放的影片
video[autoplay]:not([muted]) { display: none; }
