一、浮動及清除
1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框。值描述
left
元素向左浮動
right
元素向右浮動
none
不浮動(預設)
inherit
繼承父類的float屬性
2.浮動帶來的問題
(1) 不同區域的浮動元素同行貼邊；
(2)浮動子元素不能撐開父容器的高度；
(3)浮動子元素的父容器背景無法正常顯示；
(4)當行內元素被撐起的寬度加上浮動元素的寬度，大於父元素的寬度時，浮動元素，就會下移乙個line-height，直到計算的值小於父元素的寬度時，非浮動元素會跟隨其後。例如：
效果如下：
3.浮動的解決：
（1）通過對父級容器設定適合的css高度；
（2）通過overflow屬性清除浮動；
（3）通過設定clear屬性清除浮動。
(1)字型大小：font-size以畫素為單位設定字型大小、以百分比設定字型大小、變數值（small、larger），單位模式：px、em
(2)行高line-height, 以畫素為單位設定每行的高度值、百分比設定行高
(3) 字型型別font-family
(4)超連結偽類
格式：標籤名：偽類名
(5)背景設定
background-repead屬性，取值方式：no-repeat、repeat-x、repeat-y
background-position屬性，取值方式1：x座標 y座標；取值方式2：left、right、top、bottom、center
三、模型定位(position屬性)
1.對當前標籤物件進行定位操作，規定元素的定位型別。取值範圍：靜態（static），相對（relative），絕對（absolute）、固定（fixed）
css四個屬性（top、left、right、bottom）只有在設定了position值為relative、absolute、fixed情況下才有效
(1)relative相對定位：position:relative
特點：①通過top、left、bottom、right來設定元素的新位置偏移(相對於當前位置)；
②相對定位的元素並沒有脫離標準文件流，對原來標準流中的元素依然受影響（元神出竅）
應用：頁面效果微調，配合子元素的絕對定位使用。
（2）absolute絕對定位：position:absolute
特點：①通過top、left、bottom、right來設定元素的新位置偏移；
②相對定位的元素脫離標準文件流
應用：頁面內部小盒子內的元素的不正常位置效果體現
(3)fixed固定定位：position:fixed
特點：①通過top、left、bottom、right來設定元素的新位置偏移(相對於瀏覽器視窗)；
②固對定位的元素脫離標準文件流，不受文件流約束
應用：導航欄凍結、側邊欄回頂部、京東網、廣告彈出框
(4)z-index
定義：設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。z-index
只有在當前元素設定了position的時候才有效。
特性：隨父性，即父元素的z-index值，會影響子元素的重疊效果。如果父元素的z-index大，則不管子元素的z-index是多少，都能覆蓋其它子元素。
應用：需要體現層層之間的重疊效果；登陸註冊半透明復蓋彈出層。
定位參考點的靈活變動
①如果絕對定位盒子外層沒有盒子
top：以距離頁面頂部具體top長度顯示
bottom：以距離當前瀏覽器底部bottom值顯示
②如果絕對定位盒子外層還有盒子，預設相對於瀏覽器絕對定位偏移；
如果要相對父容器絕對定位，則要遵循如下規則：父元素必須要有定位(絕、相、固）設定
相對定位舉例：
我是左邊的文字
我是右邊的文字
加上相對定位 span
固定定位舉例
測試文字，固定定位
顯示效果
css樣式總結
1.div在div中上下居中 父元素 display flex align item center 2.flex布局 display flex flex wrap wrap justify content space between 3.文字劃線 text decoration none 沒有 bl...
css樣式總結
web前端開發css基礎樣式總結 顏色和單位的使用 顏色用顏色的名字表示顏色,比如 red 用16進製表示演示 比如 ff0000 用rgb數值表示顏色,rgb 紅,綠,藍 每個值都在0 255之間 一般都用16進製表示顏色 單位px 畫素,與解析度設定相關.相對於瀏覽器的百分之多少,可以對寬度wi...
常用css樣式總結
1.超出顯示省略號 title 超出兩行顯示.overflow hidden text overflow ellipsis display webkit box webkit line clamp 2 webkit box orient vertical 2.內容局左居中對齊 tip content...