CSS笔记(10)
唉,感觉最近好懒啊,一直在玩玩玩.得抓紧学了,每次看弹幕都感觉别人学的好快好多,在家的效率真的好低啊,比学校里低太多了555555.
传统布网页布局的三种方式
1.普通流(标准流)
2.浮动
3.定位
①标准流(普通流/文档流)
所谓的标准流,就是标签按照规定好默认方式排列.比如块级元素会独占一行,行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行.标准流是最基本的布局方式.
②浮动
为什么需要浮动?
总结:有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局.因为浮动可以改变标签的默认排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示
网页布局第一准则:
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.
float属性用于创建浮动框,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框边缘.
语法:
选择器 { float : 属性值 }
浮动特性(重难点)
- 浮动元素会脱离标准流(脱标) ① 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标 ② 浮动的盒子不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动元素会具有行内块元素特性:任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性.
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动以后,它的大小根据内容来决定.
- 浮动的盒子中间是没有缝隙的,是紧挨在一起的.
- 行内元素同理.
浮动元素经常与标准流父元素搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则.
案例:
做一个这样的页面出来:
根据上面的知识可知,我们要在页面中放一个大的标准流盒子,然后再在大盒子中放两个浮动的盒子.
现在先放一下我自己做的:
完整代码:
代码语言：javascript复制<!DOCTYPE html>
<html lang="zh-cn">
<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>
* {
padding: 0;
margin: 0;
}
.box{
width: 1228px;
height: 460px;
margin: 100px auto;
/* background-color: pink; */
overflow: hidden;
}
.nav{
float:left;
height: 460px;
width: 230px;
background-color: #a2a0a0;
padding-top: 20px;
}
.img {
width: 1228px;
height: 460px;
background-color: blue;
background: url(../images/phone.jpg) left no-repeat ;
background-size: contain;
}
.nav a {
display: block;
color: #fff;
line-height: 42px;
font-size: 14px;
text-decoration: none;
padding-left: 30px;
}
.nav a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 显示器</a>
<a href="#">家电 插线板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
<a href="#">健康</a>
<a href="#">耳机</a>
<a href="#">生活</a>
</div>
<div class="img">
</div>
</div>
</body>
</html>明天再看看老师是怎么做的.
视频进度：(178/541) 好慢啊!!!
