#CSS常見樣式2

  1. text-align: center的作用是什么冶忱,作用在什么元素上?能讓什么元素水平居中
    讓行內元素水平居中拔第;作用在塊級元素上点寥;能讓行內元素水平居中艾疟。

  2. IE 盒模型和W3C盒模型有什么區(qū)別?
    寬度的計算標準不一樣:
    IE盒模型:width=border.width+padding.width+content.width;外面的margin不變
    W3C盒模型:width=content.width;

  3. *{ box-sizing: border-box;}的作用是什么敢辩?
    讓所有的元素的盒子模型是按照IE盒模型進行計算的

  4. line-height: 2和line-height: 200%有什么區(qū)別?
    line-height:是對單行文本起作用的蔽莱,可繼承的。
    line-height:2戚长;相對于自身文本大小的兩倍盗冷;而這個倍數(shù)能被基礎,下面的行號就是按照字體的大小
    2來計算的
    line-height:200%:相對于父元素的200%同廉,即繼承父元素的font-size仪糖,然后再乘以2得出結果;
    先是計算出值來迫肖,然后這個值被繼承锅劝,不變。如line-height:200%蟆湖;font-size=16px;則這個行高才16200%=32px,然后這個值被繼承故爵,不管下面的字體會有多大了。所以有時候字體的大小超過行高時會堆積上來隅津。

  5. inline-block有什么特性诬垂?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
    三個特性:一伦仍、有行內元素的性質:大小是隨內容的大小而設定的结窘,不占據(jù)一行;二充蓝、有塊級元素的特性:可以設置寬高晦鞋;
    三、有間隙;
    去縫隙:span標簽并行寫在一起悠垛;span格式寫的不一樣;設置font-size:0娜谊;然后再設置font-size确买。

     <title>JS Bin</title>
    
     <style>  
     span{
         display: inline-block;
         border:1px solid #f0f;
         font-size:10px;
       }
       div{
           font-size:0;
           }
       </style>
       <div>
            <span>ggggggggggggggg</span>
            <span>ddddddddddffff</span>
        </div> 
    

頂端對齊:vertical-align:top;

  1. CSS sprite 是什么?
    稱為精靈圖纱皆,也叫”雪碧圖“湾趾,是一種png的圖片格式。用一張.png格式圖片來放置所有的小圖標派草,然后引用這一張圖片搀缠,設置background-position來顯示不同的圖標。這樣可以減少向服務器的請求數(shù)量近迁,提高加載速度艺普。

  2. 讓一個元素"看不見"有幾種方式?有什么區(qū)別?
    visibility:hidden;(隱藏看不見鉴竭,但是它還是在的歧譬,占據(jù)空間,只是我們看不見
    opacity:0搏存;同上
    background:rgb(0 0 0 0.1)同上 background-color:rgba(0, 0, 0, 0.1)同上
    display:none瑰步;完全消失,不存在了璧眠。

代碼

一缩焦、

       <title>JS Bin</title>
    <style>  
      div{
        width: 100px;
        height: 100px;
        background-image: url("http://7xpvnv.com2.z0.glb.qiniucdn.com/f754722e-f087-4014-9711-15a36bb3ac0b");
        background-size:100px 200px;
        background-repeat: no-repeat;                
      }
      div:hover{
       background-position: 0px -100px;
       }
      </style>
       <div>                   
       </div> 

二、

    <title>JS Bin</title>
    <style>  
     @font-face {
      font-family: 'komo';  /* project id 241314 */
      src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot');
      src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.woff') format('woff'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.svg#iconfont') format('svg');
        }
     div{
       font-family: komo;
       font-size: 100px;
       font-style: normal;
     }
      div:hover{
        color: red;
      }          
  </style>
       <div class="komo">
               
       </div>

**嚴禁轉載责静,違者必究袁滥!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市泰演,隨后出現(xiàn)的幾起案子呻拌,更是在濱河造成了極大的恐慌,老刑警劉巖睦焕,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藐握,死亡現(xiàn)場離奇詭異,居然都是意外死亡垃喊,警方通過查閱死者的電腦和手機猾普,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來本谜,“玉大人初家,你說我怎么就攤上這事。” “怎么了溜在?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵陌知,是天一觀的道長。 經(jīng)常有香客問我掖肋,道長仆葡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任志笼,我火速辦了婚禮沿盅,結果婚禮上,老公的妹妹穿的比我還像新娘纫溃。我一直安慰自己腰涧,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布紊浩。 她就那樣靜靜地躺著窖铡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪郎楼。 梳的紋絲不亂的頭發(fā)上万伤,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音呜袁,去河邊找鬼敌买。 笑死,一個胖子當著我的面吹牛阶界,可吹牛的內容都是我干的虹钮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼膘融,長吁一口氣:“原來是場噩夢啊……” “哼芙粱!你這毒婦竟也來了?” 一聲冷哼從身側響起氧映,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤春畔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后岛都,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體律姨,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年臼疫,在試婚紗的時候發(fā)現(xiàn)自己被綠了择份。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡烫堤,死狀恐怖荣赶,靈堂內的尸體忽然破棺而出凤价,到底是詐尸還是另有隱情,我是刑警寧澤拔创,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布利诺,位于F島的核電站,受9級特大地震影響剩燥,放射性物質發(fā)生泄漏立轧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一躏吊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧帐萎,春花似錦比伏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至澈段,卻和暖如春悠菜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背败富。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工悔醋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人兽叮。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓芬骄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鹦聪。 傳聞我的和親對象是個殘疾皇子账阻,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內容

  • text-align: center的作用是什么,作用在什么元素上泽本?能讓什么元素水平居中 1淘太、當作用于塊級元素時,...
    我要認真學前端閱讀 630評論 0 1
  • 1. text-align: center的作用是什么规丽,作用在什么元素上蒲牧?能讓什么元素水平居中? text-ali...
    madpluto閱讀 246評論 0 0
  • 一嘁捷,text-align: center的作用是什么造成,作用在什么元素上?能讓什么元素水平居中 作用在塊級元素上面雄嚣,...
    DeeJay_Y閱讀 250評論 0 0
  • 1.text-align: center的作用是什么晒屎,作用在什么元素上喘蟆?能讓什么元素水平居中 使文本水平對齊,針對...
    molly的紅草帽閱讀 246評論 0 0
  • 《不輸在家庭教育上》 作者:主編:石宣 20170921徐海波讀《不輸在家庭教育上》分享(上海鼓鲁,第399天) 《你...
    覺之燈閱讀 153評論 0 0