6.CSS 页面布局
2024-05-19 22:09:26
文章目录
- 1.网页布局方式
- 1.1标准流排版
- 1标准流排版换行现象
- 1.2浮动流排版
- 1.浮动元素的脱标
- 2.浮动元素排序规则
- 3.浮动元素帖靠现象
- 4.浮动元素的字围现象
- 5.浮动练习
- 2.浮动元素高度问题
- 3.清除浮动
- 3.1方式一
- 3.2方式二
- 3.3margin-top失效原因
- 3.4清除浮动方式三
- 1.外墙法
- 2.内墙法
- 3.5伪元素选择器
- 3.6隐藏子元素
- 3.7清除浮动(方式四)
- 3.8清除浮动(方式五)
- 3.9防止父标签塌陷
1.网页布局方式
网页布局方式是指浏览器是如何对网页中的元素进行排版。
1.标准流（文档流/普通流）排版方式 ==》 水平排版/垂直排版两种浏览器默认的排版方式，在CSS中将元素分为三类，块级元素/行内元素/行内块级元素。元素是块级元素那么就会垂直排版元素是行内或行内块级元素就会水平排版
2.浮动流排版方式浮动流是一种半"脱离标准流"的排版方式，只能水平排版，设置某个属性的左对齐获取右对齐。在浮动流中不区分块级元素/行内元素/行内块级元素，并且都可以输入值宽高，水平排版。浮动流没有居中对齐,不能使用margin: auto;3.定位流排版方式
1.1标准流排版
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标准流排版</title><style>div,h1,p {border: 1px solid black;}span,strong,b {border:1px solid black;}</style>
</head>
<body>
<div>d1</div>
<h1>h1</h1>
<p>p1</p>
<hr>
<span>apan</span><strong>strong</strong><b>b</b>
</body>
</html>
1标准流排版换行现象
两个行内块级标签，在同一个行显示，使用maring属性隔开，
在对网页拉伸收缩的时候，
如果第一行的页面没有可现实的位置会自动换行到第二行去显示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标准流排版换行现象</title><style>div {width: 100px;height: 100px;display: inline-block;}.box1 {background-color: red}.box2 {background-color:blue;margin-left:1200px;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.2浮动流排版
float属性 让标签脱离文档流。
值：
left; 在父标签中左对齐
right; 在父标签中右对齐<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动流基本概念</title><style>span {height: 100px;width: 100px;}.box1 {background-color:red;float: left;}.box2 {background-color:black;float: right;}</style>
</head>
<body>
<span class="box1"></span>
<span class="box2"></span>
</body>
</html>
1.浮动元素的脱标
1.浮动元素的脱标脱标：脱离标准流。当某一个元素浮动之后，那么这个元素看上去像被从标准流中删除。
2.浮动元素脱标之后的影响如果前面一个元素浮动流后左对齐，后一个元素没有浮动那么这个时候前面的一个元素会盖住后面一个元素。被覆盖区域如果有文字，那么文字会自动移动位置，显示出来。（字围现象）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素脱标</title><style>.box1 {height: 100px;width: 100px;background-color:red;float:left;}.box2 {height: 150px;width: 150px;background-color: #62ff00;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
2.浮动元素排序规则
1.相同方向上的浮动元素，先浮动的元素会现在在前面，后浮动的元素会显示在后面。
2.不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3.浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动排序规则1</title><style>.box1 {width: 100px;height: 100px;background-color:red;float:left;}.box2 {width: 150px;height: 150px;background-color:blue;float:left;}.box3 {width: 200px;height: 200px;background-color:orange;float:left;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动排序规则2</title><style>div {height: 100px;width: 100px;background: aqua;border:1px solid;}.box1,.box2 {float:left}.box3,.box4 {float:right;}</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>浮动排序规则3</title><style>div {border: 1px solid black;}.box1,.box3{width: 100px;height: 100px;background-color: red;float: left;}.box2,.box4{width: 150px;height: 150px;background-color: aqua;}</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>
3.浮动元素帖靠现象
当父元素的宽度足够放下的浮动元素的时候那么它们会并列显示。
当父元素的宽不足以放下浮动元素的时候，那么从最后一个浮动元素开始往前帖，
如果不宽度还是不够，直到帖到父元素为止，
这时不管够不够都不会再往前了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素贴靠现象</title><style>.father {width: 500px;height: 500px;border:1px solid}.box1 {height: 300px;width: 100px;background-color:red;float:left;}.box2 {height: 100px;width: 100px;background-color: #00ff22;float:left;}.box3 {height: 100px;width: 300px;background-color: #fff200;float:left;}</style>
</head>
<body>
<div class="father"><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</div>
</body>
</html>
4.浮动元素的字围现象
字围现象：
浮动元素在覆盖没有浮动的元素时，
覆盖的元素中存在文字，文字是不被覆盖的，文字会围绕着被覆盖的区域显示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素字围现象</title><style>div {width: 100px;height: 100px;background-image: url("image/yy.png");border:1px solid black;float:left;}p {width: 500px;height: 300px;background-color:orange;border:1px solid black;}</style>
</head>
<body>
<div></div>
<p>阴阳 （中国古代哲学思想） 语音 编辑 讨论3 上传视频
阴阳是一个简朴而博大的中国古代哲学。
阴阳哲理自身具有三个特点：统一、对立和互化。在思维上它是算筹（算数）和占卜（逻辑）不可分割的玄节点。自然界中生物的基因，人工智能中的二进制都充分彰显了阴阳的生命力。
阴阳是中国古代文明中对蕴藏在自然规律背后的、推动自然规律发展变化的根本因素的描述，是各种事物孕育、发展、成熟、衰退直至消亡的原动力，是奠定中华文明逻辑思维基础的核心要素。概括而言，按照易学思维理解，其所描述的是宇宙间的最基本要素及其作用，是伏羲易的基础概念之一。
阴阳相冲化万物，世间万物，皆有阴阳之道。即可从万物万事之间领悟到一丝阴阳之理。古人与后人都对其领悟，拥有不同的见解，因其万物存于阴阳之道，所以古今在各个学术中都有其影。
阴阳一词，代表了很多的意思和道理，简单笼统分为：阴阳对立，阴阳相冲，阴阳转换。</p>
</body>
</html>
5.浮动练习
从上至下，垂直方向使用标准流，水平方向使用浮动流。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动练习</title><style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}.header {width: 980px;height: 100px;margin: 0 auto;}.header .logo {width: 250px;height: 100px;background-color:pink;float:left;}.header .language {width: 150px;height: 50px;background-color: skyblue;float:right;}.header .nav {width: 650px;height: 50px;background-color:purple;float:right;}.content {width: 980px;height: 400px;margin: 10px auto;}.content .aside{width: 320px;height: 400px;background-color:yellow;float:left;}.content .article {width: 650px;height: 400px;float:right;}.content .article .articleTop {width: 650px;height: 350px;}.content .article .articleBottom {width: 650px;height: 40px;background-color: #c08413;margin-top:10px;}.content .article .articleTopLeft {width: 400px;height: 350px;float: left;}.content .article .articleTopRight {width: 240px;height: 350px;background-color: #aaca32;float:right;}.content .article .articleTopLeft .news1 {width: 400px;height: 200px;background-color: #f920a6;}.content .article .articleTopLeft .news2 {width: 400px;height: 140px;background-color: #00c0eb;margin-top:10px;}.footer {width: 980px;height: 40px;background-color:tomato;margin: 10px auto;}</style>
</head>
<body>
<div class="header"><div class="logo"></div><div class="language"></div><div class="nav"></div>
</div>
<div class="content"><div class="aside"></div><div class="article"><div class="articleTop"><div class="articleTopLeft"><div class="news1"></div><div class="news2"></div></div><div class="articleTopRight"></div></div><div class="articleBottom"></div></div></div>
<div class="footer"></div>
</body>
</html>
2.浮动元素高度问题
1.在标准流中内容可u撑起父元素的高度。
2.在浮动流中浮动的元素是不可以撑起父元的高度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素高度问题</title><style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}div {border:1px solid black;}p {width: 100px;height: 100px;background-color:red;}</style>
</head>
<body>
<div><p></p>
</div>
</body>
</html>
3.清除浮动
两个div标签都没有了支撑，都到一行中显示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方式一)</title><style>* {padding: 0;margin:0;}.box1 {background-color:red;}.box2 {background-color:aqua;}.box1 p {background-color:burlywood;width: 100px;}.box2 p {background-color:skyblue;width: 100px;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.1方式一
给父元素设置一个高度。
注意：
在开发中，能不谢高度酒不写高度，这个方式使用很少。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方式一)</title><style>* {padding: 0;margin:0;}.box1 {height: 21px;background-color: red;}.box2 {background-color:aqua;}.box1 p {background-color:burlywood;width: 100px;}.box2 p {background-color:skyblue;width: 100px;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.2方式二
给后面的盒子提那家clear属性。
clear 属性：
值：
none; 默认值，按照浮动元素的排序规则来排序（左/右浮动找左/右浮动）
left; 不找前面的左浮动
right; 不找前面的右浮动
both; 不找前面的左右浮动
inherit; 继承父元素的clear属性值。注意：
在给某个元素调clear属性之后,那么这个属性的margin属性就会失效。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方案二)</title><style>* {padding:0;margin:0;}.box1 {background-color: red;}.box2 {clear:both;margin-top: 20px;/* margin属性无效 */background-color:aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color:skyblue;}p {float:left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.3margin-top失效原因
第一个盒子没有支持就等于没有存在，第二个盒子margin-top 的对象是父元素body。
在开发中没有人为body设置边框，所以失效。
为父元素设置一个边框(仅演示)，
marding-top的值大于第一行的浮动元素的高，
不然向左，会紧帖前面的浮动元素。
（原理太难不去学校，这个知识点了解即可。）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方案三)</title><style>* {padding:0;margin:0;}body {border: 1px solid #000;}.box1 {background-color: red;}.box2 {margin-top:21px;background-color:aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color:skyblue;}p {float:left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.4清除浮动方式三
隔墙法：
1.外墙法：在两个盒子中间添加一个额外的块级元素，再设置clear:both;第三个盒子可以使用margin-top，第一个盒子无法使用margin-bottom。s一般情况下不会去第三个盒子的margin-top,而是设置第二个盒子的hight。
2.内墙法：在第一个盒子所有子元素中添加一个而外的块级元素，在设置clear:both；外墙法可以在第二盒子中使用margin-top,第一个盒子中使用margin-bottom；区别：
外墙法不能撑起第一个盒子的高度，
内墙法可以撑起第一个盒子的高度。（前端中结构和样式分离，隔墙法直接通过修改html代码来修改了样式。）
1.外墙法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方案三)</title><style>* {padding:0;margin:0;}.box1 {background-color: red;}.box2 {background-color:aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color:skyblue;}p {float:left;}.wall {clear:both;}.h20 {height: 20px;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="wall h20"></div>
<div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
2.内墙法
第一个盒子被撑起，
第一部分是漂浮元素的高，第二部分为内墙盒子的高度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方式三,内墙法)</title>
</head>
<body></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方案三,外墙法)</title><style>* {padding:0;margin:0;}.box1 {background-color: red;}.box2 {background-color:aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color:skyblue;}p {float:left;}.wall {clear:both;}.h20 {height: 20px;background-color: #9dff00;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p><div class="wall h20"></div>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.5伪元素选择器
伪元素选择器作用：
可以给指定标签的内容前面/后面添加一个子元素（标签）。格式：
在内容前面添加：
标签::before {content:"内容";
其他属性设置···
}
在内容后面添加：
标签::after {content:"内容";
其他属性设置···
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素选择器</title><style>div {width: 300px;height: 300px;background-color:red;}div::before{content:"第一段";display:block;height: 50px;width: 50px;background-color:pink;}div::after{content:"第三段";display:block;height: 50px;width: 50px;background-color: #62ff00;}</style>
</head>
<body>
<div>第二段
</div>
</body>
</html>
3.6隐藏子元素
visibility 属性 子元素的显示模式
hidden； 隐藏hight属性设置为0，文字内容还是可以显示的,在设置visibility属性隐藏子元素。
hight不设置为0，隐藏只是看不见，但是高度还存在。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子元素显示模式(隐藏)</title><style>div {width: 500px;background-color:red;}.box1::before{content:"第一段";display:block;width: 50px;height: 50px;background-color:skyblue;}.box1::after{content:"第三段";display:block;width: 50px;height: 50px;background-color:salmon;visibility: hidden;}.box2::before{content:"第一段";display:block;width: 50px;height: 50px;background-color:skyblue;}.box2::after{content:"第三段";display:block;width: 50px;height: 0;background-color:salmon;visibility: hidden;}</style>
</head>
<body>
<div class="box1">第二段
</div>
<hr>
<div class="box2">第二段
</div>
</body>
</html>
3.7清除浮动(方式四)
伪元素+子元素隐藏+内隔墙法。
结构与样式分离。CSS修改样式。开发中推荐使用。
在ie6中会有兼容问题，伪元素不起作用。
需要给第一个盒子添加：
/*兼容ie6*/
.box1 {*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方式一)</title><style>* {padding: 0;margin:0;}.box1 {height: 21px;background-color: red;}.box2 {background-color:aqua;}.box1 p {background-color:burlywood;width: 100px;}.box2 p {background-color:skyblue;width: 100px;}p {float: left;}.box1::after {content:""; /*content 不能省略，值可以为空*/display: block;height: 0;visibility: hidden;clear:both;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.8清除浮动(方式五)
overflow:hidden；的作用
1.
盒子的文本内容过长可以正常显示。
overflow:hidden; 设置文字内容超出标签范围不显示。2.
overflow:hidden; 在第一个盒子中设置，也可以用来清除浮动。
注意：
可以撑标签。
第一个盒子可以使用margin-bottom，第二个盒子可以使用margin-top。
兼容问题: ie6中不生效，也需要加上*zoom:1;3.盒子嵌套，子元素设置margin-top,父元素设置overflow:hidden；
可以防止父元素塌陷。外面的盒子没有边框也不会被顶下来。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动(方式五)</title><style>* {padding: 0;margin:0;}.box1 {background-color: red;overflow:hidden;}.box2 {background-color:aqua;}.box1 p {background-color:burlywood;width: 100px;}.box2 p {background-color:skyblue;width: 100px;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.9防止父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>防止父标签塌陷</title><style>.box1 {width: 200px;height: 200px;background-color:red;overflow:hidden;}.box2 {width: 100px;height: 100px;background-color: #62ff00;margin-top:100px;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>
6.CSS 页面布局相关推荐
- 20个不错的CSS页面布局相关资源推荐
本篇文章搜集整理的是CSS页面布局的一个很长的列表.如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果. 漂亮.免费的CS ...
- CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
- html超链接样式顺序,CSS页面布局常用知识汇总（超链接样式）
CSS中的知识非常多,我们不可能全都记得住.闲暇时整理了一些CSS页面布局的常用知识,这篇文章就和大家分享一下CSS超链接样式的常用知识.需要的朋友可以参考一下,希望可以帮助到你. 设计网页时,我们可 ...
- vue在html中写style,vue开发之style（六）（CSS页面布局之样式、背景、文字）
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- div css 登录页面布局,DIV+CSS页面布局
页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...
- 分享 10 个常见的 CSS 页面布局代码片段
大家好,本篇文章将分享我们业务中很常见的10个页面布局代码片段,这10 种页面布局很常见,实现方式也有很多种,本篇文章将用最简单的新方式进行实现,希望对大家有所启发. 1.Card layout(卡片 ...
- 常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style>* ...
- div+css页面布局课堂笔记11---页面布局网站首页设计实例__终极版（仿csdn首页）
1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> ...
- 前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
- day54 css页面布局
目录 一 网页布局方式 二 标准流 三 浮动流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等而网页的 ...
最新文章
- P6134 [JSOI2015]最小表示（拓扑排序递推 + bitset优化，可达性统计变种）
- 压测导致mysql数据库CPU很高_排查压测问题引发的系统性能调优过程
- 注解配置声明式事务控制解析
- Basic INFO - InstallScript脚本编程的限制
- eclipse/myeclipse选中编辑区域文件，Package Explorer定位文件所在项目及目录
- mysql边备份边导入么_MySQL 怎么导入导出操作
- foxpro 打印 字体_【部编版同步复习】16年级上册期中预测卷，可打印！
- mysql中关于关联索引的问题——对a,b,c三个字段建立联合索引，那么查询时使用其中的2个作为查询条件，是否还会走索引？...
- 番茄风控深度剖析风控岗位必备技能
- 人生长途,感受着不断拼搏...
- 社区活动 | Apache RocketMQ × Apache Flink Meetup · 上海站
- win10计算机不显示usb,win10系统U盘不识别怎么办 没有显示U盘的解决方法
- 用html做龙卷风特效,抖音HTML龙卷风特效代码是啥？
- Redis 到底是怎么实现“附近的人”这个功能的呢？
- js 判断是企业微信或微信
- Technorati 2008 年度博客状况报告（第一部分）
- 手游人类一败涂地联机一直连接服务器,人类一败涂地手游怎么联机
- http://www.horizon3d.com.cn
- JS中for循环绑定事件
- TP6基础知识【新框架】