建站
咨詢
售后
建站咨詢
新聞中心
CSS是一種強(qiáng)大的樣式表語(yǔ)言，它可以用來(lái)控制HTML元素的位置、大小、顏色等樣式，在HTML中，我們可以通過(guò)內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表或者直接在HTML標(biāo)簽中使用style屬性來(lái)設(shè)置元素的樣式。
控制div位置的基本方法有兩種：絕對(duì)定位和相對(duì)定位，絕對(duì)定位是相對(duì)于最近的已定位祖先元素（而不是相對(duì)于視口）進(jìn)行定位的，如果沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊，相對(duì)定位是相對(duì)于其正常位置進(jìn)行定位的。
一、絕對(duì)定位
絕對(duì)定位的元素會(huì)脫離正常的文檔流，不占據(jù)空間，我們可以使用top、right、bottom和left屬性來(lái)設(shè)置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位。
我們可以創(chuàng)建一個(gè)絕對(duì)定位的div，使其距離頂部10px，距離右側(cè)20px，距離底部30px，距離左側(cè)40px：
This is a div positioned absolutely.
二、相對(duì)定位
相對(duì)定位的元素會(huì)相對(duì)于其正常位置進(jìn)行定位，我們可以使用top、right、bottom和left屬性來(lái)設(shè)置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位。
我們可以創(chuàng)建一個(gè)相對(duì)定位的div，使其距離頂部5px，距離右側(cè)10px，距離底部15px，距離左側(cè)20px：
This is a div positioned relatively.
三、固定定位
固定定位的元素會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位，我們可以使用top、right、bottom和left屬性來(lái)設(shè)置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位，如果元素的父元素是靜態(tài)定位的，那么這個(gè)元素也是靜態(tài)定位的；如果元素的父元素是相對(duì)定位的，那么這個(gè)元素也是相對(duì)定位的；如果元素的父元素是絕對(duì)定位的，那么這個(gè)元素也是絕對(duì)定位的。
我們可以創(chuàng)建一個(gè)固定定位的div，使其距離頂部10px，距離右側(cè)20px，距離底部30px，距離左側(cè)40px：
This is a div positioned fixed.
四、CSS中的flex布局
Flex布局是CSS3新增的一種布局模式，它可以使父元素成為一個(gè)flex容器，然后通過(guò)flex子項(xiàng)的屬性來(lái)控制子項(xiàng)的位置和大小，我們可以使用justify-content、align-items和align-self屬性來(lái)設(shè)置子項(xiàng)的對(duì)齊方式。
我們可以創(chuàng)建一個(gè)flex布局的div，使其內(nèi)部的div水平排列并居中對(duì)齊：
This is a div in a flex container.
五、CSS中的grid布局
Grid布局是CSS3新增的一種布局模式，它可以使父元素成為一個(gè)grid容器，然后通過(guò)grid子項(xiàng)的屬性來(lái)控制子項(xiàng)的位置和大小，我們可以使用grid-template-columns和grid-template-rows屬性來(lái)定義子項(xiàng)的列數(shù)和行數(shù)。
我們可以創(chuàng)建一個(gè)grid布局的div，使其內(nèi)部的div按照2列2行排列：
This is a div in a grid container.This is another div in a grid container.
本文標(biāo)題：怎么控制div的位置
文章源于：http://www.dlmjj.cn/article/cosphdi.html
