复习一波 html css（一）常用选择器和浮动相关的东西

最新推荐文章于 2024-08-21 20:15:01 发布

小白追梦

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量92

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108791072

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML和CSS的基础知识，包括层叠样式的概念，通过实例展示了如何组合使用样式。接着讨论了盒模型，解释了元素的宽度、高度、内边距和外边距如何影响布局。还探讨了浮动布局的原理，包括无浮动、左浮动和右浮动的影响，以及如何实现文字环绕和清除浮动的方法。最后，提到了行级元素如何通过浮动增加宽度和高度，并展示了隐藏元素的不同方式。

摘要由CSDN通过智能技术生成

1 html

在这里插入图片描述

2 CSS

在这里插入图片描述

举个例子说明一下 为啥叫层叠样式？
组合层叠式的设计

<html>

<head>
    <title>复习</title>
    <meta charset="utf-8">
    <style type="text/css">
        .dy_1 {
            color: red;
        }

        .dy_2 {
            font-size: 33px;
        }

        .dy_3 {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1 class="dy_1 dy_2">皮皮虾</h1>
    <div class="dy_1 dy_2">随便大一些</div>
    <div class="dy_1 dy_2 dy_3">大大大</div>
</body>

</html>

在这里插入图片描述
3

盒模型

在这里插入图片描述
举个例子说明一下这个问题

<html>

<head>
    <title>复习</title>
    <meta charset="utf-8">
    <style type="text/css">
        .px {
            width: 200px;
            height: 300px;
            background-color: #ddd;
            border: 1px solid red;
            background-image: url('');
            background-repeat: no-repeat;
            background-position: 10px 20px;
            padding: 40px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="px">test</div>
    <div class="px">test</div>
</body>

</html>

页面展示效果
在这里插入图片描述

在这里插入图片描述
4

浮动

在这里插入图片描述
我们举个浮动的例子说明一下这个问题
1）
float: none; 也就是不进行浮动不操作，加不加没什么两样

<html>

<head>
    <title>浮动</title>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            width: 100px;
            height: 30px;
            background: red;
            margin: 20px;
            color: hotpink;
            text-align: center;
            float: none;

        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

</html>

展示一下页面效果
在这里插入图片描述
2）
左浮动 float: left;

            float: left;

页面展示效果
在这里插入图片描述
3)
右浮动 float : right

 float: right;

页面展示是这样的
在这里插入图片描述
4）
我们需要注意页面加载的顺序或者说文档流的顺序从上往下
先执行 div 1 再执行 div 2
即使是在浮动的时候也是一样的

5）
如果某一个元素浮动了 其他的元素会顶替它的位置有点类似于排队和站队

浮动再来一讲

第一个应用文字环绕

<html>

<head>
    <title>浮动</title>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background: #eee;
        }

        img {
            width: 80%;
        }
    </style>
</head>

<body>
    <div><img src="img/temp_2.png">大大大大方方反反复复，
        如果 某一个元素浮动了 `其他的元素会顶替它的位置 有点类似于排队和站队`</div>

</body>

</html>

我们实现的效果是文字围绕着图片进行环绕了
在这里插入图片描述
2)

清除浮动

清除浮动 常用三个 clear : left / right / both ;
需要注意一个事情要对应 使用的是左浮动应该用clear : left 清除
可以对单一元素清除浮动

情况稍微变得复杂一点
在这里插入图片描述

我们举个例子说明一些这个情况
1
不加浮动是这样的

<html>
  <head>
    <title>浮动</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .wrap {
        width: 400px;
        background: gold;
      }

      .wrap img {
        width: 80%;
        margin: 20px;
      }

      /* .fl {
            float: left;
        } */
    </style>
  </head>

  <body>
    <div class="wrap">
      <img class="fl" src="img/temp_2.png" />
    </div>
  </body>
</html>

页面效果
在这里插入图片描述
2
加了浮动之后变成了这样

这样操作一下使得重新可见

为什么呢？
简单来讲 清除浮动的操作，会使得回到普通流，重新获取img的高度
确定了clear 的高度也就确定了wrap 的高度

利用伪类清除浮动 :after

在这里插入图片描述
我们举例子说明一下这个问题

<html>
  <head>
    <title>浮动</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .wrap {
        width: 400px;
        background: gold;
      }

      .wrap img {
        width: 80%;
        margin: 20px;
      }

      .fl {
        float: left;
      }
      .cle:after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>

  <body>
    <div class="wrap cle">
      <img class="fl" src="img/temp_2.png" />
    </div>
  </body>
</html>

这样就可以清除浮动
在这里插入图片描述
再次总结一下清除浮动的方法
1、clear:both /left /right
2、利用伪类 cle:after {content:""; display:block; clear:both;}

下一个事情

在这里插入图片描述
行级元素加宽高没有效果但是加了float: left/right 就可以

<html>
  <head>
    <title>浮动</title>
    <meta charset="utf-8" />
    <style type="text/css">
      a {
        width: 100px;
        height: 200px;
        color: black;
        float: left;
        background-color: cyan;
        margin: 10px;
      }
      .hid_1 {
        visibility: hidden;
      }
      .hid_2 {
        display: none;
      }
    </style>
  </head>

  <body>
    <a class="hid_1">111</a>
    <a class="hid_2">222</a>
    <a>333</a>
  </body>
</html>

在这里插入图片描述

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习一波 html css（一）常用选择器和浮动相关的东西

P1-3-4-5-2-10-7-6-8-9-111 html2 CSS举个例子说明一下为啥叫层叠样式？组合层叠式的设计<html><head> <title>复习</title> <meta charset="utf-8"> <style type="text/css"> .dy_1 { color: red; }
复制链接

扫一扫