首頁 > 文章 > web前端 > CSS佈局

CSS佈局

WBOY原創: 2016-08-18 08:57:571575瀏覽

在講解CSS佈局之前，我們需要事先知道一些知識，在CSS中，html中的標籤元素大體被分為三種不同的類型：

塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

、

...

、

、、

、

、

常用的內聯元素有：

、、
、、、、、、、、

常用的內聯塊狀元素有：

、

元素分類--塊級元素

什麼是塊級元素？在html中
、
、

、
、
和
就是區塊級元素。設定display:block就是將元素顯示為區塊級元素。下列程式碼就是將內聯元素a轉換為塊狀元素，使a元素具有塊狀元素特徵。
a{display:block;}
塊級元素特徵：

1、每個區塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

元素分類--內聯元素

在html中，、、、和就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以透過程式碼display:inline將元素設定為內聯元素。下列程式碼就是將塊狀元素div轉換為內聯元素，使 div 元素具有內聯元素特徵。
 div{
 display:inline;
 }

......

<div>我要变成内联元素</div>
內聯元素特徵：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它所包含的文字或圖片的寬度，不可改變。

元素分類--內聯塊狀元素

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，程式碼display:inline-block就是將元素設定為內聯塊狀元素。 (css2.1新增)，、標籤就是這種內嵌塊狀標籤。

inline-block 元素特徵：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

盒模型

css佈局模型

清楚了CSS 盒模型的基本概念、盒模型類型，我們就可以深入探討網頁版面的基本模型了。佈局模型與盒子模型一樣都是 CSS 最基本、最核心的概念。但佈局模型是建立在盒子模型基礎之上，又不同於我們常說的 CSS 佈局樣式或 CSS 佈局模板。如果說佈局模型是本，那麼 CSS 佈局模板就是末了，是外在的表現。
CSS包含3種基本的佈局模型，以英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種版面模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

流动模型

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

浮动模型
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
 width:200px;
 height:200px;
 border:2px red solid;
 float:left;
}
2beeb2847e934999dc8b5f8f0e43d3704d765cbf8ce485a2a526f75a4eba1cce
90c1e677996bfc13f574f9f3045f90494d765cbf8ce485a2a526f75a4eba1cce
层模型--绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
 width:200px;
 height:200px;
 border:2px red solid;
 position:absolute;
 left:100px;
 top:50px;
}
2beeb2847e934999dc8b5f8f0e43d3704d765cbf8ce485a2a526f75a4eba1cce
层模型--相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
 width:200px;
 height:200px;
 border:2px red solid;
 position:relative;
 left:100px;
 top:50px;
}

2beeb2847e934999dc8b5f8f0e43d3704d765cbf8ce485a2a526f75a4eba1cce
层模型--固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
 width:200px;
 height:200px;
 border:2px red solid;
 position:fixed;
 left:100px;
 top:50px;
}
fed9cad356cec09afa3e2a7bd2513208文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。aea4995305aa2743a243ce011e9fcbb5
隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。
b04f026226cff5a2aa6e2a4016f5fa27
 40cdaec49a935fbbe7039cc0c07207d9进入课程请单击这里ef2198faed6b9ce9f38821054836d50e
4d765cbf8ce485a2a526f75a4eba1cce
css代码

3b21e6c8c45975c3ab5015aaf5f6e09a
.container a{
 position:absolute;
 width:200px;
 background:#ccc;
}
6d2d69a16dc4083b65da95a7bbc232fc

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS3---2D變換下一篇：CSS3---2D變換

看更多

CSS佈局

...

元素分類--塊級元素

、

元素分類--內聯元素

元素分類--內聯塊狀元素

盒模型

css佈局模型

流动模型

浮动模型

层模型--绝对定位

层模型--相对定位

层模型--固定定位

隐性改变display类型

相關文章