从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(CSS)
复习:从零开始学前端:CSS盒子模型属性 — 今天你学习了吗?(CSS:Day14)
前言
因为差了几节课,所以每节课有多少知识点还不清楚,个人看着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)
------加紧学习,抓住中心,宁精勿杂,宁专勿多。