1.選擇父元素的子元素,除去最后一個(gè)
.item:not(:last-child) {
background: red
}
2.文本溢出
a.文本溢出顯示省略號(hào)
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
b.讓文本顯示兩行拣宏，溢出部分省略號(hào)顯示
width:200px;
max-height: 50px;
line-height: 25px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
注意:
因使用了WebKit的CSS擴(kuò)展屬性锁孟，該方法適用于WebKit瀏覽器及移動(dòng)端；
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)浩嫌。 為了實(shí)現(xiàn)該效果超歌，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
display: -webkit-box; 必須結(jié)合的屬性 卖鲤，將對(duì)象作為彈性伸縮盒子模型顯示 肾扰。
-webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 扫尖。
3.清除input,textarea的默認(rèn)樣式
input, textarea {
outline: none; //取消聚焦邊框
-webkit-appearance: none; //去掉按鈕樣式
border-radius: 0;
border:0;
}
textarea {
resize:none; //取消可拖動(dòng)放大,右下角的拖動(dòng)
}
4.修改placeholder樣式
input:placeholder {
color: #666;
font-size: 12px;
}
input:-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #666;
font-size: 12px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #666;
font-size: 12px;
}
input:-moz-placeholder { /* Mozilla Firefox 19+ */
color: #666;
font-size: 12px;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666;
font-size: 12px;
}
5.去掉a標(biāo)簽下劃線,ul,li默認(rèn)樣式
a {
text-decoration: none;
}
ul, li {
style-list: none;
}
6.box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow : 必需白对。水平陰影的位置。允許負(fù)值换怖。[ 相對(duì)于最近邊界的位置 ]
v-shadow : 必需甩恼。垂直陰影的位置。允許負(fù)值沉颂。[ 相對(duì)于最近邊界的位置 ]
blur : 可選条摸。模糊長(zhǎng)度 [ 實(shí)際長(zhǎng)度是給定長(zhǎng)度的一半 ]
spread : 可選。陰影的尺寸铸屉。[ 可以為負(fù)值 ]
color : 可選钉蒲。陰影的顏色。請(qǐng)參閱 CSS 顏色值彻坛。
inset : 可選顷啼。將外部陰影 (outset) 改為內(nèi)部陰影踏枣。
說明：
h-shadow 與 v-shadow 都為 0 時(shí)表示不偏移，表示四周擴(kuò)散
blur : 表示模糊長(zhǎng)度钙蒙，實(shí)際模糊距離是設(shè)置值的一半
設(shè)置指定邊茵瀑，主要控制水平和垂直陰影的位置，可以分別指定哪個(gè)方向的陰影位置如分別指定四邊：
box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
可以使用該屬性替代 border 的邊框?qū)傩怨幔锰幨顷幱安徽伎臻g马昨，動(dòng)效不會(huì)出現(xiàn)移動(dòng)如：
.box{background:green; width:200px;height:200px;
.box1:hover{
border:2px solid #ffffff;
box-sizing:border-box;
position:relative;
top:-2px;
left:-2px;
}
.box2:hover{
box-shadow:0 0 0 2px #ffffff;
}
7.flex布局
布局的傳統(tǒng)解決方案，基于盒狀模型扛施，依賴 display屬性 + position屬性 + float屬性鸿捧。它對(duì)于那些特殊布局非常不方便，比如疙渣，垂直居中就不容易實(shí)現(xiàn)匙奴。
一、Flex布局是什么妄荔？
Flex是Flexible Box的縮寫饥脑，意為”彈性布局”，用來為盒狀模型提供最大的靈活性懦冰。
任何一個(gè)容器都可以指定為Flex布局灶轰。
.box{ display: flex; }
行內(nèi)元素也可以使用Flex布局。
.box{ display: inline-flex; }
Webkit內(nèi)核的瀏覽器刷钢，必須加上-webkit前綴笋颤。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，設(shè)為Flex布局以后内地，子元素的float伴澄、clear和vertical-align屬性將失效。
二阱缓、基本概念
采用Flex布局的元素非凌，稱為Flex容器（flex container），簡(jiǎn)稱”容器”荆针。它的所有子元素自動(dòng)成為容器成員敞嗡，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱”項(xiàng)目”航背。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）喉悴。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end玖媚；交叉軸的開始位置叫做cross start箕肃，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列今魔。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size勺像，占據(jù)的交叉軸空間叫做cross size障贸。
三、容器的屬性
以下6個(gè)屬性設(shè)置在容器上吟宦。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）惹想。
有四個(gè)值:
- row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端督函。
- row-reverse：主軸為水平方向，起點(diǎn)在右端激挪。
- column：主軸為垂直方向辰狡，起點(diǎn)在上沿。
- column-reverse：主軸為垂直方向垄分，起點(diǎn)在下沿宛篇。
.box { flex-direction: row | row-reverse | column | column-reverse; }
flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上薄湿。flex-wrap屬性定義叫倍，如果一條軸線排不下，如何換行豺瘤。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
（1）nowrap（默認(rèn)）：不換行吆倦。
（2）wrap：換行，第一行在上方坐求。
（3）wrap-reverse：換行蚕泽，第一行在下方。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式桥嗤，默認(rèn)值為row nowrap须妻。
.box {flex-flow: <flex-direction> <flex-wrap>;}
justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
有5個(gè)值:
- flex-start（默認(rèn)值）：左對(duì)齊
- flex-end：右對(duì)齊
- center： 居中
- space-between：兩端對(duì)齊泛领，項(xiàng)目之間的間隔都相等荒吏。
- space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以渊鞋，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍绰更。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
可以取5個(gè)值:
- flex-start：交叉軸的起點(diǎn)對(duì)齊锡宋。
- flex-end：交叉軸的終點(diǎn)對(duì)齊动知。
- center：交叉軸的中點(diǎn)對(duì)齊。
- baseline: 項(xiàng)目的第一行文字的基線對(duì)齊员辩。
- stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto盒粮，將占滿整個(gè)容器的高度。
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
[圖片上傳失敗...(image-198027-1545276107500)]
align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式奠滑。如果項(xiàng)目只有一根軸線丹皱，該屬性不起作用妒穴。
- flex-start：與交叉軸的起點(diǎn)對(duì)齊。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊摊崭。
- center：與交叉軸的中點(diǎn)對(duì)齊讼油。
- space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布呢簸。
- space-around：每根軸線兩側(cè)的間隔都相等矮台。所以，軸線之間的間隔比軸線與邊框的間隔大一倍根时。
- stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸瘦赫。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
四、項(xiàng)目的屬性
以下6個(gè)屬性設(shè)置在項(xiàng)目上蛤迎。
order屬性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order屬性定義項(xiàng)目的排列順序确虱。數(shù)值越小，排列越靠前替裆，默認(rèn)為0校辩。
flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0辆童，即如果存在剩余空間宜咒，也不放大。
.item {flex-grow: <number>; /* default 0 */}
如果所有項(xiàng)目的flex-grow屬性都為1把鉴，則它們將等分剩余空間（如果有的話）荧呐。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1纸镊，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍倍阐。
flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1逗威，即如果空間不足峰搪，該項(xiàng)目將縮小。
.item { flex-shrink: <number>; /* default 1 */}
如果所有項(xiàng)目的flex-shrink屬性都為1凯旭，當(dāng)空間不足時(shí)概耻，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0罐呼，其他項(xiàng)目都為1鞠柄，則空間不足時(shí)，前者不縮小嫉柴。
負(fù)值對(duì)該屬性無效厌杜。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性夯尽，計(jì)算主軸是否有多余空間瞧壮。它的默認(rèn)值為auto，即項(xiàng)目的本來大小匙握。
.item { flex-basis: <length> | auto; /* default auto */}
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫咆槽，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選圈纺。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)秦忿。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性蛾娶，因?yàn)闉g覽器會(huì)推算相關(guān)值灯谣。
align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性茫叭。默認(rèn)值為auto，表示繼承父元素的align-items屬性半等，如果沒有父元素揍愁，則等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
