整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          bootstrap基礎快速入門-4 排版相關基本元素

          bootstrap基礎快速入門-4 排版相關基本元素

          學生就可以看懂的bootstrap基礎實戰系列,pre標簽里是筆記總結,動手實際操作一下會加強理解。有疑問留言交流哦。

          bootstrap是進階html5很基礎常用的前端框架,可以做自適應漂亮的界面,再堅持一下,前端知識的大門就會打開了。

          簡介

          在HTML中,有一個很重要的理論:塊元素和行內元素。在CSS中極其重要的一個理論——CSS盒子模型。 在“CSS盒子模型”理論中,頁面中的所有元素都可以看成一個盒子,并且占據著一定的頁面空間。

          一個頁面由很多盒子組成,這些盒子之間會互相影響,因此掌握盒子模型需要從兩個方面來理解:一是理解單獨一個盒子的內部結構(往往是padding),二是理解多個盒子之間的相互關系(往往是margin)。

          2 盒子模型概念

          盒模型指的是網頁元素的結構。當指定一個元素的寬度或高度時,便設置了元素內容的尺寸,可以把每個元素都看成一個盒子,盒子模型是由4個屬性組成,號稱“盒尺寸四大家族”:

          • content(內容區),可以是文本或圖片 —— 變化多端
          • padding(內邊距),用于定義內容與邊框之間的距離 —— 溫和向內
          • margin(外邊距),用于定義當前元素與其它元素之間的距離 —— 激進對外
          • border(邊框),用于定義元素的邊框 —— 功勛卓越

          此外,在盒子模型中,還有寬度(width)和高度(height)兩大輔助性屬性。記住,所有的元素都可以看成一個盒子 。如下圖所示:

          2.1 內容區

          內容區是CSS盒子模型的中心,它呈現了盒子的主要信息內容,這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分,其他3個部分都是可選的。 內容區有3個屬性:width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點,width和height這兩個屬性是針對內容區content而言的,并不包括padding部分。 當內容過多,超出width和height時,可以使用overflow屬性來指定溢出處理方式。

          2.2 內邊距

          內邊距,指的是內容區和邊框之間的空間,可以看成是內容區的背景區域。padding屬性接受長度值或百分比值,但不允許使用負值。 關于內邊距的屬性有5種:padding-top、padding-bottom、padding-left、padding-right,以及綜合了以上4個方向的簡寫內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框之間的距離。

          2.2.1 元素的尺寸

          因為CSS中默認的box-sizing是content-box,所以使用padding會增加元素的尺寸。

          .box {
             width: 80px;   
              padding: 20px;
          }

          如果不考慮其他CSS干擾,此時.box元素所占據的寬度就應該是120像素(80px+20px×2),這其實是不符合現實世界的認知的,人們總是習慣把代碼世界和現實世界做映射,因此,新人難免會在padding的尺寸問題上踩到點坑。這也導致很多人樂此不疲地設置box-sizing 為border-box,甚至全局設置。

          2.2.2 標簽元素內置的padding

          • ol/ul列表內置padding-left,但是單位是px不是em。
          • 很多表單元素都內置padding。例如:所有瀏覽器<input>/<textarea>輸入框內置padding;所有瀏覽器<button>按鈕內置padding;所有瀏覽器<radio>/<chexkbox>單復選框無內置padding。

          2.3 外邊距

          外邊距,指的是兩個盒子之間的距離,它可能是子元素與父元素之間的距離,也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起,是CSS布局的一個重要手段。 外邊距的屬性也有5種:margin-top、margin-bottom、margin-left、margin-right,以及綜合了以上4個方向的簡寫外邊距屬性margin。 同時,CSS允許給外邊距屬性指定負數值,當外邊距為負值時,整個盒子將向指定負值的相反方向移動,以此產生盒子的重疊效果,這就是傳說中的“負margin技術”。

          2.3.1 margin與元素尺寸

          • 元素的內部尺寸

          只有元素是“充分利用可用空間”狀態的時候,margin才可以改變元素的可視尺寸。比方說,如下CSS:

          .header {
           width: 160px; 
            margin: 0 -5px;
          }

          此時元素寬度還是160像素,尺寸無變化。因為只要寬度設定,margin就無法改變元素尺寸,這和padding是不一樣的。

          但是,如果是下面這樣的HTML和CSS:

          <div class="header">
             <div class="son">
          </div></div>
          .header { width: 160px; }
          .menu { margin: 0 -5px; }

          則.menu元素的寬度就是165像素了,尺寸通過負值設置變大了,因為此時的寬度表現是“充分利用可用空間”。

          • 元素的外部尺寸

          只要元素具有塊狀特性,無論有沒有設置width/height,無論是水平方向還是垂直方向,即使發生了margin合并,margin對外部尺寸都著著實實發生了影響。

          2.3.2 margin合并

          塊級元素的上外邊距(margin-top)與下外邊距(margin-bottom)有時會合并為單個外邊距,這樣的現象稱為“margin合并”。

          • margin合并一般出現在以下3種場景:(1)相鄰兄弟元素margin合并。這是margin合并中最常見、最基本的。(2)父級和第一個/最后一個子元素。(3)空塊級元素的margin合并。
          • margin合并的計算規則把margin合并的計算規則總結為:“正正取大值”, “正負值相加” ,“負負最負值”。
          • margin合并的意義對于兄弟元素的margin合并其作用和em類似,都是讓圖文信息的排版更加舒服自然。父子margin合并的意義在于:在頁面中任何地方嵌套或直接放入任何裸<div>,都不會影響原來的塊狀布局。<div>是網頁布局中非常常用的一個元素,其語義是沒有語義,也就是不代表任何特定類型的內容,是一個通用型的具有流體特性的容器,可以用來分組或分隔。由于其作用就是分組的,因此,從行為表現上來看,一個純粹的<div>元素是不能夠也不可以影響原先的布局的。自身margin合并的意義在于可以避免不小心遺落或者生成的空標簽影響排版和布局。

          2.3.3 margin:auto

          margin:auto的填充規則如下。 (1)如果一側定值,一側auto,則auto為剩余空間大小。 (2)如果兩側均是auto,則平分剩余空間。

          2.4 邊框

          在CSS盒子模型中,邊框與我們之前學過的邊框是一樣的。 邊框屬性有border-width、border-style、border-color,以及綜合了3類屬性的簡寫邊框屬性border。

          border屬性總是能解決很多棘手的問題,在在圖形構建、體驗優化以及網頁布局這塊幾大放異彩,,同時保證其良好的兼容性和穩定性。下面我們一起看看border都有哪些精彩的特性表現。

          2.4.1 為什么border-width不支持百分比值

          我們通過比對筆記本、手機發現,雖然兩臺設備的尺寸差異很大,但是邊框的大小相比而言就可以忽略不計了。邊框是不會因為設備大就按比例變大的。因此,如果支持百分比值,是不是就意味著設備大了邊框也跟著變大?有一張圖片,大片區域都是白色的,在白底背景上和文字混在一起,就會有一片奇怪的空白區域,會讓人產生沒對齊的假象,此時,我們給這張圖片套個1px灰色邊框,區域就明顯了,對吧!設計的初衷就是為了這么點兒事,沒有需要使用百分比值的場景。于是,綜合這兩點,造成了border-width不支持百分比值。

          2.4.2 border與圖形構建

          border屬性可以輕松實現兼容性非常好的三角圖形效果,為什么可以呢?其底層原因受inset/outset 等看上去沒有實用價值的border-style屬性影響,邊框3D效果在互聯網早期其實還是挺潮的,那個時候人們喜歡有質感的東西,為了呈現逼真的3D效果,自然在邊框轉角的地方一定要等分平滑處理,然后不同的方向賦予不同的顏色。然后,這一轉角規則也被solid類型的邊框給沿用了。因此,我們就不難理解下面的4色邊框的表現了:

          div {
             width: 10px; height: 10px;    
              border: 10px solid;    
              border-color: #f30 #00f #396 #0f0;
          }

          運行一下上面的代碼看一下效果吧!

          2.4.3 border與透明邊框技巧

          這是提高用戶體驗的一個小技巧,尤其在移動端,我們的操作工具一般就是我們的手指,但是,我們的手指粗細可以媲美胡蘿卜,而屏幕尺寸就那么點兒,如果我們正在走路,則一些精致的圖標和按鈕很容易就點不中甚至誤點。

          穩妥的方法是外部再嵌套一層標簽,專門控制點擊區域大小。如果對代碼要求較高,則可以使用padding或者透明border增加元素的點擊區域大小。

          3 總結

          現實生活中看到的盒子,有正方形、長方形、圓柱形等,依據形狀特點,可包裹不同物件。CSS中的盒子雖然沒有那么多的形狀,但在視覺呈現上不同類型的盒子還是會有很大的不同,有的盒子要占據一行,有的盒子不能定義外邊距、寬度和高度,有的盒子寬度和高度能自適應。CSS中用display指定盒類型(即框類型),常用的有 block(塊)、inline(行內)、inline-block(行內塊)、table(表格),以及CSS3新增的flexbox(伸縮盒)。 HTML 元素只有兩種默認的盒類型,即塊級元素(block-level element)和行內元素(inline-level element)。其中行內元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內元素和塊級元素。

          由此可見,需要掌握的內容太多,要想學會所有布局相關的技術不太現實。高級的布局話題基于文檔流和盒模型等概念,這些是決定網頁元素的大小和位置的基本規則。因此理解和掌握如何設置元素的大小和位置至關重要。

          4 最后的最后

          為初學者提供學習指南,為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】,一起學習和交流吧!

          argin屬性

          margin屬性用于設置頁面中元素和元素之間的距離,即定義元素周圍的空間范圍,是頁面排版中一個比較重要的概念。margin屬性的語法格式如下:

          margin:auto | length
          

          其中,auto表示根據內容自動調整,length表示浮點數字和單位標識符組成的長度值或百分數,百分數是基于父對象的高度。對于內聯元素來說,左右外延邊距可以是負數值。

          margin屬性包含4個子屬性,分別用于控制元素四邊,包括margin-top、margin-left、margin-right、margin-bottom。

          提示:

          在為margin屬性設置值時,如果提供4個參數值,將按順時針順序作用于上、右、下、左4個邊;如果值提供一個參數值,將作用于4邊;如果2個參數值作用于,第一個作用于上下,第二個作用于左右;3個參數值時作用于,第一個值作用于上,第二個作用于左右,第三個值作用于下。

          border屬性

          border屬性是內邊距和外邊距的分界線,可以分離不同的HTML元素,border的外邊距是元素的最外圍,在網頁設計中,如果計算元素的款和高,則需要把border屬性計算在內。border屬性的語法格式如下:

           border:border-style | border-color | border-width;
          

          border邊框樣式值表

          提示

          border屬性不僅可以用于設置圖像的邊框,還可以為其他元素設置邊框,如文字和Div等。

          padding屬性

          在CSS中,可以通過設置padding屬性定位內容于邊框之間的距離,即內邊距。

          padding屬性的語法格式如下:

           padding:length
          

          padding屬性可以是具體的長度,也可以是相對于上級元素的百分比,但不可以使用負值。

          padding屬性包含4個子屬性,分別用于控制元素四邊,包括padding-top、padding-left、padding-right、padding-bottom。分別可以為盒子定義上、右、下、左和個邊值。

          Content屬性

          在盒子模型中,中間部分content(內部)主要顯示內容,這部分野是整個盒模型的主要部分,其他的如對margin、border、padding所做的操作都對content部分所做的修飾,對于內容部分的操作,也就是對文字,圖像等頁面元素的操作。


          主站蜘蛛池模板: 国产日韩一区二区三免费高清 | 一区二区三区四区精品视频| 国产一区麻豆剧传媒果冻精品| 国产精品高清一区二区人妖| 中文字幕日韩一区二区三区不| 亚洲日本va一区二区三区| 国产成人精品无码一区二区三区 | 日韩久久精品一区二区三区| 久久er99热精品一区二区| 国产主播一区二区| 不卡无码人妻一区三区音频| 精品视频一区二区观看| 日本高清一区二区三区| 亚洲熟妇无码一区二区三区 | 国产精品被窝福利一区 | 久久久久人妻一区精品果冻| 乱码人妻一区二区三区| 国产精品视频分类一区| 老熟女高潮一区二区三区| 精品人妻中文av一区二区三区| 午夜福利一区二区三区在线观看 | 久久精品国产一区二区三区| www.亚洲一区| 一区二区三区高清在线| 无码精品人妻一区二区三区AV| 波多野结衣一区二区免费视频| 国产视频一区二区| 一区二区三区视频网站| 国产在线aaa片一区二区99 | 欧美激情国产精品视频一区二区| 亚洲熟妇AV一区二区三区宅男| 毛片一区二区三区无码| 国产亚洲综合一区二区三区 | 久久久久人妻精品一区二区三区 | 亚洲一区在线观看视频| 久久精品国产一区二区三区肥胖| 无码囯产精品一区二区免费| 亚洲精品色播一区二区| 东京热无码av一区二区| 亚洲视频一区在线观看| 精品国产不卡一区二区三区 |