1.文檔流normal flow
-網(wǎng)頁(yè)是一個(gè)多層結(jié)構(gòu)
-通過(guò)CSS可以分別為每一層設(shè)置樣式
-用戶只能看到最頂層
-最底層：文檔流（我們所創(chuàng)建的元素默認(rèn)都是從文檔流中進(jìn)行排列）
<head>
<style>
.box1 {
background-color: blue;
}
/*它的父元素為body*/
.box2 {
width: 100px;
background-color: red;
}
span {
background-color: aqua;
}
</style>
</head>
<!--
元素有兩個(gè)狀態(tài)：在文檔流中/不在文檔流（現(xiàn)在只考慮前者）
-元素在文檔流（基巖）中有什么特點(diǎn)：（元素也可以脫離文檔流，不再區(qū)分塊和行內(nèi)）
-塊元素 div
--塊元素會(huì)在頁(yè)面中獨(dú)占一行
--默認(rèn)寬度時(shí)父元素的全部（即瀏覽器設(shè)置寬度為多少，背景就寬多少）
--默認(rèn)高度是子元素的總和
-行內(nèi)元素 span
--行內(nèi)元素不會(huì)只占一行，只占自身大小
--在頁(yè)面中自左向右排列(若一行容納不了，則會(huì)換行)
--默認(rèn)高度和寬度跟里面的元素有關(guān)
-->
<body>
<!--兩個(gè)塊元素-->
<div class="box1">
我是div1
</div>
<div class="box2">
我是div2
</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
2.盒子模型
<!--盒子模型(對(duì)元素進(jìn)行布局)
-CSS將頁(yè)面中的所有元素都設(shè)置了一個(gè)矩形的盒子
-將元素設(shè)置為矩形的盒子后，對(duì)頁(yè)面的布局就變成了將不同的盒子擺放到不同的位置
-每一個(gè)盒子都有一下幾個(gè)部分組成：
--內(nèi)容區(qū)（content）
--內(nèi)邊距（padding）
--邊框（border）
--外邊距（margin），決定盒子位置
-->
<head>
<style>
.box1 {
/*內(nèi)容區(qū)content，元素中的所有子元素和文本都在內(nèi)容去中
大小由width和height來(lái)設(shè)置*/
width: 100px;
height: 100px;
background-color: aqua;
/*邊框border，邊框?qū)儆诤凶舆吘? 設(shè)置邊框：
寬度 border-width
顏色 border-color
樣式 border-style
邊框的大小會(huì)影響到盒子大小（盒子內(nèi)容一直不變）
*/
border-width: 20px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1">
1234
</div>
</body>?
1.盒子模型-邊框
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: rgb(6, 106, 139);
/*邊框，下面三個(gè)元素缺一不可（border-width有默認(rèn)值，一般3px）*/
/*border-xxx-width,xxx可以為top right bottom left來(lái)指定某一個(gè)邊的寬度*/
border-width: 10px 20px 30px 40px;
/*邊框上右下左（順時(shí)針）寬度*/
/*指定邊框顏色，同樣可以分別制定四個(gè)邊框的顏色，也可以用border-xxx-color指定顏色*/
border-color: orange red yellow green;
/*指定邊框樣式，與上面類似。默認(rèn)值為none（無(wú)邊框）
solid 實(shí)線
dotted 點(diǎn)狀虛線
dashed 虛線
double 雙線*/
border-style: solid dotted dashed double;
}
.box2 {
width: 100px;
height: 100px;
background-color: rgb(6, 106, 139);
/*border簡(jiǎn)寫屬性,沒(méi)有順序要求
border-xxx xxx可以為top right bottom left單獨(dú)設(shè)置一邊的樣式*/
border: solid 10px orange;
/*單獨(dú)去掉一邊*/
border-bottom: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
2.盒子模型-內(nèi)邊距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: rgb(6, 106, 139);
border: solid 10px orange;
/*內(nèi)邊距padding
-內(nèi)容區(qū)和邊框之間的距離
-四個(gè)方向：padding-top/right/bottom/left
內(nèi)邊距的設(shè)置會(huì)影響到盒子大小，顏色默認(rèn)為內(nèi)容顏色
盒子可見(jiàn)框的大小由內(nèi)容區(qū)+內(nèi)邊距+邊框共同決定*/
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
/*padding的簡(jiǎn)寫,上右下左，跟前面的border一樣*/
padding: 10px 20px 30px 40px;
}
.inner {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
</div>
</div>
</body>
3.盒子模型-外邊距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
border: 10px red solid;
/*外邊距margin
不影響盒子可見(jiàn)框的大小
影響盒子的位置
共有四個(gè)方向的外邊距：
margin-top/right/bottom/left
*/
margin-top: 100px; /*盒子向下移動(dòng)*/
margin-left: 100px; /*盒子向右移動(dòng)*/
/*margin簡(jiǎn)寫，跟border一樣*/
margin: 100px,100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
4.盒子模型-水平方向的布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
/*width默認(rèn)為auto*/
width: 800px;
height: 200px;
border: 10px red solid;
}
/*元素水平方向的布局：
元素在其父元素中水平方向的位置有以下幾個(gè)屬性共同決定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right(一般不用，瀏覽器會(huì)自動(dòng)調(diào)整確保下面的等式成立)
要滿足以下等式：
上面的加起來(lái)=父元素內(nèi)容區(qū)的寬度
若不成立，則稱為過(guò)度約束，等式會(huì)自動(dòng)調(diào)整（一般調(diào)整margin-right）
水平居中：width:xxxpx;margin:0 auto;
*/
.inner {
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 100px;
margin-right: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
5.盒子模型-垂直方向的布局?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*元素垂直方向的布局*/
.outer {
width: 250px;
height: 400px;
background-color: #bfa;
/*默認(rèn)情況下父元素的高度被子元素?fù)伍_(kāi)
若設(shè)置具體值，則按具體值來(lái) */
}
/*子元素實(shí)在父元素的內(nèi)容區(qū)中排列的
若子元素大于父元素，則溢出
用overflow處理溢出的子元素
overflow:visible:默認(rèn)顯示
hidden：隱藏溢出部分
scroll:生成兩個(gè)滾動(dòng)條，通過(guò)滾動(dòng)條查看完整內(nèi)容
auto 根據(jù)需要生成滾動(dòng)條*/
.inner {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner">111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111111111111111
</div>
</div>
</body>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-845188.html
未完待續(xù)。。。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-845188.html
到了這里，關(guān)于尚硅谷html5+css3（3）布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開(kāi)發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開(kāi)發(fā)技術(shù)12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端開(kāi)發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機(jī)制——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
