HTML CSS精簡總結6月3日

2021-10-06 19:13:31 字數 2609 閱讀 9567

彈性盒子

sprite圖

子選擇器

span

網頁實用設定

子元素選擇器

css注釋
css注釋的書寫格式:/* */

1.css元素選擇器
標籤{}

例子:

>

p>

2.類選擇器
《標籤 class="">

.類名{}

復用避免冗餘

3.id選擇器
#id值

>

#one

>

注:id值不能重複

盒子分類

盒子的組成

注:body有他自身的margin

新增padding後盒子增大,保持之前的大小,減去對應的寬高值

背景顏色會延伸至padding區域

margin**重疊現象**:在垂直方向,margin不會相加,取最大值

margin、padding、border 4個邊是可以單獨進行設定的

單獨設定某一邊 marging、padding、border的時候,用小屬性去層疊大屬性

>

divstyle

>

7.大屬性實際上對應4個值,之前寫的1個值實際上是縮寫。對應的4個值是上右下左

8.盒子居中:margin:0 auto;

1.彈性盒子第一步,將他們的父元素 display屬性設定為flex

.box
2.css屬性設定

注:萬用字元選擇器,選擇所有的元素

>

*style

>

3.容器的屬性

flex-direction(專案排列)
row 水平方向,起點在左端

row-reverse 水平方向,起點在右端

column 垂直方向,起點在上面

column-reverse 垂直方向,起點為下面

flex-wrap(換行屬性)
nowrap 不換行

wrap 換行,第一行在上面

wrap-reverse 換行,第一行在下面

justify-content設定專案在主軸上的對齊方式
flex-start 左對齊

flex-end 右對齊

center 居中

space-between 兩段對齊

space-around 每個元素周圍分配相同的空間中間有疊加

space-evenly 每個元素之間的間隔相等

align-items設定y軸上的對齊方式
flex-start 從上面對齊

flex-end 從下面對齊

center 中點對齊

baseline 專案中的文字的對齊

stretch 預設值,如果高度為auto,將填滿整個容器

background:url("./") no-repeat;

background-size:content;

​ cover;

backgound-position: 40px 90px;

請求一張,節約資源

通過position設定

background position: x軸座標,y軸座標

>

.two p

style

>

class

="two"

>

>

>

123p

>

>

123p

>

div>

用於控制子標籤

>

123451231>

1231231span

>

p>

header span:first-child i

header span:nth-child(2) i

盒子的間距用: margin-top

標題用h標籤:h1 h2 h3 標題

h標籤有margin 和padding 在全域性設定 取消 margin padding值

調整行內的文字垂直居中:line-height:

div跑右邊 檢查div是否已經全部結束

div裡面的模組大小可以用百分比設定 height:50%

​ width:50%

div中選擇第乙個 .shop_bottom>div:first-child:{}

​ .shop_bottom>div:last-child:{}

border會實際占用畫素,改用outline

.star_bottom>div{

8月6日總結

no.1 mess 得分 0 100 沒有注意可以重複嚶嚶嚶 考場上還覺得這道題辣麼簡單都是幻覺 no.2 lock 得分 0 100 為什麼用freopen就會編譯錯誤?明明自己是可以的 哭唧唧白白浪費70分雖然剩下三個點超時 no.3 acm 得分 0 100 知道要用dp但是我不會!活生生氣死...

3月20日總結

這周一直在做貪心的題,發現貪心的最大特點就是 讀完題目後往往沒有思路,無從下手 而當有思路後,並不會消耗太多時間。近期的題目,關聯資料比較多,往往會用到pair型別或結構體。pair型別 pair包含兩個資料值。與容器一樣,pair也是一種模板型別。但在建立pair物件時,必須提供兩個型別名。pai...

3月5日總結

通用資料同步這個東西做下來 雖然還有問題沒有解決 感覺收穫最大的是測試時不要在真實的資料庫裡測試和sql語句不要寫在迴圈裡。這次更新set錶出問題,真是給了我乙個很大的教訓,有時候太自以為是了,有些問題不能想當然,做開發還是要一步一步謹慎著來,因為本地沒法測試,所以直接在伺服器上來,想著更新語句應該...