0.1、css引入界面的方式: 內(nèi)聯(lián)式:通過標簽的style屬性，在標簽上直接寫樣式。 <div style="width:100px; height:100px; background:red "></div> 嵌入式:通過style標簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表。 <style type="text/css"> div{ width:100px; height:100px; background:red } </style> 外鏈式:通過link標簽，鏈接外部樣式文件到頁面中。 <link rel="stylesheet" type="text/css" href="css/main.css">

0.2、css選擇器:

標簽選擇器 類選擇器 層級選擇器

?

0.3、 屬性(常用): 布局常用: width,height,background,border,solid(實線),padding, margin,float,opacity:0.3(元素透明度),z-index:1(表示層疊,值越大越上面)

?

文本常用樣式屬性; color,font-size ,font-family ,font-weight ,line-height, text-decoration(去下劃線),text-align(文字對齊方式),text-indent(文字首行縮進) 0.4、元素溢出: overflow:visible(默認值)不會被修剪 hidden:被修剪,其余內(nèi)容不可見 scroll:被修剪,但是瀏覽器會有一個滾動條看其余內(nèi)容 auto:如果被修剪就會有滾動條

?

0.5、分欄: <p>這一段文字用來測試分欄。這一段文字用來測試分欄。這一段文字用來測試分欄。</p>

?

p { width: 200px; /* 把段落的寬度設短一點，便于效果的展現(xiàn) */ column-count: 3; /* 設定需要分幾欄 */ column-gap: 20px; /* 設定兩欄間隔 */ }

1.1、盒模型: 包括:內(nèi)容(content),填充(padding),邊框(border),邊距(margin). 我們給元素設置的高度,是內(nèi)容(content)的高度,再給元素添加填充(padding), 這樣的話會讓原本的元素看起來更高,因為會撐起 1.2、無語義:沒有任何樣式的元素(就是沒有行高,間距,顏色之類的東西),比如div 1.2 以邊框為界的盒模型: <box-sizing:border-box></box-sizing:border-box> 有些時候,我們不希望給元素填充(padding)時,元素高度改變,不利于我們布局,就可以 使用上面的方法,在IE的怪異模式下,使用了這種模式 ... <div class="box-model">box-model</div> ... <typle> .box-model { box-sizing: border-box; /* 設置成以邊框為界的盒模型 */ border: 1px solid red; height: 80px; padding: 10px; } </typle>

?

1.3、行內(nèi)元素(inline),塊元素(block) 布局一般都用塊元素: 1.3.1 塊元素可以設置寬高,默認占據(jù)一行,行內(nèi)元素不能設置寬高,寬度由其內(nèi)容決定 1.3.2 塊元素默認沒有高度,有內(nèi)容才會有高度. 行內(nèi)元素默認沒高度和寬度,有內(nèi)容才會有,行內(nèi)元素雖然不能設置寬高,但是設置 成絕對定位(absolute)后,可以設置寬高. 1.3.3 塊元素: <div></div> <p></p> <ul></ul> <li></li> <table></table> <form></form> <header></header> <section> <option></option> </section> <footer></footer> <dl></dl> <dd></dd>

?

行內(nèi)元素: <a href=""></a> <font></font> <em></em> <strong></strong> <i></i> <img src="" alt=""> <span></span> 空元素: <br> <hr> <img> <input type="text"> <link rel="stylesheet" href=""> <meta> 1.3.4 一行只有一個塊元素,但是行內(nèi)元素可以有很多個,空的元素將在布局的時候消失 1.3.5 行內(nèi)塊元素: inline-block 三個li并列，都設置成inline-block。當對最左邊的元素設置display:none;時， 其他兩個li會下沉到容器的底部。此時，需要對這兩個li設置頂部對齊（vertical-align:top;） <ul class="nav" id="nav"> <li class="left"><div class="hidden">首頁</div></li> <li class="center"><div>文章</div></li> <li class="right"><div>留言</div></li> </ul> .hidden {display: none;} .left {height: 50px;} .center,.right {vertical-align: top;} 1.3.6 隱藏元素: visibility:hidden; display:none; //隱藏元素并且會清除原本占用的布局空間

?

1.4、位置(position): 1.4.1 絕對(absolute),相對(relative),固定(fixed) 移動:left,right,top,bottom 清除布局空間的定位(absolute fixed) 1.4.2 固定定位（fixed）不會隨著鼠標的滾動而改變位置。 他真的是固定屏幕的某一個位置的，比較常見的是網(wǎng)頁右下角的廣告

?

絕對定位（absolute）的定位原點是非默認定位（static）的父節(jié)點。 可以是absolute fixed relative，如果父節(jié)點沒有這些，那定位原點就是body了。 使用了這兩種定位中的一種，元素原本占用的布局空間將會消失（脫離文檔流)

?

1.4.5 相對定位(relative): 相對原有位置定位。 使用這種方法，元素原本占用的布局會保留。 父級采用relative，子代采用absolute。則子代的定位原點變?yōu)楦讣壴氐淖笊辖? 默認定位:static 浮動(float): 居中一個浮動元素: Width:500px ; height:300px;//高度可以不設 Margin: -150px 0 0 -250px; 居中一個普通元素: margin:0 auto; 清除浮動(overflow:hidden;): 使用這種方法意味著，浮動元素得有一個父元素，并給父元素添加overflow:hidden;屬性。 .nav { overflow: hidden; } 清除浮動(.clear): 這種方法需要在浮動元素后面添加一個空的節(jié)點，然后寫上clear屬性。兼容IE6需要添加zoom:1;。 <div class="clear"></div> <!--用來清楚浮動的空元素-->

css選擇符有哪些: id選擇器（ # myid） 類選擇器（.myclassname） 標簽選擇器（div, h1, p） 相鄰選擇器（h1 p） 子選擇器（ul < li） 后代選擇器（li a） 通配符選擇器（ * ） 屬性選擇器（a[rel = “external”]） 偽類選擇器（a: hover, li: nth - child） 1.5、 display的值 block 象塊類型元素一樣顯示。 none 缺省值。向行內(nèi)元素類型一樣顯示。 inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標記。 1.6、 權重: 標簽:權重為:1 類選擇器:權重為:10 id選擇器:權重為100 權重可以相加的:如#id div的權重就是101 內(nèi)嵌在標簽里面的style屬性的權重為1000 權重相同時,最后定義的樣式會起作用,一般都要盡量避免這樣的情況 1.7、 優(yōu)雅降級: web站點在所有新式瀏覽器中都能正常工作,如果是老式瀏覽器,就會檢查是否能正常工作, 如果不能支持功能就為那些瀏覽器增加候選方案,使之在舊式瀏覽器上能以某種形式降級體驗 ,但是卻不至于完全失效. 漸進增強: 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能, 向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

?

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=jakhaib&title=前端html,css基礎總結

總結

以上是生活随笔為你收集整理的前端html,css基础总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。