【前端】HTML5+CSS3 CSS浮动（四)

1.浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float属性来设置元素的浮动,可选值：

none 默认值，元素不浮动
left元素向左移动
right 元素向右移动

注意事项：

元素设置浮动以后，水平布局的等式不需要强制成立
元素设置浮动以后，会完全从文档流中脱离处理，不再占用文档流的位置
元素下面还在文档流中的元素会自动向上移动

2.浮动的特点

浮动元素会完全脱离文档流，不再占据文档流中的位置
设置浮动以后元素会向父元素的左侧或右侧移动
浮动元素默认不会从父元素中移出

浮动元素向左或向右移动时，不会超过他前边的其他浮动元素

.box1,.box2,.box3{width: 200px;height: 200px;float: left ;}.box1{background-color: #bfc;}.box2{           background-color: yellow;}        .box3{background-color: orange;}

如果浮动元素的上面是一个没有浮动的块元素，则浮动元素就无法上移（下图绿色盒子没有浮动，下面两个盒子浮动，但不会上移）

浮动元素不会超过他上边的浮动的兄弟元素，最多就是和它一样高

浮动元素不会盖住文字，文字会自动环绕在文字的周围，我们可以使用浮动来设置文字环绕效果

总结：浮动目前来讲它的主要作用是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

3.脱离文档流的特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

脱离文档流的特点：

块元素：
- 块元素不再独占页面一行
- 脱离文档流后，块元素的高度和宽度默认撑开
行内元素：
- 行内元素脱离文档流后变成块元素，特点和块元素一样

也就是说，脱离文档流之后，不需要再区分块和行内元素了

<style>
*{margin: 0;padding: 0;
}
.box1{width: 100px;height: 100px;background-color: blueviolet;float: left;
}
.s1{float: left;width: 200px;height: 200px;background-color: yellow;
}
.box2{background-color: yellowgreen;float: left;
}
</style>
<div class="box1">我是块元素div1</div>
<span class="s1">我是行内元素span</span>
<div class="box2">我是块元素div2</div>

4.页面简单布局

通过浮动的特点，我们就可以对页面进行一个简单的布局了。

HTML代码：

<body><!-- 创建头部 --><header></header><!-- 创建网页主体 --><main><!-- 创建左侧导航栏 --><nav></nav><!-- 创建中心内容 --><article></article><!-- 创建右边边栏 --><aside></aside></main><!-- 创建网页底部 --><footer></footer>
</body>

CSS代码：

<style>header,main,footer{width: 1000px;margin: 0  auto;}/* 设置头部 */header{background-color: #bfc;height: 120px;}/* 设置主体 */main{background-color: rgb(154, 152, 194);height: 400px;margin: 10px auto;}nav,article,aside{float: left;height: 100%;}/* 左侧导航栏 */nav{width: 190px;height: 100%;background-color: rgb(238, 188, 142);float: left;}/* 中间内容区 */article{width: 600px;background-color: yellow;margin: auto 10px;}/* 右侧内容区 */aside{width: 190px;background-color: chocolate;}/* 设置底部 */footer{background-color: rgb(130, 223, 247);height: 120px;}
</style>

最终效果如下：

5.实战小练习

创建w3school导航栏

CSS代码：

<!-- 去除默认样式 -->
<link rel="stylesheet" href="./reset.css"><style>/* 设置nav的大小 */.nav{/* 设置宽度和高度 */width: 1210px;height: 48px;/* 设置背景颜色 */background-color: #E8E7E3;/* 使导航栏位于居中位置 */margin: 100px auto;}/* 设置a的样式 */.nav a{/* 将a设置为块元素，目的是使点击边框边缘时也可以触发超链接 */display: block;text-decoration: none;color: #777777;font-size: 18px;}/* 设置li样式 */.nav li{/* 向左浮动，使得菜单横向排列 */float: left;border-color: cornflowerblue;/* 将文字在父元素中水平居中 */line-height: 48px;     padding: 0 39px;   }/* 设置鼠标移入状态 */.nav li:hover{background-color: grey;color: honeydew;}
</style>

HTML代码：

<ul class="nav"><a href="javascript:;"><li>HTML /CSS</li></a><a href="javascript:;"><li>Browser Side</li></a><a href="javascript:;"><li>Server Side</li></a><a href="javascript:;"><li>Programming</li></a><a href="javascript:;"><li>XML</li></a><a href="javascript:;"><li>Web Buliding</li></a><a href="javascript:;"><li>Reference</li></a></ul>

最终效果图如下：

【前端】HTML5+CSS3 CSS浮动（四)相关推荐

python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...
前端HTML5+CSS3静态页面开发-博文尚美
前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,对html和css的使用及 ...
HTML5+CSS3的学习(四)
HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
前端HTML5+CSS3静态页面开发-京东首页
前端html5+css3静态页面开发-京东首页项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
css3宽度变大动画_学所前端 | HTML5+CSS3
HTML5 &CSS3 2020/09/5 啥?!HTML5是什么? "HTML5"和"HTML"有什么区别? 新增的HTML5特性有多好用? HTML ...

【前端】HTML5+CSS3 CSS浮动（四)

文章目录

【前端】HTML5+CSS3 CSS浮动（四)

1.浮动的简介

2.浮动的特点

3.脱离文档流的特点

4.页面简单布局

5.实战小练习

【前端】HTML5+CSS3 CSS浮动（四)相关推荐

最新文章

热门文章