標簽 :
P???????????????????????????? 段落標簽
h1-h6????????????????????? 標題標簽 (1-6 標題字體逐漸減?。?/p>
strong???????????????? 加粗展示
em????????????????????? 斜體展示(strong與em 可嵌套)
del????????????????????? 中劃線
address?????????????? 斜體獨占一行
div????????????????????? 充當模塊(容器指父)
span?????????????????? 充當文本
??????????????? 空格文本
<???????????????????? <
>??????????????????? >
br?????????????????????? 回車鍵(換行符)
hr?????????????????????? 水平線
ol????????????????????? 有序標簽 type =1、a、A、i、I(滿級為24進制)reversed(倒序)? start(第幾個開始排序)
ul?????????????????????無序列表 type = disc(實心圓) square(方塊) circle(空心圓) list-style:none(去掉前綴符號)
img?????????????????? 加載圖片?? alt(圖片占位符) title(圖片提示符)
a????????????????????? 1.超鏈接? target=“_blank”(新的標簽打開網(wǎng)頁)text-decoration:none;(去掉下劃線)
??????????????????????? 2.毛點herf=“#id”(id指某個標簽的id)
?????????????????????? 3.打電話 herf=“tel:電話號碼、mailto:郵箱”
?????????????????????? 4.協(xié)議限定符:javascript:while(1){alert(‘你試試這段代碼‘)}
form???????????????? method? (發(fā)送數(shù)據(jù)的方式) action(發(fā)送對象)
input??????????????? 輸入框????type類型包括:http://www.runoob.com/tags/att-input-type.html多種類型
select????????????? 下拉菜單?與option使用 例如:
瀏覽器包括:shell 和內核 shell指外觀
???????????????? 瀏覽器名稱???內核名稱
???????????????? IE??????????????? trident
???????????????? Firefox???????? Gecko
???????????????? Google??????? blink
??????????????? Safari??????????? webkit
??????????????? Opera?????????? presto
css? 的權重(之間的進制256)
!important????????????????????????? infinity (無窮大)
行間樣式? (style)?? ?????????????? 1000
id.????????????? ???????????????????????? 100
class/屬性/偽類??????????????????? 10
標簽/偽元素(例如:div)??? ????? ?1
通配符????????????????????????????????? 0
三顏色
red?????????????????????????????? greed?????????????????????????????????? blue
00-ff???????????????????????????? 00-ff????????????????????????????????? 00-ff
Text-indent 首行縮近?????????????????????????????????
偽類選擇器:a:hover{屬性}. 功能 鼠標移動設置的狀態(tài)
(一):行級元素 內聯(lián)元素??inline
?????????feature:內容決定元素所占位置
???????????????????? 不可以通過css改變寬高
??span、strong、em、a、del???????????????????
(二):塊級元素block
?????????feature:獨占一行
?????????????????? 可以通過css改變寬高
????div、p、ul、li、ol、form、address
? (三):行級塊元素. Inline-block
?????????feature:內容決定大小
可以改變寬高
行級元素只能嵌套行級元素
塊級元素可以嵌套任何元素
p標簽不能嵌套塊級元素
margin:0 auto (自適應)居中 效果:兩邊背景縮小,中間樣式不變,一直到兩邊縮到無,中間再縮小
定位 position (一般relative作為absolute的參照物)
1.相對定位? absolute.特點:1.脫離原來的位置進行定位 2.最近的有定位的父級進行定位,如果沒有,那么相當于文檔定位
2.相對定位relative??? 特點:1.保持原來的位置進行定位 2.相對自己原來的位置進行定位
在整個頁面進行居中代碼寫法:
3.fixed 固定(指固定一位置無論頁面如何滑動此模塊都不動)
4.z-index
position:fixed; left:50%;top:50%;width:100px;height:100px;background-color:red;margin-left:-50px;margin-top:-50px;
<!--bfc—>
<!--block format context—>
<!— 如何觸發(fā)一個盒子的bfc
?position:obsolute;?display:inline-block;???float:left/right;???? overflow:hidden;(溢出部分隱藏)
浮動元素:????? clear:both(清除兩邊的浮動流但必須是塊級元素)
?float:left/right;(浮動元素產(chǎn)生了浮動流)?? 指所有產(chǎn)生了浮動流的元素,塊級元素看不到他們
產(chǎn)生bfc的元素和文本類屬性(inline)的元素以及文本都能看到浮動元素
補充知識:
<span></span>中設置position:obsolute;或者 float:left/right; 可以設置寬高,自帶display:inline-block屬性
vertical-align(地步對齊線調試調試):
偽元素:
? span::before/after{content:”必須有content”+屬性}
white-space:nowrap; 禁止換行
overflow:hidden; 溢出隱藏
text-overflow:ellipsis;
Height = 40; line-height = 20; 它們有倍數(shù)關系,要想讓字體占行高完整就算好之間的進制;
Div設置背景圖片:
background-image:url(圖片路徑)? ;
background-size:大小;
background-repet:no-repet(不重復)
background-position:left top;????????