一、浮動
1.css浮動
浮動就是讓塊級標籤不獨佔一行，目的（使用場景）是讓塊級標籤元素可以排在一行上。浮動元素會生成塊級框
2.float 屬性值=left左浮動 right有浮動 none預設值，不浮動（也可以取消） inherit
3.浮動的原理就是讓元素脫離文件流（文件流是指文件中可顯示物件在排列時所占用的位置），不占用標準流
box1
box2
1.新增空標籤，並設定樣式clear：both
clear：left 清楚左浮動
clear：right 清楚右浮動
clear：both 清楚左右浮動
clear：none 左右活動都不清楚
2.在要清除浮動 父級新增樣式：overflow：hidden
overflow：hidden：超出部分隱藏，也可以用來實現清除浮動或清楚塌陷。
overflow：visible 預設值，內容不會被裁減，回程現在元素框之外，不剪下也不現實滾動條
overflow：auto 不顯示超出內容，不剪下；按照內容是否會超出，自動新增，可用作清除浮動
overflow：scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其他內容
3.新增偽元素：after
父元素::after
這裡的div屬於塊級元素 會獨佔一行
box2
清除浮動方法1：新增空標籤
box3
-->
box1
box2
box3
eg:hellohellohello
letter-spacinng：每個字元之間的間距
eg:hello
6.超出處理
word-wrap:breakword——超出父類自動換行
overflow：超出父元素部分如何設定
1.hidden隱藏
2.scroll滾動條
7.元素的隱藏和顯示
display:
1.none:元素的隱藏——隱藏元素所佔據的空間
2.block：元素的顯示
visibility
1.hidden：元素的隱藏——相當於修改了元素的透明度，保留元素所佔據的空間2.visible:元素的顯示
8.**:
1.設定**單元格元素合併
border-collapse: collapse;
2.設定**標題位置
caption-side：top left right bottom
三、css盒子模型
每個元素都是乙個盒子，乙個盒子由margin（外邊距）、border（邊框線）、padding（內邊距）、content（內容）組成
盒子模型：
盒子寬度=content+padding+border
1.標準盒子/預設盒子/w3c盒子
box-sizing/content-box
特點： width——元素內容
2.邊框盒子/怪異盒子
box-sizing/border-box
特點：width–>盒子
區別外邊距和內邊距是以邊框為參照物的。
#系統預設外邊距為8px
1.外邊距margin：指元素邊框線之外的距離
margin：可帶一至四個引數/可以設定任乙個邊的設定
margin-left margin-right margin-top margin-bottom
margin（apx）:表示上下左右都用這樣的邊距
margin（apx bpx）:表示上下為apx的邊距，左右為bpx的邊距
margin（apx bpx cpx）:表示上為apx的邊距，左右為bpx的邊距，下為cpx的邊距
margin（apx bpx cpx dpx）:表示上為apx的邊距，右為bpx的邊距，下為cpx的邊距，左為bpx的邊距
#盒子模型的基礎練習
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...