1、響應式布局
利用**查詢，即media queries，可以針對不同的**型別定義不同的樣式，從而實現響應式布局。
常見選項：
**型別
and、not
min-width、max-width:
例如@media all and (min-width:500px) and (max-width: 700px)
}當解析度大於最小寬度並小於最大寬度時，執行{}內的樣式(注意and兩邊要空格隔開)
在all前面加not表示取反;多個響應時要注意操作順序：
@media all and (min-width:500px)
}@media all and (min-width: 700px)
}這樣寫width=500~700時顯示藍色，大於700時顯示黃色，順序反過來則只顯示藍色
orientation：portrait、orientation：landscape:
針對橫豎屏的響應式觸發，先寫條件，選擇器和樣式寫在{}內，注意and兩邊一定要用空格隔開：
@media all and (orientation: portrait)
}@media all and (orientation: landscape)}:
當滿足()內條件時，引入相應的css檔案,條件也可以寫橫豎屏，實現橫豎屏不一樣的樣式
常見修改樣式：
display
float
width
注：響應式**寫到要適配的css後面
兩種常見的響應式方法：
1、被動的：
@media all and (min-width: 1200px)
}{}內的選擇器不變，當()內條件改變時，相同的選擇器內樣式不同。
2、主動式：
@media all and (min-width:768px)
}{}內的選擇器不同，當需要不同樣式時，在body裡新增相應的類：
hello media
2、bootstrap
bootstrap是最受歡迎的html、css和js框架，用於開發響應式布局、移動裝置優先的web專案
特色：1、響應式布局
2、基於flex的柵格系統
3、豐富的元件和工具方法
4、常見的互動使用
官網：
熟悉相應類名的定義，了解其功能，通過使用相關類名達到布局的效果。
(意思就是，某個類名框架已經給你寫好樣式了，你只需要記住這個類名，當需要用到這種樣式時，為相關標籤新增該類名就可以了)
*具體可以參考官網文件與例子
containers:版心屬性
container
container-fluid
responsive breakpoints
grid system:柵格系統
grid options:網格配置
responsive classes：響應式的類
gutters：間距
alignment：對齊方式
reordering：排序
offsetting：位置邊距
....
[class*=col]該選擇器表示，所有包含col的類
*即該框架向當於把幾乎所有的新特性樣式整合到各個類名裡面，編寫程式時，把直接新增(呼叫)樣式的方式變為為標籤新增封裝有相應樣式的類名即可。主要的意義在於省的讓我們自己去寫樣式；只要背幾個class就不用了寫任何樣式的設計網頁，就是該框架的初衷。
常見的margin類：
mr-auto:margin-top:auto;
mt-5:margin-top:5rem; 注意了這些類的單位都是rem
mt-md-5:margin-top:5rem; md響應式範圍內生效
mx-5:margin-left:5em; margin-right:5rem;
my-5:margin-left:5em; margin-right:5rem;
mt-n5:margin-top:-5rem;
py-5:padding-top:5rem;padding-bottom:5rem;
content
reboot：重置預設樣式
typography：針對裝置
code:**
image:
tables：**
figures：描述
..*使用時去官網看文件:很多的類都是以樣式名來命名的
components:元件
alerts:彈出提示
badge:徽章
breadcrumb：麵包屑(導航的一搬叫麵包屑)
buttons：按鈕
button group：按鈕組
card：卡片
....
*多看參考文件，多練習，才能掌握bootstrap
(非常重要)*利用bootstrap外掛程式可以快速建立相關樣式，格式為b4-相關樣式名稱。
utilities：工具方法
borders：邊框
clearfix：清除浮動
close icon：關閉icon
colors：顏色
display：顯示型別
embed：**
...*通過blog首頁的製作，熟悉了bootstrap的基本使用，它適合快速搭建中小型專案，不適合搭建大型專案，因為類會太多。還有乙個優點是，適合用來做針對不同裝置的響應式布局。
css自定義屬性（也稱為了"css變數"），在目前所有的現代瀏覽器中都得到了支援。
定義與使用: --color:red;通過"--"來定義； background: var(--color);這樣來使用
計算預設值
作用域css新特性之shapes
css shapes布局可以實現不規則的文字環繞效果，需要和浮動配合使用。
shape-outside
clip-path
shape-margin
css scrollbar用於實現自定義滾動條樣式(主要利用偽元素實現)
::-webkit-scrollbar: widht: 1px;定義的是滾動條的橫向寬度，即它有多粗
::-webkit-scrollbar-thumb:設定拖拽塊的樣式
::-webkit-scrollbar-track:定義滾動條上下移動的容器樣式
css scroll snap（滾動捕捉）允許你在使用者完成滾動後多鎖定特定的元素或位置,即是滾動條移動到相應區域。
scroll-snap-type
xmandatory
例如： scroll-snap-type: x mandatory;與scroll-snap-align配合使用
scroll-snap-align
start:每個子元素靠左對齊(即防止出現滾動條拖動的位置只顯示某個子元素的一部分)
center
end
html與css學習筆記
定位之absolute和relative 一般設定了absolute或relative時，才設定right left left 50px 意思是左邊線距離定位盒子的左邊線50px 一般父盒子設定了position absolute display inline block float left ri...
HTML與CSS學習筆記
恢復內容開始 計蒜客 恢復內容結束 css部分 html head style p p p style head body h1 老王的愛情 h1 p id first 為什麼要那麼痛苦地忘記乙個人，時間自然會使你忘記。如果時間不可以讓你忘記不應該記住的人，我們失去的歲月又有甚麼意義?p p id ...
HTML入門學習筆記 CSS浮動 7
在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等,所以在企業開發中,編寫 之前第一件事情就是清空缺省的邊距 格式 實際開發中不推薦使用這種格式 萬用字元選擇器會找導 遍歷 當前介面中所有的標籤,所以效能不好 企業開發中可以從這個 中拷貝 yui css reset 在css中所有的行都有自己...