首頁 >web前端 >css教學 >CSS中*和body有什麼差別?最全詳解

CSS中*和body有什麼差別?最全詳解

云罗郡主
云罗郡主轉載
2018-10-27 11:28:025574瀏覽

這篇文章帶給大家的內容是關於CSS中*和body有什麼區別?最全詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

CSS中*和body有什麼差別?最全詳解

在介紹它們兩個我們首先應該知道這兩個符號在CSS檔案中扮演的是什麼角色。在CSS檔案中*是通配符選擇器,它可以選擇文件中所有的元素,也就是說是通殺選擇器。 body是一個普通的類型選擇器,只能夠選中body這麼一個元素。而之所大家會感覺到*和body選擇器有時候作用是相同的,主要是因為body是絕大多數佈局元素的父元素,如果元素的CSS屬性居有繼承性的話,那麼兩者的效果確實一樣。例如:

body{font-size:12px;}
*{font-szie:12px;}

以上兩個程式碼的作用是完全一樣的,因為font-size屬性是居右繼承性的。但大家還是要明白它們的原理是不一樣的,*選擇器確實是選擇了每一個元素並且把它們的字體大小設置為12px,body則是通過繼承將字體設置為12px的。

在很多CSS頁面的開頭都有這麼一句程式碼:

*{margin:0;padding:0}

因為很多元素都有預設的內邊距或外邊距,例如body、ul、p和標題元素h1- h6等。使用以上程式碼可以輕鬆的清除所有元素的外邊距margin和內邊距padding,但也會帶來問題。例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.lvyestudy.com/" />
<title>php中文网</title>
<style type="text/css">
*{margin:0px;padding:0px;}
input{height:40px;}
</style>
</head>
<body>
<input type="text" name="mytest" />
</body>
</html>

以上程式碼可能會造成在一些瀏覽器中文字方塊輸入的文字顯示在左上角,並不是所以瀏覽器都這樣。建議還是使用以下方式來統一定義樣式:

body,ul,h1,h2,h3,h4,h5,h6,form,dl,p{
样式代码
}

以上就是對CSS中*和body有什麼區別?最全詳解的全部介紹,希望大家可以有所收穫,更多CSS影片教學請關注PHP中文網。

以上是CSS中*和body有什麼差別?最全詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:lvyestudy.com。如有侵權,請聯絡admin@php.cn刪除