前端css样式之---网页布局(待补后续)

网页布局

• 网页布局方式

  网页布局可以理解为排版, 可以用来排版的工具有很多, 比如world PPT, ps等众多软件

  而网页排版指的是我们想要展示的元素放到浏览器上使用一种特定的格式展现

网页布局/排版的方式有三种

• 标准流
• 浮动流
• 定位流

标准流

又称为文档流/普通流, 所谓文档流, 就是元素排版过程中, 元素会自动从左往右, 从上往下的流式排版

元素分类:

• 块级(独占一行)
• 行内(文本多大占用多大)
• 行内块级(可以调节占用位置)

排版方式

• 垂直排版: 元素时块级时, 使用垂直排版方式

  使用块级标签时垂直排版(包括行内块级)

• 水平排版: 元素时行内或行内块级时, 使用水平排版方式

  使用行内标签时水平排版

块级标签:
div:  

浮动流

什么是脱离文档流?

1. 浮动流元素脱离文档流意味着

   不再分行内, 块级, 行内块级, 不论是什么级的元素都可以水平排版

   无论是什么级的元素都可以设置宽高

2. 总结: 浮动流中的元素和标准流中的块级元素很像

代码:

HTML代码:
<div class="box1"></div>
<div class="box2"></div>


css代码: 
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
}
/* 当第一个浮动起来之后, 第二个会自动的补全上去, 这是一种塌陷, 后面会讲到
/* 如果两个都浮动起来, 那么就会跟行内标签一样一次排列, 不够会自动往后换行排列(属于脱标文档)

注意:

浮动流只有一种排版方式, 就是水平排版, 只有左右对齐, 没有上下居中对齐

一旦使用了浮动流, 外边距margin则不能使用

将两个块级元素放到一行, 两种方法
1. 修改display属性值为 inline-block
2. 使用浮动流的方式
(1)
HTML代码;
<div class="box1"></div>
<div class="box2"></div>


css代码
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    display: inline-block;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    display: inline-block;
}

(2)
HTML代码
<div class="box1"></div>
<div class="box2"></div>


css代码
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}

什么是脱离文档流?

脱离文档流分为

• 完全脱离: 元素在前所占用的空间会被回收, 空间会分配给需要的标签使用
• 半脱离: 同一方向上谁先浮动, 谁在前面,不同方向上浮动找左右方向

完全脱离文档流是全部标签都浮动起来


使用三个标签模块展示:  浮动的会并排, 
div1 和 div2 浮动后, div3 会补齐
这是半脱离文档流
HTML代码
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

css代码
.box1{
    width: 200px;
    height: 200px;
    background-color: white;
    border: 2px solid purple;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}
.box3{
    width: 300px;
    height: 300px;
    background-color: pink;
}

• 浮动流贴靠问题

当父元素的宽度足够显示所有元素时, 浮动的元素就会并列显示

当父元素的宽度不足以显示所有元素时, 浮动的元素会往下靠,

HTML代码:
<div class="fad">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

css代码:
.box1{
    width: 200px;
    height: 200px;
    background-color: white;
    border: 2px solid purple;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}
.box3{
    width: 300px;
    height: 300px;
    background-color: pink;
}

.fad{
    width: 500px;
    height: 500px;
    border: 5px solid black;
}

• 浮动元素文字包围现象

当图片浮动之后, 文字是不会被浮动图片覆盖的, 而是在浮动的图片周围排布

HTML代码:
<div class="fad">
    <div class="box1"></div>
    <p>
赵露思，1998年11月9日出生于四川成都，中国内地女演员，毕业于台湾明道大学。 2016年，参加由芒果TV推出的歌手选秀节目《超级女声》海选活动。2017年，因参演古装言情剧《凤囚凰》从而进入演艺圈。2018年4月25日，主演的古装言情奇幻网络剧《哦！我的皇帝陛下》在腾讯视频播出，其在剧中饰演天生带有水逆体质的少女洛菲菲 [1]  。2019年1月12日，在第三届金骨朵网络影视盛典中获得年度网络潜力演员奖 [2]  ；同年5月30日，主演的民国奇幻剧《青囊传》在优酷上线 [3]  。2020年，主演的古装仙侠《三千鸦杀》和古装言情剧《传闻中的陈芊芊》先后播出 [4]  ，9月15日，主演的都市爱情喜剧《我，喜欢你》播出
    </p>
</div>

css代码
.fad {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    color: #31b0d5;
}
.box1{
    width: 200px;
    height: 200px;
    background-image: url("../img/lusi1.jpg");
    background-size: 200px;
    background-repeat: no-repeat;
    border: 2px solid purple;
    float: left;
}

• 浮动流排版练习

垂直方向的布局用标准流, 水平方向用浮动流布局

从上往下布局

从左到右布局

水平方向可以先划分为一左一右, 然后调整位置

第一步先取消所有默认的边距

*{

 margin: 0;

padding: 0;

}

• 浮动流元素高度问题(塌陷)

在标准流中, 内容的高度可以撑起父类元素的高度

在浮动流中, 浮动的元素博客园撑起父类元素的高度, 当儿子元素浮动起来后, 父亲的高度变为0

父类元素好像塌陷了一样, 因而成为塌陷

<div class="nva1">
    <div class="nva2"></div>
</div>


.nva1{
    background-color: #bce8f1;
    border: 1px solid purple;
}

.nva2{
    width: 200px;
    height: 400px;
    border: 1px solid purple;
    background-color: #31b0d5;
    /*float: left;*/
}

• 清除浮动

直接使用像素顶上, 把浮动起来的区域使用像素覆盖即可,

方式2

使用clear: none left right both

取值

none: 默认值, 允许两边有浮动对象

left: 不允许左边有浮动对象

right: 禁止右边有浮动

both: 不予许两边有浮动

把握两点

1. 元素是从上到下, 从左到右依次加载的
2. clear: left; 对自身作用, 不会影响其他元素, 一旦左边有浮动元素, 启动保护强不让其占用脚下位置

<div class="nva1"></div>
<div class="nva2"></div>


.nva1{
    width: 300px;
    height: 200px;
    background-color: #bce8f1;
    float: left;
}
.nva2{
    width: 200px;
    height: 400px;
    background-color: #31b0d5;
    clear: both;
}

注意: 当使用了clear属性后, margin-top属性会失效,

• 去除浮动3

隔墙发

外墙法

在两个盒子中间添加一个额外的块级元素

给这个额外添加元素clear: both; 属性

注意, 也可以使用margin-top和margin-bottom属性配合使用达到效果

清除浮动4

本质原理和内墙法一样, 但是我们使用了伪元素选择器实现,

在需要隔开的元素加上.属性: after 或 .属性:before方式

overflow方法

overflow: hidden;在父类加上即可

定位流

格式:

position: relative

需要配合一下4种属性使用

top: xxpx

left: xxpx

right: xxpx

bottom:xxpx

待补