css盒子 布局樣式

2022-08-13 09:18:11 字數 3479 閱讀 6963

---恢復內容開始---

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...