html+css（六）

于 2021-07-14 18:11:26 发布
阅读量93 收藏
点赞数
分类专栏： 前端复习 文章标签： html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45628733/article/details/118719352
版权

今日自然是宜继续学习

1.1盒子的大小

上代码，主要是 box-sizing:里面的 content-box和border-box
一个设置内容区大小，一个设置所有的大小

<!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 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;
            /* 默认情况下，盒子可见大小由内容区，内边距和边框共同决定 */
            /* box-sizing用来设置盒子尺寸计算费那个是（设置width和height） */
            box-sizing: content-box;
            /* border-box宽度和高度用来设置整个盒子可见框大小
            width和height指的是内容区和内边距和边框总大小
            content-box默认值，宽度和高度用来设置内容区大小
            */
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

1.2轮廓阴影和圆角

<!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 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*
             box-shadow用来设置元素阴影效果，阴影不会影响页面布局
             第一个值设置水平偏移量，正值右移，负值左移
             第二个值设置垂直偏移量，正值下移，负值上移
             第三个值模糊效果
             第四个值阴影的颜色
            */
            box-shadow: 10px 10px 50px orange;
        }
        /* outline用来设置元素轮廓线，用法和border一样
        轮廓和边框不同的点，就是轮廓不会影响到可见框大小
        */
        
        .box1:hover {
            outline: 10px red solid;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* border-radius设置圆角，圆角设置的圆的半径大小
            border-top-left-radius左上角
            border-top-right-radius右上角
            border-bottom-left-radius左下角
            border-bottom-right-radius右下角
            椭圆的话只需要再加一个不一样的值就行
            直接border-radius：的话就是直接左上 右上 左下 右下
            border-radius：10px 20px 30px 40px 
            border-radius：10px 四角都是10px
             border-radius：10px / 40px; 四角都是椭圆
            */
            border-top-left-radius: 50px
        }

        /* 将元素设置为圆形：border-radius:50%; */
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

1.3浮动的简介

<!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 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        /* 通过浮动可以使一个元素向其父亲左侧或右侧移动
        使用float属性设置元素浮动
        可选值：
        none默认值
        left元素左浮动
        right元素右浮动

        注意：元素设置浮动之后，水平布局等式就不需要强制成立
        元素设置浮动后，会完全从文档流脱离，不再占用文档流位置
        所以元素下边的还在文档流中的元素会向上移动
        比如可以尝试一下，如果box1设置的是向左浮动，
        则box2会上去消失，把大小设置300px就会发现他在box1下面
        浮动元素不会从父元素移出来，但是box2再设置左浮动就会显示

        浮动元素向左右移动的时候，不会超过它前面的其他浮动元素

        如果浮动元素上面是一个没有浮动的块元素，则浮动元素没法上移
        
        浮动元素不会超过它上面浮动的兄弟元素，最多和他一样高

        总结：
        浮动主要是让元素水平排列
        通过浮动可以制作一些水平方向布局
        */
        
        .box2 {
            width: 300px;
            height: 300px;
            background-color: orange;
            /* float: left; */
        }
        
        .box3 {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        
        .box4 {
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

在这里插入图片描述

1.4浮动的特点

在这里插入图片描述
设置浮动后
在这里插入图片描述
发现并不会盖住文字
当box2和box3都不设置浮动
在这里插入图片描述
box2设置，box3不设置
在这里插入图片描述
box2和box3都设置自然是在同一行
在这里插入图片描述

行内元素脱离文档流后
在这里插入图片描述
上代码：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
            /* 浮动元素不会盖住文字，文字会环绕在图片周围
            所以我们可以利用浮动设置文字环绕效果
            */
        }
        
        .box2 {
            background-color: yellowgreen;
            float: left;
            /* 元素设置浮动后，将会从文档流脱离
            脱离文档流特点：
            块元素不再独占页面一行
            脱离文档流后，块元素宽高都会被撑开
            */
        }
        
        .box3 {
            background-color: yellow;
            float: left;
        }
        
        .s1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            float: left;
            /* 行内元素
            行内元素脱离文档流会变成块元素
            */
        }
    </style>
</head>

<body>
    <!-- <div class="box1"></div>
    <p>
        对钟爱的世界道一句晚安，日月星辰，山水风光 过往不念 当下不杂 未来不惧 愿你我既可以朝九晚五、又可以浪迹天涯 睹物思人的后半句 永远都是物是人非 任凭风吹也无法忘记你的名字 你和你的声色犬马 我和我的各安天涯 没有人赠与你阳光 那就自己给自己
    </p> -->
    <div class="box2">鲁大学生网</div>
    <div class="box3">鲁大学生网</div>
    <span class="s1">鲁大学生网</span>
