1 div盒子樣式居中

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

1.1 div盒子水平居中

margin:0 auto;

2 清除浮動

2.1 標簽法

簡單，結構性差

clear: both;

部分瀏覽器支持flow-root屬性

display:flow-root;

2.2 overflow屬性
簡單隱藏元素，如果使用hidden，溢出的元素無法顯示

overflow:hidden; /*hidden| auto| scroll 都可以實現。*/

2.3 after偽元素清除浮動

給需要去除浮動的盒子的父盒子添加clearfix屬性
推薦使用

.clearfix:after { content: "";display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 專有 */ .clearfix::after{content:""；display:table；clear:both； }

2.4 雙偽元素清除浮動

給需要去除浮動的盒子的父盒子添加clearfix屬性
推薦使用

.clearfix:before, .clearfix:after { content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}

3 禁止手機端縮放

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

暫時寫到這，更新ing 3.1

4 色相hsl(270,60%,70%)

a:hover懸停
a:active活躍
rgb相互轉換十六進制

推薦網站
webfx.com/web-design/hex-to-rgb

5 字體font-family

Serif和sans-serif 襯線和無襯線 serif sans-serif
Script Fonts 斜線請柬cursive
Decorative Fonts 裝飾字體cursive fantasy
Monospace Fonts 單行字體monospace
引入字體文件@font-face

字體網站fonts.google.com

6 清除浮動

.clearfix::after{content:""；display:table；clear:both； } display:flow-root;

7 The Box Model Fix

html｛box-sizing : border-box; ｝ *,*:before,*:after{box-sizing:inherit; }

position

static relative absolute fixed sticky

8 flex 軸

flex-container父元素 flex-item

<div class="container"><div>flex item</div> </div> .container{display:flex;//不會跨越盒子寬度display:inline-flex//跨越盒子寬度 }

flex-direction決定軸方向

row row-reverse column column-reverse

flex-wrap

wrap 拆行或拆列 no-wrap不拆行或拆列

flex-flow

設置flex-item大小

flex-basis初始大小

flex-grow項目將如何展開

flex-shrink 決定物品收縮方式

flex：grow shrink basis

flex:0 1 100px

flex對齊

justify-content space-between center
align-items

.box{display:flex;align-items:center;justify-content:center; }

9 grid 行 列

grid container顯式 隱式

grid-template-columns
grid-template-rows

grid-auto-columns
grid-auto-rows

grid-column
grid-row
單位 fr
repeat(3,1fr)
gap 間隙

高級選擇器

p:first-child{}
p:last-child{}
first-of-type
last-of-type

響應式

max-width:800px;
width:85%;

圖像鋪滿盒子不重復

.background{background-repeat:no-repeat;background-size:100% 100%;//background-size:cover;//background-position 顯示圖片位置，top right left 可以自己試試 }

10 媒體查詢

@media screen and （max-width:800px）{h1{font-size:16px;} }

寬度斷點
@media (width:360px){}
@media (min-width:360px) and (max-width:800px){}

/* Responsive

------------------------------------*/

@media screen and (min-width:750px){header, footer {text-align: center;}.project-item img {float: left;margin-right: 20px;}.job-item {display: grid;grid-template-columns: 1fr 2fr;column-gap: 20px;}.contact-list {display: flex;justify-content: center;} }@media screen and (max-width:749px){h1 {font-size: 75px;line-height: 0.9;margin-bottom: 20px;}h2 {line-height: 1;}.contact-list a {padding: 5px;} }

先到這3.19

多行文本超出顯示省略號

/* 多行文本超出顯示省略號 *//* 溢出隱藏 */overflow: hidden; /* 超出文本顯示省略號 */text-overflow: ellipsis;/*文本需要顯示的行數 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;

單行文本顯示省略號

/* 單行文本顯示省略號 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //強制不換行

總結

以上是生活随笔為你收集整理的css常用样式汇总记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。