从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：CSS盒子模型属性 — 今天你学习了吗？（CSS：Day14）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
- 前言
- 第十五节课：浮动
- - 一、浮动
  - - 1.标准流
    - 2.浮动
    - - a.浮动的特性（重点）
      - b.清除浮动
    - 3.定位
  - 二、练习

前言

因为差了几节课，所以每节课有多少知识点还不清楚，个人看着ppt总结的。内容不全的后续会补充~
这是开工后的第一节课，主要是复习上次最后学习的盒子模型属性。

第十五节课：浮动

一、浮动

网页布局的本质------用CSS来摆放盒子。吧盒子摆放到相应的位置。
（现在我们有三个div，想把她们都在一行显示，应该怎么做，虽然可以用display但是之间是不是有空格，这个是后续就用到我们的浮动）

CSS提供了三种传统布局方式

普通流
浮动
定位

1.标准流

什么是标准流：
一个网页由N个html标签组成。每个标签都具有其默认的样式及特性。
大多数的标签都是由块级元素和行内元素组成。
块元素独占一行显示，能够设置其宽高、盒子模型等相关属性，块元素的宽度默认继承父级容器宽度的100%。
行内元素默认横巷排列，如果父级元素的宽度不足时才会换行显示。内联元素的宽高为内容大小。
浏览器根据标签的特性按照从上到下，从左往右的顺序依次解析并渲染html网页，最终呈现页面效果。
这种默认的解析方式称为浏览器的标准文档流。
可记为：标签本身的特点。

2.浮动

为什么需要浮动？

有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：

可以让多个块级元素一行内排列显示。

网页布局技巧：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动？

float属性用于创建浮动框，将其移动到一边，知道左边缘或有边缘及包含块或另一个浮动框的边缘。

语法：

flot：left/right

a.浮动的特性（重点）

离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标）
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列。
浮动元素会具有行内块元素特性。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性，可以设置宽高（比如span）。
如果块级元素盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的宽度会根据内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨这一起的。
浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。（一般利用浮动做文字环绕效果）
浮动不能使用标准盒子居中（margin:0 auto）我们后面会学习定位将浮动盒子居中。

浮动元素经常和标准流父级搭配使用（版心的应用-OPPO商城导航栏）
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置。

*浮动布局注意点：（一浮全浮）
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

实例：
视图：
1,3是浮动，2不浮动，块2被块1覆盖；标准流不能覆盖浮动；

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>.one{width: 800px;height: 100px;border: 10px solid rebeccapurple;}.one .box{width: 100px;height: 100px;background-color: pink;float: left;opacticy: .5;}.one .box:nth-child(2){float: none;}</style>
</head>
<body><div class="one"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
</body>
</html>

b.清除浮动

父级添加overflow：hidden属性(盒子的外边距塌陷也可以使用)
应用：将父级的高度置为空，让子元素撑开
子元素不变，父元素去掉高度，添加overflow:hodden;(可在a的代码的基础上更改)

缺陷：

当文本溢出时，会直接将文本隐藏掉，不好。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>.one{width: 800px;/* height: 100px; */border: 10px solid rebeccapurple;overflow: hidden;}.one .box{width: 100px;height: 100px;background-color: pink;float: left;}.one .box:nth-child(2){background-color: teal;}</style>
</head>
<body><div class="one"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
</body>
</html>

额外标签也称为隔墙法，是W3C推荐的做法。（样式产生的问题用结构去解决-不推荐）
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>，或者其他标签（<br/>等，块级标签均可，不能是行内标签span）。
常用both，也可以使用left或者right，看是左浮动还是右浮动，然后选择性的清除浮动。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。
注意：要求这个新的空标签必须是块级元素。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>.one{width: 800px;/* height: 100px; */border: 10px solid rebeccapurple;/* overflow: hidden; */}.one .box{width: 100px;height: 100px;background-color: pink;float: left;}.one .box:nth-child(2){background-color: teal;}</style>
</head>
<body><div class="one"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div style="clear: both;"></div></div>
</body>
</html>

父级添加after伪元素（样式产生的问题用样式去解决-推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动特性</title><style>.one{width: 800px;/* height: 100px; */border: 10px solid rebeccapurple;/* overflow: hidden; */}.one .box{width: 100px;height: 100px;background-color: pink;float: left;}.one .box:nth-child(2){background-color: teal;}.one::after{content: "";display: block;clear: both;}</style>
</head>
<body><div class="one"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
</body>
</html>

父级添加双伪元素

.clearfix:after{content: "";display: block;height:0;clear:both;visibility:hidden;
}

.clearfix::before,.clearfix:after{content: "";display: table;
}
.clearfix:after{clear:both;
}

既解决外边距塌陷又要清除浮动

