1.div简介

div的溢出处理

owerflow属性

边框属性

2.盒子模型

盒子模型主要是用来改变外间距和内间距的，像 div table body 所有块状显示的即以矩形区域显示的都适合于盒子模型。

盒子模型属性

box-sizing

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="index.css">
</head>
<body><div id="div1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</div><div id="div2">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</div>
</body>
</html>

div{width: 200px;height: 200px;overflow: hidden;margin-left: 20px;
}
#div1{background-color: yellow;margin-top: 20px;margin-bottom: 20px;padding-right: 20px;box-sizing: border-box;
}
#div2{background-color: blue;}*{/*margin:0px 0px 0px 0px;*//*margin:0px 0px;*/margin-top: 0px;margin-left: 0px;margin-bottom: 0px;margin-right:0px;
}

3. 浮动(float)

脱离原来的文档流浮动，变成一个浮动层

例如：div2会脱离文档流变成一个独立浮动层，也不会受父div的限制。

<body><div id="div1"><div id="div2"></div><div id="div3"></div><div id="div4"></div></div>
</body>

行元素与块元素

定位机制

float属性设置

float 初衷、包裹、崩溃

崩溃(破快)

崩溃的前提需要设置浮动属性

float作为父级元素的时候，父级元素的高度发生了崩溃

将子元素指定了高度后，并设置了浮动，而父元素没有指定高度，父元素的高度将不存在，这特点将成为奔溃

<body><div id="div1"><div id="div2"></div></div>
</body>

包裹

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="index.css">
</head>
<body><div id="div1"><img src="data:image/wudaojiaoshi.jpg"/><p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p></div></body>
</html>

#div1{background-color: rgb(137, 68, 206);float:left;
}
img{vertical-align: bottom;float: left;
}
p{margin-top: -7px;text-align: justify;line-height: 30px;background-color: #b12b2b;
}

设计初衷

float 的设计初衷是为了图文混排(环绕方式的)，文字和矩形区域图片能环绕布局的，后应用到了更对的场景如商品列表并排显示

浮动清楚

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="index.css">
</head>
<body><div id="div1"><div id="div2"></div><div id="div3"></div><div id="div4"></div></div>
</body>
</html>

#div1{background-color: red;padding-bottom: 2px;
}
#div2{background-color: yellow;float: left;width: 200px;height: 200px;
}
#div3{background-color: blue;float: left;width: 220px;height: 220px;
}
#div4{background-color: black;width: 240px;height: 240px;/* 清楚浮动 */clear: both;
}

方式二 (主流使用方式)

适用于复杂的网页设计

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="index.css">
</head>
<body><div id="div1"><div id="div2"></div><div id="div3"></div><div id="clearDiv"></div><div id="div4"></div></div>
</body>
</html>

#div1{background-color: red;
}
#div2{background-color: yellow;float: left;width: 200px;height: 200px;
}
#div3{background-color: blue;float: left;width: 220px;height: 220px;
}
#div4{background-color: black;width: 240px;height: 240px;/*clear: both;*/
}
/* 清楚浮动 */
#clearDiv::after{content: "";visibility: hidden;height: 0px;display: block;clear: both;
}/* 浏览器适应 */
#clearDiv{zoom:1;
}

CSS浮动--慕课网相关推荐

html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔
第一次写笔记,不知道带有别的网站是否违规,为了尊重别人果实,这次笔记就是基于慕课网五子棋教程,大家有兴趣可以去看一下.我自己增加了开始,暂停,继续,重新开始的按钮,由于是新手,最大目的在于实现功能,其 ...
审查慕课网“实战”页面发现的CSS属性用法
在审查慕课网"实战"页面的时候,最吸引我的地方是他的大图背景固定,且好像每个模块的背景都不一样,于是就F12审查了一下,发现原来就是一个小技巧. 对背景图片设置: backgrou ...
进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
【恢复】慕课网《网页布局基础》学习笔记
好久之前,最初入坑前端时的学习笔记.那时候「慕课网」的几个路径还是免费的,也有好几个跟网页布局有关的课程,其中有一个叫<网页布局基础>讲得很棒,那时候刚好喜欢上 markdown 写作,于 ...
web--2048小游戏复现（慕课网）
这周断断续续完成了2048小游戏的网页版,这里主要讲这款游戏的逻辑和代码实现. 参考:慕课网2048私人订制 https://www.imooc.com/learn/76 对着视频把源码敲了一遍,这里 ...
慕课网饿了么 vue2.0 项目
饿了么 vue 项目总结项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师敲饿了么 vue 项目作者项目源代码地址项目完成之后 npm run build 这本来是写在 ...
CSS浮动为什么不会遮盖同级元素
**源码测试浏览器:**IE8核心的360浏览器 1.问题描述在W3CSchool学习web前端时,看完CSS定位-浮动这一节后,感觉没有什么问题.但是在CSS高级-分类这一节的中进行实践时,遇到了 ...
用Promise实现队列(爬一爬慕课网HTML代码)
项目初始化创建一个package.json文件,webstorm快捷创建package.json非常简单. 使用 npm init 快速创建. 工具模块需要下载的的模块 superagent 页面 ...
前端之CSS篇(四)——CSS浮动详解
前言:页面布局要学习三大核心,盒子模型,浮动和定位 . 1.CSS浮动场景:整个网页的布局本节需要解决的问题: 为什么需要浮动浮动的排列特性 3种最常见的布局方式为什么需要清除浮动写出至少 ...

CSS浮动--慕课网