網頁元素的狀態
在文件流中
不在文件流中
網頁元素在文件流中的特點
塊元素獨佔一行(從上到下排列)
寬度預設是父元素的寬度(不能超過父元素寬度)
高都預設被內容撐開
行元素不獨佔一行 從左到右依次排列 如果一行不能容納 則換行繼續從左到右依次排列
寬高預設被內容撐開
none 預設值 不浮動
left 左浮動
right 有浮動
作用：用於頁面水平方向的布局
特點：浮動元素會完全脫離文件流 不在佔據文件流中的位置
設定浮動以後元素會向父元素的左側或右側移動
浮動元素預設不會從父元素中移除
浮動元素向左或向右移動時 不會超過它前邊的其他浮動元素
如果浮動元素的上邊是乙個沒有浮動的塊元素 則浮動元素無法上移動
浮動元素不會超過它上邊的兄弟元素 最多就是一樣的
浮動元素不會蓋住文字 文字會自動環繞在浮動元素的周圍 可以設定文字環繞的效果
left 清除左浮動
right 清除右浮動
both 清除左右兩側的浮動
設定父級的高度
overflow：hidden 新增在父級上
在浮動元素的下方新增以個空白的div 設定clear：both樣式
利用偽元素清除浮動:
after
visible 預設值 不會進行修剪
hidden 超出元素框的位置被隱藏
scroll 內容被修剪 新增滾動條
auto 內容被修剪 自適應 自動新增滾動條
內容溢位 是否修剪
visible 預設值 不會進行修剪
hidden 超出元素框的位置被隱藏
scroll 內容被修剪 新增滾動條
auto 內容被修剪 自適應 自動新增滾動條
::first-line 設定首行的特殊樣式
文字樣式
文字的樣式
background屬性
::first-letter 設定首個文字的特殊樣式
文字樣式
文字的樣式
background屬性
::before 在元素內容前邊新增新內容
配合content使用
可新增 可新增文字
::after 在元素內容的後邊新增新內容
配合content使用
可新增 可新增文字
::selection 設定被選中的樣式
注意：::first-line ::first-letter 只用於塊元素
normal 預設值 空白被忽略
pre 空白會被保留 類似標籤
pre-wrap 保留原有樣式 支援換行
pre-line 保留換行 不支援空格
nowrap 強制在一行顯示
clip 不顯示
ellipsis 顯示省略號
第一步：容器的寬度 width:value;
第二步：強制文字在一行顯示 white-space:nowrap;
第三步：溢位內容隱藏 overflow:hidden;
第四步：溢位文字顯示... text-overflow:ellipsis;
CSS學習總結
1.使用外部 extenal 樣式表，相對於內嵌 inline 和內部式 internal 的，有以下優點 樣式 可以復用。乙個外部css檔案，可以被很多網頁共用。便於修改。如果要修改樣式，只需要修改css檔案，而不需要修改每個網頁。提高網頁顯示的速度。如果樣式寫在網頁裡，會降低網頁顯示的速度，如果...
CSS學習總結
選擇器的優先順序 乙個標籤作用於多個樣式層疊時，這些層疊樣式說明都不一樣，那麼標籤上樣式所有層疊樣式的總和。如果這些層疊樣式有相同的宣告時，樣式的優先順序如下 內聯 內部 外部 必須選擇器型別相同 id的優先順序大於類大於元素。id不管在內部還是外部優先順序都是最高的。important 內聯 id...
CSS學習總結
ios不支援background attachment屬性 需要用以下hack方式，body before超出寬度的文字自動省略 效果圖 需要同時加上 overflow hidden 和 white space nowrap text overflow ellipsis 才會起作用。span標籤設定...