html與css
阿新 • • 發佈:2020-08-13
margin塌陷解決方法:
給父級元素觸發 BFC:
(1)position:absolute;
(2)display:inline-block;
(3)float:left/right;
(4)overflow:hidden;(溢位部分隱藏)
//使用`position:absolute`和 `display:inline-block`後該元素會自動轉化為行級塊元素。
input 的 required屬性:
對於表單,你可以指定某些選項為required(必填項),只有當用戶填寫了該選項後,使用者才能夠提交表單。 例如,如果你想要一個文字輸入框設定為必填項,你可以在 input 元素中加上 required 屬性,你可以使用: <input type="text" required>
特殊標籤:
p便籤不能套塊級元素,p標籤會被砍成兩個
a標籤不能套a標籤
input 的 checked 屬性:
預設被選中
css文字屬性
text-intent:2em; //縮排元素中文字的首行
word-spacing:5px; // 設定字間距
清除浮動
方法一:(所有瀏覽器相容) //before after .clearfix::after{ display: block; content: ""; height: 0; clear: both; visibility: hidden; //可見性 } 方法二:(不建議) <div class="clear"></div> .clear{ clear:both; } 方法三: overflow: hidden;
position定位
子絕父相:子絕對值absolute,父相對值relative
滑鼠懸停圖片變大變亮效果
//圖片新增.pic類
.pic{
transition: all 1s;
}
li:hover .pic{
transform: scale(1.2);
filter: brightness(120%);
}
z-index
z-index必須結合定位position才能起作用
彈性盒子
一,容器的屬性
flex-direction
決定主軸的方向(即專案的排列方向)。
.box { flex-direction: row | row-reverse | column | column-reverse; } row(預設值):主軸為水平方向,起點在左端。 row-reverse:主軸為水平方向,起點在右端。 column:主軸為垂直方向,起點在上沿。 column-reverse:主軸為垂直方向,起點在下沿。
justify-content
定義了專案在主軸上的對齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(預設值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊,專案之間的間隔都相等。
space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
align-items
定義專案在交叉軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。
space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(預設值):軸線佔滿整個交叉軸。
flex-wrap
預設情況下,專案都排在一條線(又稱"軸線")上。flex-wrap
屬性定義,如果一條軸線排不下,如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(預設):不換行。
wrap:換行,第一行在上方。
wrap-reverse:換行,第一行在下方。
二、專案的屬性
學習連結:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
align-self屬性
align-self
屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items
屬性。預設值為auto
,表示繼承父元素的align-items
屬性,如果沒有父元素,則等同於stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
/* align-self用於設定側軸某個單獨專案的對齊方式 */
該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。
order屬性
order
屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
.item {
order: <int整數>;
}
flex-grow屬性
flex-grow
屬性定義專案的放大比例,預設為0
,即如果存在剩餘空間,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有專案的flex-grow
屬性都為1,則它們將等分剩餘空間(如果有的話)。如果一個專案的flex-grow
屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性
flex-shrink
屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有專案的flex-shrink
屬性都為1,當空間不足時,都將等比例縮小。如果一個專案的flex-shrink
屬性為0,其他專案都為1,則空間不足時,前者不縮小。
負值對該屬性無效。
flex-basis屬性
flex-basis
屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto
,即專案的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
/* flex-basis用於設定專案的寬度
1.flex-basis只能在彈性模式下(display:flex;)使用
2.flex-basis與width同時出現的時候,優先考慮flex-basis;
但是如果出現一個為固定數值的情況下,優先考慮固定數值*/
它可以設為跟width
或height
屬性一樣的值(比如350px),則專案將佔據固定空間。