成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端（四）之精靈圖與盒模型布局

xiangchaobin / 2107人閱讀

摘要：前端之常用標(biāo)簽的使用邊界圓角精靈圖以及盒模型的布局前端之常用標(biāo)簽的使用邊界圓角精靈圖以及盒模型的布局前言前言上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器后代子代選擇器兄弟相鄰選擇器及交集選擇器標(biāo)簽的四大偽類選擇器，，其中和也可以用于

前端之常用標(biāo)簽的使用、邊界圓角、精靈圖以及盒模型的布局

前言

上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、后代（子代）選擇器、兄弟（相鄰選擇器）及交集選擇器；a 標(biāo)簽的四大偽類選擇器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也可以用于其他標(biāo)簽，索引選擇器包括三種


div:nth-child(1) 

div:nth-of-type(1)

.div:not([abc])

最后介紹了最最重要的盒模型，盒模型由四部分組成由內(nèi)到外分別是：content+padding+border+margin，其中 content+padding+border 參與盒子顯示，margin 參與盒子布局。

常用標(biāo)簽的使用




    
    常用標(biāo)簽的使用

    
    
    
    
    
    
    

    


    
    

    

    前往00頁面
    
    

    
    
        
  • 列表項
    • 
        
  • 列表項
    • 
        
  • 列表項
    • 
        
  • 列表項
    • 
        
  • 列表項
    • 
    


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    
    
123

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    Top
    123
    前往錨點

邊界圓角




    
    邊界圓角

背景樣式




    
    背景樣式

精靈圖




    
    精靈圖

盒模型布局




    
    盒模型布局細節(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1458.html

相關(guān)文章

  • 前端（三）之選擇器高級與盒模型

    摘要：內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。值描述內(nèi)聯(lián)塊級內(nèi)聯(lián)塊前端之 CSS 選擇器高級與盒模型 前言 先回顧昨日的內(nèi)容，昨天講了 w3c 的整個架構(gòu)，由結(jié)構(gòu)層>布局層>內(nèi)容層三部分組成，了解了 CSS 的三種引入方式，行間式最簡單直接；內(nèi)聯(lián)式解耦合，可讀性強；外聯(lián)式適合團隊高效開發(fā)，耦合性低，復(fù)用性強，了解了三種選擇器，并且 id 選擇器>...

    番茄西紅柿 評論0 收藏0

  • 盒模型的一些碎碎念

    摘要：盒模型的簡介本文簡單的總結(jié)了一些基本概念，知識點以及細節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。 1. 盒模型的簡介 本文簡單的總結(jié)了一些基本概念，知識點以及細節(jié)問題 作為前端人員，盒模型是最基礎(chǔ)的知識點，在排版與布局時不可避免與盒模型打交道。 在我們編寫HTML時，網(wǎng)頁上的內(nèi)容幾乎都是被包在一個個元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div...

    王偉廷 評論0 收藏0

  • 盒模型一二三（一）：盒世界，知幾何

    摘要：比如表示上下左右都是像素塊元素居中的樣式，表示上下表示左右而表示上，左右，下。瀏覽器對塊元素的默認樣式問題如下塊元素的盒模型樣式復(fù)合屬性寫法如果我們想給添加樣式，可以這樣寫為了精簡代碼，也可以采用如下的復(fù)合屬性寫法 學(xué)習(xí) HTML 和 CSS 將近一個月，我以為：層級（嵌套）關(guān)系和盒模型（Box Model）是理解和學(xué)習(xí)這兩門語言的基石，正如圖層概念是 Photoshop 的基礎(chǔ)。因此...

    tuantuan 評論0 收藏0

  • CSS2-盒模型、背景圖片

    摘要：合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。雪碧圖的使用背景圖與元素的原點重合。白色框是元素，綠色框是背景圖片。 盒模型屬性 margin外邊距（top,right,bottom,left）border邊框(top,right,bottom,left)padding內(nèi)邊距(top,right,bottom,left)content內(nèi)容區(qū)(width,height)ma...

    yuanzhanghu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<