主要重點：border除錯法 不管寫什麼樣式 一定要寫border
1.文件流:即文件中元素流動的方向，大致分為一下三種inline-block，inline，block，其中又分為三種：流動方向，高度，寬度流動方向inline：元素從左到右，直到最右邊才換行
block：元素從上到下，嗎，每乙個都另起一行
inline-block：從做到右高度inline：寬度為內部元素的和，width無效
block：寬度預設自動結算，可以用width設定
inline-block：可用width設定寬度inline：高度由line-height決定，跟height無關
block：高度由內部文件流元素決定，可以用height設定
inline-block：可以用height設定
2.div溢位操作：overflowhidden：隱藏溢位
auto：自動
scroll：滑動
visible：顯示溢位
3.div和span的高度差距div：無內容高度為0
span：無內容有高度
4.如何脫離文件流float
position:absolute/fixed
5.盒模型content-box width=contetn
6.外邊距合併父子外邊距合併
解決方法：加乙個padding/border、overflow：hidden、display：flex兄弟外邊距合併
解決方法：inline-block
7.float布局
不管怎麼樣 先加乙個.clearfix ,可以理解為清除浮動 ，因為元素新增float屬性後.子元素會浮動(詳細了解上下層疊文)，使得父親(block型別)裡面沒有了文件流元素，導致了父親沒有高度。
.clearfix::after{
content:"";
display:block;
clear:both;
1.新增float屬性
display：float；
小知識：
如何解決img中的下方有多餘部分
vertical-align：top；
8.flex布局
/*父元素變成flex容器*/
.father{
display:flex;
/*改變容器裡item流動方向*/
.father{
flex-direction:row|column; /*item row橫排、column豎排 反響在後面加乙個-revesre*/
/*換行*/
.father{
flex-wrap:wrap; /* nowrap不換行 wrap-reverse 過來 */
/*item 縱向對齊方式*/
.item{
justify-content:flex-start; /* 從頭 */
justify-content:flex-end; /*從尾 */
justify-content:center; /* 居中 */
justify-content:space-between; /* 子元素之間有空隙 平分*/
justify-content:space-around; /* 子元素兩邊都有空隙 */
justify-content:space-between; /* 所有子元素兩邊的空間空隙相等*/
/*item 橫向對齊方式*/
.item{
align-items:flex-start; /* 向上 */
align-items:flex-end; /* 向下 */
align-items:center; /* 居中 */
/*item 橫向空間 */
.item{
align-content:flex-start; /* 布局都放在上面*/
align-content:flex-end; /* 布局都放在下面*/
align-content:center; /* 吧多餘的行高上下平分 */
align-content:space-between; /* 子元素之間有空隙 平分*/
align-content:space-around; /* 子元素兩邊都有空隙 */
align-content:space-between; /* 所有子元素兩邊的空間空隙相等*/
/* 權重 */
.item{
flex-grow:1;
9.grid布局
/*父元素變成grid容器*/
.father{
display: grid;/* 或者是inline-flex*/
/*行列設定*/
.father{
grid-template-columns:40px 50px auto 50px 50px;/* 列寬40px 50px 自動 50px 40px */
grid-template-rows:25% 100px auto;/* 行寬25% 100px 自動 */
/*單元格的間隙*/
.father{
grid-gap:12px /*每個格上下左右之間間隙12px*/
grid-row-gap:12px /*每個格左右之間間隙12px*/
grid-column-gap:12px /*每個格上下之間間隙12px*/
/*快速布局 grid-template-areas*/
.father{
/* 相當於區分了 三行三列 第一行一列是a */
grid-template-areas:
"a b c"
"d e f"
"g h i";
.item{
grid-area:a/b/c/d; /* item就會佔據a,b,c,d的區域位置 */
10.定位
層疊上下文：
乙個div的分層，從上到下，可以分為：內聯子元素
浮動元素
塊級子元素
邊框背景哪些不正交的屬性可以建立層疊上下文：層疊上下文。需要記憶的有z-index/flex/opacity(包住所有的東西顯示為半透明)/transform。
其中z-index只對相同等級的元素有效
11.position
屬性static 預設
relative：相對定位，公升起來，但是不脫離文件流
absolute：絕對定位 一般跟relative配合使用
fixed：固定定位
sticky：粘滯定位寫了absolute，一定要加乙個relative
寫了absolute或者fixed ，一定要加top或者left
sticky相容性很差
12.css動畫
瀏覽器的渲染過程根據html構建html樹
根據css構建css樹
將兩顆樹合併成一顆渲染樹
lauout布局(文件流，盒模型，計算大小和位置)
paint繪製(根據邊框，文字，陰影...)
compose合成(根據層疊關係展示畫面)
13.css動畫優化js優化：使用requestanimationframe代替settimeout或setinterval
css優化：使用will-change或translate
14.transform屬性translatex(); 向x軸方向移動
translatey(); 向y軸方向移動
trandlatez(); 向z軸方向移動
translate3d(x,y,z);
scale(); 放大
rotate(xdeg)； 旋轉
rotatex();
rotatey();
slcew(); 傾斜
slcewy();
sclewx();
15.transition過度:補充中間幀變化位置時間過度方式延遲
width1slinear1s
height...ease...
all.........
16.animation：宣告關鍵幀，新增動畫
第一種 方法時長
過渡方式(跟transition取值一樣)
延遲次數(3或2.4或infinite) |
方向(reverse|alternate|alternate-reverse) |
填充模式(none|forwards|backwords|both) |
是否暫停(paused|running) | 動畫名；
第二種 方法
animation: 1s infinite forwards ***;
@keyframes ***{
0% {
transform:none;
66% {
transform:tranlatey(200px);
100%{
transform:translatex(200px);
css縱向標尺
今天我的一位朋友不會寫縱向標尺，我就幫忙了一下忙，現在整理出來了，但是沒有前邊的數字值，還望各位包涵。class left1 class right11 class mileft1 class miright11 li li class mileft1 class miright11 li li c...
css知識總結
background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...
CSS知識總結
基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree，而visibility hidden 則會，所以，如果某個節點最開始是不顯示的，設為display none是更...