-
寬高不定實現盒子水平垂直居中
1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。
2、子元素設置上和左偏移的值都為50%。
3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。
查看全部 -
已知寬高實現盒子水平垂直居中
1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。
2、子元素設置上和左偏移的值都為50%，是元素的左上角在父元素中心點的位置。
3、然后再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。
查看全部 -
給子元素設置flex占比
1、給子元素設置flex屬性,可以設置子元素相對于父元素的占比。
2、flex屬性的值只能是正整數,表示占比多少。
3、給子元素設置了flex之后,其寬度屬性會失效。
查看全部 -
使用justify-content屬性設置橫軸排列方式
flex-start：交叉軸的起點對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
查看全部 -
彈性盒子
1、設置display: flex屬性可以把塊級元素在一排顯示。
2、flex需要添加在父元素上，改變子元素的排列順序。
3、默認為從左往右依次排列,且和父元素左邊沒有間隙。
查看全部 -
使用position:relative可以使得相對其他元定位，但是必須遵守下面規范：
1、參照定位的元素必須是相對定位元素的前輩元素
2、參照定位的元素必須加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
查看全部 -
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實現相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。
查看全部 -
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
查看全部 -
如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
查看全部 -
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
查看全部 -
長度單位：
像素：px
em：是font-size的整數倍
百分比：行高（行間距）為字體的130%
查看全部 -
text-align:center 居中
text-align:left;? ?居左
text-align:right; 局右
查看全部 -
letter-spacing:字母與字母之間的間隔
word-spacing:英文單詞之間的間距
查看全部 -
p{text-indent:2em;}
文本設置2個空格縮進，這可以用于中文文字中的段前兩個文字的空白
查看全部 -
權值的規則：
標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
查看全部
舉報