其中：before清除外边距塌陷，使得元素table化
after清除浮动，控制clear:both;
一般起名为clearfix

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距塌陷</title><style>.box1{height: 300px;width: 300px;background-color: rgb(212, 104, 212);}.box2{height: 100px;width: 100px;background-color: rgb(30, 190, 190);margin-top: 100px;}.box1::before,.box1::after{content: '';display: table;clear: both;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

a. 外边距塌陷的两种解决办法

想要
变为

方法一：
父元素添加overflow: hidden;

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距塌陷</title><style>.box1{height: 300px;width: 300px;background-color: rgb(212, 104, 212);overflow: hidden;}.box2{height: 100px;width: 100px;background-color: rgb(30, 190, 190);margin-top: 100px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

方法二：
给父元素添加伪元素
设置为table元素，因为table永远没有外边框塌陷问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距塌陷</title><style>.box1{height: 300px;width: 300px;background-color: rgb(212, 104, 212);}.box2{height: 100px;width: 100px;background-color: rgb(30, 190, 190);margin-top: 100px;}.box1::before{content: '';display: table;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

3.定位

Day17

二、练习

OPPO商城导航条
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OPPO商城</title><style>body{margin: 0;background-color: rgb(185, 182, 182);}.header-box{width: 100%;height: 120px;background-color: teal;}/* 黑色导航 */.header-box .black-box{width: 100%;height: 36px;background-color: #000;}.header-box .white-box{width: 100%;height: 84px;background-color: #fff;}.center{width: 1264px;height: 100%;/* background-color: pink; */margin: 0 auto;}.header-box .black-box .black-left{float: left;}.header-box .black-box .black-right{float: right;}.header-box .black-box a{text-decoration: none;line-height: 36px;font-size: 13px;color: #fff;}.header-box .black-box .black-left>a{margin-right: 16px;}.header-box .black-box .black-right>a{padding: 0 20px;border-right: 1.6px solid snow; }.header-box .black-box .black-right>a:last-child{padding: 0;border-right: none;}.header-box .black-box .black-right img{width: 17px; vertical-align: text-bottom;}/* 白色导航 */.header-box .white-box .center>a{float: left;height: 50px;margin-top: 20px;}.header-box .white-box a img{height: 50px;}.header-box .white-box .bottom-nav{height: 100%;float: left;margin: 0;padding: 0;margin-left:  30px;}.header-box .white-box .bottom-nav li{list-style: none;height: 100%;float: left;line-height: 84px;margin: 0;margin-right: 50px;}.header-box .white-box .bottom-nav li:last-child{margin-right: 0;}.header-box .white-box .bottom-nav li>a{text-decoration: none;}.header-box .white-box .bottom-nav li>a:hover{color: tomato;}/* 搜索框 */.header-box .white-box .search{width: 200px;height: 46px;background-color: rgb(238, 247, 247);float: right;margin-top: 18px;border-radius: 23px;padding: 5px;box-sizing: border-box;}.header-box .white-box .search input{width: 120px;height: 36px;border-radius: 18px;border: none;/* 去掉输入框的修饰线 */outline: none;background-color: rgb(238, 247, 247);padding: 0 15px;}.header-box .white-box .search img{width: 25px;vertical-align: middle;}</style>
</head>
<body><div class="header-box"><!-- 黑色 --><div class="black-box"><div class="center"><div class="black-left"><a href="">OPPO官网</a><a href="">一加官网</a></div><div class="black-right"><a href="">下载OPPO商城 App</a><a href=""><img src="./img/个人头像_o.png" alt="">登录</a><a href="">注册</a><a href=""><img src="./img/购物车空.png" alt="">购物车（0）</a></div></div></div><!-- 白色 --><div class="white-box"><div class="center"><a href=""><img src="./img/logo.png" alt=""></a><ul class="bottom-nav"><li><a href="">OPPO专区</a></li><li><a href="">OnePlus专区</a></li><li><a href="">realme专区</a></li><li><a href="">智能硬件</a></li><li><a href="">潮流好物</a></li><li><a href="">服务</a></li></ul><!-- 输入框 --><div class="search"><input type="text" id="1"><label for="1"><img src="./img/3.1-搜索.png" alt=""></label></div></div></div></div>
</body>
</html>

预习：从零开始学前端：显示隐藏与文本溢出 — 今天你学习了吗？（CSS：Day16）

------加紧学习，抓住中心，宁精勿杂，宁专勿多。

从零开始学前端：浮动 --- 今天你学习了吗？（CSS：Day15）相关推荐

从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：定位 --- 今天你学习了吗？（CSS：Day17）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:显示隐藏与文本溢出 - 今天你学习了吗?(CSS:Day16) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
从零开始学前端：定时器、Math对象 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：对象序列化与反序列化、冒泡排序、数组去重 --- 今天你学习了吗？（JS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:字符串和数组的方法 - 今天你学习了吗?(JS:Day10) 文章目录从零开始学前端:程序猿小白也可以完全 ...

从零开始学前端：浮动 --- 今天你学习了吗？（CSS：Day15）