2023-03-01 05:50
33次浏览
一、网页布局方法
1、网页布局方法布局可以理解为排版。我们熟悉的文本编辑类工具都有自己的排版方式
Word、nodpad等网页的布局是指名为浏览器的工具如何排版网页上的元素。
2、网页布局/排版三种方法
1、标准流程
2、浮动流
3、定位流程。
“第二，标准流程”
标准流(也称为文档流/常规流)的排版方法意味着，在元素排版过程中，元素会自动从左到右从上到下流动。
1.浏览器的默认排版方法是标准流排版方法
2.在CSS中，元素分为三类：块级内嵌块级
3.标准流程有两种排版方法。一个是垂直排版，另一个是水平排版垂直排版。如果图元是块级图元，则为水平排版。
如果元素是内嵌元素或内嵌块级别元素，则会进行水平排版
！DOCTYPE html
Html lang='en '
头(电影)
meta charset=' utf-8 '
标题/标题
样式类型='文本/CSS '
Div、h1、p {
Border: 1px solid red
}
粉丝、风暴、b {
Border: 1px solid # 000
}
/style
/head
菩提
Div我是div/div
H1我是title/h1
p我是第/p段
Spanspan/span
Strong我强调/strong
b我是粗体/b
/body
/html 3，浮动流
1、浮流是半分离标准流的排版方法。文档流是什么？什么是半隔离文档流？
1.1什么是从文档流分离？
1、在文档流中，浮动元素意味着
1.不再区分行内、块级别或行内块级别，您可以水平排版任何级别的元素。
2.可以设置任何级别的元素的宽度和高度。综上所述，浮动流中的元素与标准流中的内嵌块级别元素非常相似。
！DOCTYPE html
Html
头(电影)
标题/标题
meta charset=' utf-8 '
风格(音乐)
* {
margin : 0；
padding : 0；
}
/*
不再区分换行符、块级别和行内块级别，您可以水平排版任何级别的元素。span和p都显示在一行中
可以为任何级别的元素设置宽度高度。内嵌元素(如span)也可以设置宽度高度
*/
.box1 {
Width: 100px
海特： 100px
background-color : red；
Float :左侧；
}
.box2 {
Width: 100px
海特： 100px
background-color : blue；
Float :左侧；
}
/style
/head
菩提
span class=' box 1 '我是span/span
p class=' box 2 '我是段/p
/body
/html2，浮动元素脱字符文档流表示
1.元素浮动时，看起来从标准流中删除了。这是浮点元素的逃票
2.如果前面的元素是浮动的，后面的元素不是浮动的，则垂直方向的元素将自动填充和浮动
元素重新归位后就会覆盖该元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素脱标</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
注意点：
1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
2、一旦使用了浮动流，则margin:0 auto;失效
1.2、 那什么又是半脱离文档流？
脱离分为：半脱离与完全脱离， 其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样
而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，
比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，
打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，
他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
（1）同一个方向上谁先浮动，谁在前面
（2）不同方向上左浮动找左浮动，右浮动找右浮动
浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
同一个方向上谁先浮动，谁在前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: left;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: left;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
不同方向上左浮动找左浮动，右浮动找右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素排序规则</title>
<style>
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
.box3 {
float: right;
width: 250px;
height: 250px;
background-color: yellow;
}
.box4 {
float: right;
width: 300px;
height: 300px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
1.3、 浮动元素贴靠问题
当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示 当父元素的宽度不足够显示所有元素时，
浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素 直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素贴靠问题</title>
<style>
.father {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box1 {
float: left;
width: 50px;
height: 300px;
background-color: rebeccapurple;
}
.box2 {
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3 {
float: left;
width: 250px;
/*width: 300px;*/
/*width: 310px;*/
/*width: 400px;*/
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
四、定位流
1、相对定位就是相对于自己以前在标准流中的位置来移动
格式：
position：relative
需要配合以下四个属性一起使用
top:20px;
left:30px;
right:40px;
bottom:50px; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.1、 相对定位的注意点
1 在相对定位中同一个方向上的定位属性只能使用一个 top/bottom 只能用一个 left/right 只能用一个
2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding 等属性时会影响到标准流的布局，
即，给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: relative;
top: 20px;
left: 20px;
/*相对于该标签原来的位置进行偏移*/
margin-top: 50px;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1.2 相对对位的应用场景
1.用于对元素进行微调
2.配合后面学习的绝对定位来使用
绝对定位就是相对于body或者某个定位流中的祖先元素来定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
position: absolute;
/*left: 0;*/
/*top: 10px;*/
background-color: green;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、固定定位
1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似） 背景的关联方式background-attachment: fixed;
可以让图片不随着滚动条的滚动而滚动 而固定定位可以让某一个元素不随着滚动条的滚动而滚动
2、注意点
1.固定定位的元素是脱离标准流的，不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内、块级、行内块级 3、E6不支持固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
width: 600px;
height: 1000px;
border: 1px solid #000;
background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-206405-1306758469.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
border: 1px solid #000;
border-radius: 50%;
text-align: center;
line-height: 100px;
background-color: green;
position: fixed;
right: 0;
bottom: 0;
}
.box3 {
background-color: blue;
}
.box4 {
background-color: yellow;
height: 2000px;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到顶部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
3、静态定位
1.什么是静态定位?
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流 静态定位应用场景:
2.一般用于配合JS清除定位属性z-index属性
3.z-index属性：用于指定定位的元素的覆盖关系 定位元素的覆盖关系:
默认情况下定位的元素一定会盖住没有定位的元素
默认情况下写在后面的定位元素会盖住前面的定位元素
默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
4.注意点：从父现象 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/*div {*/
/*width: 100px;*/
/*height: 100px;*/
/*}*/
/*.box1 {*/
/*background-color: red;*/
/*position: relative;*/
/*top: 0px;*/
/*left: 0px;*/
/*!*z-index: 3;*!*/
/*}*/
/*.box2 {*/
/*background-color: green;*/
/*position: absolute;*/
/*top: 50px;*/
/*left: 50px;*/
/*!*z-index: 2;*!*/
/*}*/
/*.box3 {*/
/*background-color: blue;*/
/*position: fixed;*/
/*left: 100px;*/
/*top: 100px;*/
/*!*z-index: 1;*!*/
/*}*/
.father1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 5;
}
.father2 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
z-index: 4;
}
.son1 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
.son2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 250px;
/*top: 250px;*/
z-index: 2;
top: 50px;
}
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>-->
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>
</body>
</html>
最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端"等3秒后即可获取地址，
里面概括应用网站开发，css，html，JavaScript，jQuery，Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿
1.文章《【css怎么将段落布局】前端基础知识-CSS布局方法和文档流，对初学者特别有用》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。
2.文章《【css怎么将段落布局】前端基础知识-CSS布局方法和文档流，对初学者特别有用》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
相关推荐
- . 现代买票为什么带上携程保险
- . 潮阳怎么去广州南站
- . 湖南马拉河怎么样
- . 烧纸为什么到三岔路口
- . 百色为什么这么热
- . 神州租车怎么样
- . 芜湖方特哪个适合儿童
- . 护肤品保养液是什么类目
- . 早晚的护肤保养有哪些项目
- . 女孩护肤品怎么保养的最好