</body>

</html>

1.5简单的网页布局

<!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>
        /* 头部 */
        
        header {
            width: 1000px;
            height: 150px;
            background-color: silver;
            margin: 0 auto;
        }
        /* 主体 */
        
        main {
            width: 1000px;
            height: 400px;
            background-color: #bfa;
            margin: 10px auto;
        }
        /* 左侧导航 */
        
        nav {
            width: 190px;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        /* 中间内容 */
        
        article {
            width: 600px;
            height: 100%;
            background-color: red;
            float: left;
            margin: 0 10px;
        }
        /* 右侧内容 */
        
        aside {
            width: 190px;
            height: 100%;
            background-color: green;
            float: left;
        }
        /* 底部 */
        
        footer {
            width: 1000px;
            height: 200px;
            background-color: tomato;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 创建头部 -->
    <header></header>
    <!-- 网页的主体 -->
    <main>
        <!-- 左边 -->
        <nav></nav>
        <!-- 中间 -->
        <article></article>
        <!-- 右边 -->
        <aside></aside>
    </main>
    <!-- 网页的底部 -->
    <footer></footer>
</body>

</html>

在这里插入图片描述

1.6高度塌陷和BFC

<!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>
        .outer {
            border: 10px red solid;
            /* BFC(block formatting context)块级格式化环境
            开启BFC该元素会变成一个独立的布局区域
            元素开启BFC后特点：
            开启BFC元素不会被浮动元素所覆盖
            开启BFC元素子元素和父元素外边距不会重叠
            开启BFC可以包含浮动的子元素

            可以通过一些特殊方式开启BFC
            设置元素浮动
            将元素设置为行内块元素
            将overflow设置为visible值
            常用overflow：hidden或者auto
            */
            /* float: left; */
            /* 通过浮动开启了BFC */
            /* display: inline-block; */
            /* 通过行内块元素开启BFC */
            /*  以上两种方式不推荐用来开启BFC*/
            overflow: auto;
        }
        
        .inner {
            height: 100px;
            width: 100px;
            background-color: #bfa;
            /* 高度塌陷 
            浮动布局中，父元素默认被子元素撑开
            子元素浮动之后，会脱离文档流，无法撑起父元素，父元素高度会丢失
            父元素丢失后，剩下元素会自动上移，导致页面布局混乱
            高度塌陷是常见问题，也是我们必须处理的问题

            */
            float: left;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
    <div style="width:100px;height:100px;background-color: yellow;"></div>
</body>

</html>

1.7BFC演示

<!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 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* float: left; */
            overflow: hidden;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            overflow: hidden;
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <br>
    <div class="box2"></div>
</body>

</html>

1.8_clear

clear解决高度塌陷问题

<!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>
        div {
            font-size: 50px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(71, 18, 216);
            float: right;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* box1浮动导致box3上移
            box3受到了box1浮动影响，位置发生了改变
            如果不希望某个元素因为其他元素浮动改变位置
            可以通过clear清楚产生影响
            clear
            left：清除左侧元素影响
            right清除右侧元素影像
            both清除两侧最大影响的那个
            原理：设置清除浮动以后，浏览器会自动为元素设置一个上外边距
            以使其不受其他元素影响

            */
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2"></div>
    <div class="box3">3</div>
</body>

</html>

1.9 after伪类解决高度塌陷

第一种：利用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>鲁大学生网</title>
    <style>
        .box1 {
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        /*清除了box2对他的影响，撑起来了box1 */
        .box3{
            clear:both;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3">
        aa
    </div>
</body>

</html>

第二种方法：用css自己的方法解决高度塌陷问题

<!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 {
            border: 10px red solid;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        /* ::after是行内元素 */
        
        .box1::after {
            content: 'hello';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>

</html>

2.0 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 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box1::before {
            content: '';
            display: table;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        
        .clearfix::before,
        /*  */
        
        .clearfix::after {
            content: '';
            display: table;
            /* 解决外边距重叠问题 */
            clear: both;
            /* 解决高度塌陷问题 */
        }
    </style>
</head>

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>

</body>

</html>

我们的浮动学习就告一段落啦，后面是相对定位。

mzldustu
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mzldustu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值