---恢復內容開始---
1.盒子
邊框border-top-width: 10px; 寬度
border-top-style: solid/dashed/dotted; 實線 虛線 點線
border-top-color: red; 顏色
border-top: 10px solid red; 寬 線 色 上邊框
border-right:/border-
bottom:/
border-
left: 右 下 左 邊框
border:10px solid red; 寬 線 色 所有邊框
border-radius:10px; 圓角邊框
border-collapse:collapse; 合併**邊框
box-sizing: border-box; 邊框為盒子尺寸(邊框大小不變 內容會變小)
內間距padding-top:10px;
padding-right:
padding-bottom:
padding-left:
padding: 上右下左 上(左右)下 (上下)(左右) 內間距
外間距margin-top:10px;
margin-right:
margin-bottom:
margin-left:
margin:50px auto; 上下50 左右居中
margin-top 塌陷 解決方法
2.顯示
width: ;height: ;background-color: ;
display:block/inline/inline-block/none; 塊 行 行內塊 隱藏
visibility:hidden; 隱藏(佔位)
塊元素:獨佔一行 可設寬高
行元素:同一行排列 不設寬高 由字型大小決定 父元素用 text-align:center;設定字型水平居中
行內塊:同一行排列 可設寬高 多個行內塊父不設高 自動 line-height:高度; 設定字型垂直居中
font-size:0; 同一行 無間隔
3.浮動 (定義乙個寬高確定的區域 不影響整體布局)
width: ;height: ;background-color: ;
float:left/top; 覆蓋下乙個元素 下乙個元素的文字繞圖 下乙個元素margin:圖字間距
margin:50px
scroll 滾動條 scroll-y y軸滾動條
清除浮動(父邊框不設高時)解決方法
overflow: hidden; 浮動隱藏
加乙個div清除浮動
4.層級:z-index:10; 大的在上面(可以為負)
5.定位:
position:relative / absolute / fixed;
相對自身 相對上層定位元素 相對瀏覽器視窗
不影響 加定位浮動 後面上移 加定位浮動 後面上移 (注意:margin)
微調 不跟隨滾動而移動
top/left/right/bottom: div框設定寬度 裡面用百分比 寬度auto 內容多大寬度多大
CSS樣式美化div盒子
完整 片 font family 等線 light 字型為等線 light font size 1.5em 字型大小為預設值的2倍 line height 1.5em 行高為1.5倍 color deepskyblue 字型顏色為deepskyblue line break unset 斷句方式 t...
CSS實現樣式布局
使用css建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。1 有疑問,先驗證 在除錯時,先對您的 進行驗證往往能省去不少麻煩事。格式不正確的xhtml css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前,請先...
CSS樣式 布局篇
1.css基本樣式 背景語法 background background color background image background repeat background attachment background position background 000 url 位址 no repea...