HTML/CSS遇到的问题汇总

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

浮动带来的影响

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

  • 如果父元素没有设置宽度,而子元素全部浮动,那么父元素高度将会变为0

  • 前面的元素浮动之后,会给后面的元素带来影响

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

清除方法

  1. 隔墙法
<div class="clear"></div>         .clear{clear:left/right/both}
  1. 给父元素一个高度
<!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>
  1. 伪元素法
.clearfix:after{
            /*在box1盒子后面添加内容*/
            content:'.';
            /*设置为块,结合clear:both去想*/
            display: block;
            /*隐藏这个块,但是还占位置*/
            visibility: hidden;
            /*去掉高度,不占位置,取消冗余,*/
            height:0;
            /*最后清除浮动的影响*/
            clear:both;
        }
  1. overfiow:hidden;

垂直水平居中

水平居中

  1. 方法一:在父容器上定义固定宽度,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>

  1. 方法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中妥妥居中

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值