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

xiangchaobin 發布于2019-04-23 13:07 / 2037人閱讀

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

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

前言

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


div:nth-child(1) 

div:nth-of-type(1)

.div:not([abc])

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

常用標簽的使用

邊界圓角




    
    邊界圓角

背景樣式




    
    背景樣式

精靈圖




    
    精靈圖

盒模型布局




    
    盒模型布局細節

云服務器 GPU云服務器建站精靈按鍵精靈游戲精靈網絡還原精靈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1458.html

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

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

番茄西紅柿 2019-04-23 13:08 評論0 收藏0
盒模型的一些碎碎念

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

王偉廷 2019-08-29 16:27 評論0 收藏0
盒模型一二三（一）：盒世界，知幾何

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

tuantuan 2019-08-28 18:15 評論0 收藏0
CSS2-盒模型、背景圖片

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

yuanzhanghu 2019-08-29 15:33 評論0 收藏0