彈性盒子
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錶出問題,真是給了我乙個很大的教訓,有時候太自以為是了,有些問題不能想當然,做開發還是要一步一步謹慎著來,因為本地沒法測試,所以直接在伺服器上來,想著更新語句應該...