2月第7題:為什麼要初始化 CSS 樣式?

2021-02-20 前端面試每天1題

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對 CSS 初始化 往往會出現瀏覽器之間的頁面顯示差異。 

當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況 下初始化。 

最簡單的初始化方法：*{padding:0;margin:0;}（強烈不建議） 

淘寶的樣式初始化代碼：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend ,button,input,textarea,th,td{    margin:0;padding:0;} body,button,input,select,textarea{    font:12px/1.5tahoma,    arial,\5b8b\4f53;} h1,h2,h3,h4,h5,h6{    font-size:100%;} address,cite,dfn,em,var{    font-style:normal;} code,kbd,pre,samp{    font-family:couriernew,    courier,monospace;} small{    font-size:12px;} ul,ol{    list-style:none;}a{    text-decoration:none;} a:hover{    text-decoration:underline;} sup{    vertical-align:text-top;} sub{    vertical-align:text-bottom;} legend{    color:#000;} fieldset,img{    border:0;} button,input,select,textarea{    font-size:100%;} table{    border-collapse:collapse;    border-spacing:0;}

相關焦點

  • CSS樣式大全
    （微信後臺回復「CSS」，即可獲得關於css設計的幫助文檔哦）字體屬性：(font)大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)行高
  • CSS字體樣式
    字體樣式常用的有五種屬性，看下表。
  • css樣式大全
    Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css
  • 純CSS實現Tab頁籤樣式
    doctype html><html lang="zh"><head> <meta charset="UTF-8"> <title>純CSS實現Tab頁籤樣式</title> <style type="text/css"> body {
  • 進階:玩轉 CSS 變量
    /* 沒有設置過 --primary-color，顏色默認使用 #7F583F */color: var(--primary-color, #7F583F);雖然目前 CSS 變量不是新的屬性，但終究不是所有的瀏覽器都支持 CSS 變量的，這裡我們還是要考慮一下優雅降級
  • 【前端-CSS動畫】製作聖誕節彩燈
    css動畫 animationcss動畫 keyframesbox-shadow
  • 公司的一個面試題:如何用CSS讓一個容器水平垂直居中?
    DOCTYPE html>   <html>      <head>          <meta charset="UTF-8">          <title>demo</title>      </head>      <body>          <style type="text/css
  • 零基礎學編程第7課:用class寫Html元素的樣式屬性
    一、回顧上堂課《零基礎學編程第6課：Html中span的用法》上堂課通過對<span></span>的講解與示範，溫習了樣式屬性（style=""）的應用。通過差異表現出來的不同現象，去找出代碼區別性）通過觀察，我們可以看到第1、4、7行的代碼裡class屬性的數值是"red"。
  • 第333天:實現消息提示組件
    /* 隱藏時動畫 */ opacity: 0; transform: translateY(-50px); } .msg-unit > .msg-icon{ /* 圖標 */ font-size: 15px; margin: 0 7px
  • 每日一題:力扣85-最大矩形
    1.2 示例示例1：輸入：  matrix = [["1","0","1","0","0"],["1","0","1","1","1"],["1","1","1","1","1"],["1","0","0","1","0"]]輸出： 6解釋
  • CSS Grid 網格布局:「16」使用 place-content 屬性指定網格元素水平、垂直方向元素分布方式
    語法如下所示：<style type="text/css">.container { place-content: <align-content> <justify-content>?
  • CSS魔法堂:Box-Shadow沒那麼簡單啦:)
    二話不說看效果3D小球<style type="text/css">.ball{  background: rgba(100,100,100,0.2);  width: 100px;  height: 100px;  padding
  • LeetCode刷題:航班預訂統計
    前言前幾天，有一哥們發我一個LeetCode題目連結，緊跟著附上了自己的提交記錄，一個2ms，另一個1451ms...我一看，這題有點意思啊，不同的思路竟然時間差這麼多。搞它。示例：❝輸入：bookings = [ [1,2,10], [2,3,20], [2,5,25] ], n = 5輸出：[10,55,45,25,25]❞O(m*n)解法根據題意初始化長度為n的answer數組，代表1到n號航班預訂的座位數量，外層遍歷 bookings
  • HTML+CSS系列:登錄界面實現
    /css/style.css" /> <link rel="stylesheet" href="css/iconfont.css"/> <title>登錄界面</title> </head> <body> <div id="bigBox"> <
  • 數獨:一道很簡單的數獨題,附上次有趣的數獨題答案
    現在很多大公司，在招人時都會要求做數獨題，這種現象使我對數獨產生了濃厚的興趣。
  • 第343天:實現三欄布局
    DOCTYPE html><html><head> <title>FLEX</title> <style type="text/css"> .container{ display: flex; height:
  • 10道有趣的智力題,自認IQ智商高的朋友來挑戰一下吧!
    第2題第7題第10題答案1.小編可以切兩刀，分為1/7、2/7、4/7三段。第一天給1/7；第二天給2/7，要回1/7；第三天給1/7 ；第四天給4/7 要回1/7+2/7；第五天給1/7；第六天給2/7，要會1/7；第七天給1/7。2.小編可以在第1個袋裡裝1個，第2個袋裡裝3個，第3個袋裡裝5個，然後把已裝有桌球的三個袋裝在第4個袋裡。
  • jquery css() 增加值
    DOCTYPE html><title>My Example</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>  $( function
  • 史上最牛X的遊戲題,連我都答錯了,你能答對嗎?
    題二有個人去買蔥，問蔥多少錢一斤，賣蔥的人說：1塊錢1斤，這是100斤，要完100元。買蔥的人又問：蔥白跟蔥綠分開賣不？賣蔥的人說：賣，蔥白7毛，蔥綠3毛。買蔥的人都買下了，稱了稱蔥白50斤，蔥綠50斤，最後一算蔥白50*7等於35元，蔥綠50*3等於15元，35+15等於50元。買蔥的人給了50元就走了。請問：為什麼100元的蔥50元就被買走了？