1. css基本樣式
① 背景語法
background: background-color || background-image || background-repeat || background-attachment || background-position
background:#000 url(位址) no-repeat fixed（scroll）5px centerhtml, body
body
background:url("lizard.png") no-repeat 100% auto center scroll;① 內容對齊方式：
text-align: left | center | right
② 下劃線:
text-decoration: underline | overline | line-through
③ 大小寫轉換：
text-transform: capitalize | uppercase | lowercase
④ 文字縮排 、 字母間距
text-indent: 2em | h1
⑤ 自動換行：
word-wrap：break-word | normal
⑥ 垂直對齊方式：
vertical-align：top | middle | bottom
⑦ 行高：
line-height：normal | 10px
⑧ 字間距：letter-spacing
透明度：opacity：0 | rgba(0,0,0, .5) 最後乙個引數範圍0-1代表透明度
⑨ 溢位：overflow: hidden/suto/scroll
文字在一行顯示：white-space:nowrap;
⑩ 溢位省略號：
overflow: hidden；text-overflow：ellipsis；
① list-style-image: url();
② list-style-opsition: outside | inside
③ list-style-type：circle | disc | square
a: link | visited | hover | active
② 結構性選擇器（checked常常與input的radio和checkbox組合）
input: checked + span
.menu>div
.menu>div>div: first-child
.menu>div>div: nth-child(2)
③ 偽物件選擇器：與content結合使用
p:: before 農業
p:: after
2. 盒子
①外邊距合併 / 內邊距問題
① 兄弟div塊級元素，margin-bottom、margin-top垂直相鄰的外邊距會合併選擇較大值
父子div塊級元素，子級標籤margin-top會合併成給父元素margin-top，
解決方法：overflow：hidden
border：1px solid red;
padding：1px;
② 增加上下padding和border會使div增大
解決辦法：縮小div的寬度
box-size: border-box;（怪異盒子:定義多寬就多寬 ie瀏覽器）
補充：box-size: content-box（標準盒子：加上padding和border的寬度 google和火狐）
① 父容器：
display: flex; 預設子容器水平布局 | float， clean，vertical-align 都不起作用
align-items: stretch | center | flex-start | flex-end; 縱軸對齊方式
justify-content: flex-start|spacing-between|spacing-around|center|flex-end; 橫軸對齊方式
flex-direction: row | column; 垂直對齊方式
子容器：
flex-grow: 1;flex-grow: 2;flex-grow: 3; 將寬度分6份
② 三元素自適應
.box ul
.box ul li
③ 中間自適應
arrow,.search
.title ： title會佔滿中間的內容
發現周邊服務
常見居中方式：
① 內容水平居中： text-align: center;
② 一行文字垂直居中： line-height = height;
③ 盒子水平居中： .div
④ 子元素在父元素居中：
1）彈性盒子：父標籤
2)table-cell：父標籤
子標籤3）相對位置：父標籤
子標籤
left: 20px; top: 30px;
① 靜態定位：position: static; 對偏移量不起作用，用於去除定位
② 相對定位：position: relative; 相對於自己原來的位置偏移，占用著原來的位置
③ 絕對定位：position: absolute; 相對於瀏覽器偏移，不占用原來位置
④ 固定定位：position: fixed; 相對於瀏覽器視窗定位
堆疊順序
div1
div2
① 新增兄弟空div
② 浮動元素的父級div定義偽元素
.parent:：after
③ 浮動元素的父級div定義
.parent
③ 浮動元素的父級div定高
.parent
① display: none; 隱藏位置，內容
① opacity: 0; 和visibility: hidden; 不隱藏位置，隱藏內容
① 字首
火狐：-moz-
ie： -ms-
opera：-o-
谷歌、safari、360、獵豹：-webkit-
② 核心切割
-webkit-background-clip: text | border-box | padding-box | content-bx
③ 變化過渡
-webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s;
transition: 1s;
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
body lia
img,input
CSS實現樣式布局
使用css建站時，您肯定遇到過形形色色的布局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易，當您遇到困難時為您提供快速參考。1 有疑問，先驗證 在除錯時，先對您的 進行驗證往往能省去不少麻煩事。格式不正確的xhtml css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前，請先...
css盒子 布局樣式
恢復內容開始 1.盒子 邊框border top width 10px 寬度 border top style solid dashed dotted 實線 虛線 點線 border top color red 顏色 border top 10px solid red 寬 線 色 上邊框 borde...
CSS之布局篇
flex 布局教程 語法篇 阮一峰 flex 布局教程 例項篇 阮一峰 grid網格布局教程 阮一峰 html 中 main部分首先要放在cotent的最前部分。然後是left,right 將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 main...