提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

CSS笔记(10)

笔记CSS 10
2023-06-13 09:12:59 时间

CSS笔记(10)

唉,感觉最近好懒啊,一直在玩玩玩.得抓紧学了,每次看弹幕都感觉别人学的好快好多,在家的效率真的好低啊,比学校里低太多了555555.

传统布网页布局的三种方式

1.普通流(标准流)

2.浮动

3.定位

①标准流(普通流/文档流)

所谓的标准流,就是标签按照规定好默认方式排列.比如块级元素会独占一行,行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行.标准流是最基本的布局方式.

②浮动

为什么需要浮动?

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

浮动最典型的应用:可以让多个块级元素一行内排列显示

网页布局第一准则:

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

float属性用于创建浮动框,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框边缘.

语法:

选择器 { float : 属性值 }

浮动特性(重难点)

  1. 浮动元素会脱离标准流(脱标) ① 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标 ② 浮动的盒子不再保留原先的位置
  2. 浮动的元素会一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

浮动元素会具有行内块元素特性:任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性.

  1. 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动以后,它的大小根据内容来决定.
  2. 浮动的盒子中间是没有缝隙的,是紧挨在一起的.
  3. 行内元素同理.

浮动元素经常与标准流父元素搭配使用

为了约束浮动元素位置,我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则.

案例:

做一个这样的页面出来:

根据上面的知识可知,我们要在页面中放一个大的标准流盒子,然后再在大盒子中放两个浮动的盒子.

现在先放一下我自己做的:

完整代码:

<!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) 好慢啊!!!

相关文章