HTML/CSS遇到的问题汇总

最新推荐文章于 2024-07-24 16:53:23 发布

Stargazer（仰望星空）

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量297

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45145768/article/details/107307861

版权

经过这几天的学习，已经基本掌握制作静态网站的方法。在学习过程中也出现了许多问题,总结如下：

浮动带来的影响

float的属性:left, right, 默认是none;

如果父元素没有设置宽度，而子元素全部浮动，那么父元素高度将会变为0
前面的元素浮动之后，会给后面的元素带来影响

此时我们需要清除浮动带来的影响，以让后续元素可以正常执行

清除方法

隔墙法

<div class="clear"></div>         .clear{clear:left/right/both}

给父元素一个高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        .fu1{
            height: 500px;
            /*background-color: ;*/
        }
        .c1{
            width: 200px;
            height: 200px;
            float: left;
            background-color: blue;
        }
        .c2{
            width: 200px;
            height: 400px;
            float: left;
            background-color: #888;
        }
        .fu2{
            height: 150px;
            background-color: #222;

        }

    </style>
</head>
<body>
    <div class='fu1'>
        <div class='c1'>

        </div>

        <div class='c2'>

        </div>

    </div>
    <div class='fu2'>

    </div>
</body>
</html>

伪元素法

.clearfix:after{
            /*在box1盒子后面添加内容*/
            content:'.';
            /*设置为块,结合clear:both去想*/
            display: block;
            /*隐藏这个块,但是还占位置*/
            visibility: hidden;
            /*去掉高度,不占位置,取消冗余,*/
            height:0;
            /*最后清除浮动的影响*/
            clear:both;
        }

overfiow:hidden;

垂直水平居中

水平居中

方法一：在父容器上定义固定宽度，margin值设成auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            background-color: blue;
            width: 200px;
            margin: auto;
        }
        .div2{
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊！！！！！！！！！
            </div>
        </div>
    </body>

</html>

方法2：在子元素中将display设置为inline-block,父元素text-algin设置为center

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            background-color: blue;
            text-align: center;
        }
        .div2{
            display: inline-block;
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊！！！！！！！！！
            </div>
        </div>
    </body>

</html>

垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;     
        }
        .div2{
            /*display: inline-block;*/
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
                你好啊！！！！！！！！！
            </div>
        </div>
    </body>

</html>

文本居中

height + line-height：两者配合使用，垂直方向居中
text-align：父级的text-align，水平方向居中

注意：text-align：center ；只是将子元素里的内联元素居中
如果不是内联元素就要用到 margin： 0 auto；

<style>
  .word{
    width: 100px;
    height: 30px;
    background: #E5E5E5;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    }
</style>

<div class="word">
    <p>lorem</p>
</div>

在这里插入图片描述
这个词在div中妥妥居中

Stargazer（仰望星空）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML/CSS遇到的问题汇总

经过这几天的学习，已经基本掌握制作静态网站的方法。在学习过程中也出现了许多问题,总结如下：浮动带来的影响float的属性:left, right, 默认是none;如果父元素没有设置宽度，而子元素全部浮动，那么父元素高度将会变为0前面的元素浮动之后，会给后面的元素带来影响此时我们需要清除浮动带来的影响，以让后续元素可以正常执行清除方法隔墙法<div class="clear"></div> .clear{clear:left/r
复制链接

扫一扫