CSS與CSS3 · 萬能Web開發文檔筆記

# CSS與CSS3 定位 ``` <pre class="calibre14">``` .c{ position: absolute;//脫離文檔絕對定位 relative 相對定位 fixeld 不滾動 static 默認 z-index: 1;層關系 top: auto; left: auto; right: auto; bottom: auto; } ``` ``` 布局 ``` <pre class="calibre14">``` .c{ display:inline;默認內聯元素 none 隱藏 block 塊元素 inline-block 內聯塊元素 float:none;不浮動 left right clear: both;清除浮動 visibility: visible;對象可視 hidden對象隱藏 overflow: visible;溢出內容不作處理,可能超出容器 hidden隱藏不出現滾動條 scroll滾動 auto溢出出現滾動,不溢出沒有 overflow-x: visible; overflow-y: visible; 同上,表示水平方向和垂直方向 } ``` ``` 尺寸,支持像素 em 百分比等 ``` <pre class="calibre14">``` .c{ width: auto; 12px 10% min-width: 0; max-width: none;沒有最大寬度 height: auto; min-height: 0; max-height: none; } ``` ``` 內外補白 ``` <pre class="calibre14">``` .c{ margin: auto;可以負值 margin-top: auto;上 margin-bottom: auto;下 margin-left: auto; margin-right: auto; padding: 1px;不可以負值,也沒有自動 padding-bottom:1%; padding-top: inherit; padding-left: inherit; padding-right:1px; } ``` ``` 邊框 ``` <pre class="calibre14">``` .c{ border: 1px solid #fff; border-width: 1px; border-style: solid;實線 none;沒有邊框,默認值 dotted;點狀 dashed;虛線 border-color: #fff; border-top: 1px solid #fff; border-bottom: !important; border-left: !important; border-right: !important; } ``` ``` 背景 ``` <pre class="calibre14">``` .c{ background:url(test1.jpg) no-repeat scroll 0% 0%; background-color: transparent;默認透明 background-image: none;無圖 url(1.img) background-repeat: repeat;平鋪 no-repeat 不平鋪 repeat-x ;repeat-y 橫縱平鋪 background-attachment: scroll; 滾動 fixed;固定 background-position: 0% 0%; left center right top bottom; background-origin: padding-box;背景從content顯示 border-box;從border區域開始 padding-box;從padding開始 background-clip: border-box;從padding向外剪裁 border-box;從border開始,不含 content-box;從content開始剪切 text;從內容開始 background-size: auto;背景大小自動 cover;等比縮放完全覆蓋,會出容器 contain;等比縮放寬高和容器相等,始終在容器內 } ``` ``` 顏色 ``` <pre class="calibre14">``` .c{ color: #FFF;文本顏色 opacity: 1;1是不透明 0完全透明取值0.0-1 } ``` ``` 字體 ``` <pre class="calibre14">``` .c{ font: 12px Simsun,arial,sans-serif; font-style: normal;字體正常 italic;斜體 font-weight: normal;正常相當于400 bold 粗體相當于700 bolder 特粗相當于b strong font-size:12px; font-family: arial; } ``` ``` 文本 ``` <pre class="calibre14">``` .c{ text-transform: none; capitalize;首字母大寫 uppercase;轉換大寫 lowercase;轉小寫 white-space: normal;空格處理默認 pre-wrap;不合并空白,邊界處換行 nowrap;強制同一行顯示,合并多余空白,直到br word-break: normal;換行 break-all; word-wrap: normal; break-word;邊界處換行 text-align: center;left;right; text-indent: 0;縮進 vertical-align: baseline; sub;下標 super;上標 middle;居中 line-height: normal;行高 } ``` ``` 列表樣式 ``` <pre class="calibre14">``` .c{ list-style:disc outside none; list-style-image: none;不指定圖像 list-style-position: outside;文本以外 inside;文本以內 list-style-type: disc;實心圓 circle;空心圓 square;實心方塊 decimal;數字 none;不使用 } ``` ``` 表格樣式 ``` <pre class="calibre14">``` .c{ border-collapse: collapse;合并邊框 } ``` ``` 用戶界面 ``` <pre class="calibre14">``` .c{ text-overflow: clip;文本溢出不顯示... ellipsis;顯示 outline: none;輪廓樣式無輪廓 cursor: pointer;手 move移動支持url() box-sizing: content-box;盒子padding和border不包括在寬高內 border-box;包含內; user-select:text;可以選擇文本 none;文本不能選擇 } ``` ``` 選擇 ``` <pre class="calibre16">``` ul>li{ //子選擇器 } ul li{ //包含選擇 } p+p{ //相鄰選擇 } p~p{ //兄弟選擇 } input[type="text"]{{ //屬性選擇 } a:link{ } a:visited{ } a:hover{ } a:active{ } a:focus{ } ul li:first-child{ //第一個 } ul li:last-child{ //最后一個 } ``` ```