久久精品香蕉视频,av 日韩人妻黑人综合无码,黑森林福利视频导航

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

我們在Web前端網頁的開發與設計過程中，布局是非常重要的一部分。布局用來確定頁面上不同組件和元素的尺寸和位置。本章我們給大家介紹的是一種css3布局模型：彈性盒模型（flex box），讓大家了解在css3中什么是彈性盒子，以及彈性盒子中display屬性的flex與box屬性值的區別和用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一：什么是彈性盒子
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。可以用簡單的方式滿足很多常見的復雜的布局需求。它的優勢在于開發人員只是聲明布局應該具有的行為，而不需要給出具體的實現方式。瀏覽器會負責完成實際的布局。該布局模型在主流瀏覽器中都得到了支持。

二：CSS3 彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。

三：display:box 與 display:flex的區別和用法

1. display:box 主要是控制父容器里面子元素的排列方式、排列順序、垂直（水平）對齊方式

display:box是2009年之前的語法，已經過時，使用是需要加上對應前綴的。

所以兼容性的代碼，大致如下

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

舉個例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>彈性盒子--display: box;</title>
		<style>
			.box {
				width: 330px;
				height: 400px;
				border: 1px #000 solid;
				margin: 0 auto;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -o-box;
				display: box;
				}
				
				.box p {
				width: 100px;
				height: 20px;
				background: #000;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

效果圖：

給父元素聲明一個display:box伸縮盒屬性后，就代表是把整個盒子里的塊元素都變成了內聯元素，然后這個父元素里面的子元素就可以自由分配空間了，而不會每個塊元素各占一行，而是協商共同排在一行上面。如上面例子中div里面的3個p標簽會在一行展示，而不是上下層級分配。

二：display:flex 主要讓子容器針對父容器的寬度按一定規則進行劃分

display:flex;是2011年之后出現的，也將是以后標準的語法，大部分新版瀏覽器基本都不用使用前綴了，目前應該只有蘋果瀏覽器需要帶webkit前綴，其他都可以正常顯示。

新版本設置伸縮盒的display屬性如下：
display:flex;將容器盒模型作為塊級彈性伸縮盒顯示(新版本)
display:inline-flex;將容器盒模型作為內聯級彈性伸縮盒顯示(新版本)

用法：

首先flex的使用需要有一個父容器，父容器中有幾個items.

父容器：container

屬性：

　　 display:flex;/*flex塊級，inline-flex:行內快*/

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/

　　 align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space-around*/　　

　　 flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/

　　 flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/

/*flex-flow是flex-direction、flex-wrap的縮寫*/

舉個例子：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>彈性盒子--display:flex;</title>
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex塊級，inline-flex:行內快*/
       justify-content:space-around;
       align-items:stretch;
       flex-direction: row;
       flex-wrap:wrap;
       /*flex-flow是flex-direction、flex-wrap的縮寫*/
    }
    .box{
    　　width:200px;
     　 height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div>
　　　　   <div>這是中間的box1</div>
        　<div>這是中間的box2</div>
　　　</div>
 </body>
</html>

效果圖：

注意，設為Flex布局以后，子元素的 float 、 clear 和 vertical-align 屬性將失效。

以上就是CSS3 什么是彈性盒子？display屬性中flex與box屬性值的區別和用法的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

CSS3 什么是彈性盒子？display屬性中flex與box屬性值的區別與用法

本類教程下載

系統下載排行