HTML连载47-设计思想、浮动元素高度问题

时间 2019-11-07

标签 html 连载设计思想浮动元素高度问题栏目 HTML 繁體版

原文原文链接

1、设计网页的思想html

拿到需求以后咱们先对各个模块（盒子）进行划分，而后从外到内进行设计（1）设计一个盒子最基本的设计大体包括背景颜色（其实用于识别），宽，高，边界浮动流仍是标准流.git

（2）而后盒子和盒子之间的外边距margingithub

（3）而后在进入到小盒子中，进一步划分盒子，这样再重复第一二步微信

注意点：咱们用背景颜色能够识别出各个模块的具体划分，而后在进入到小盒子进行划分，别忘记最后把原来的大盒子背景颜色去掉。（边界无色为none）学习

2、浮动元素的高度问题大数据

1.在标准流中内容的高度能够撑起父元素的高度。ui

2.在浮动流中浮动的元素是不能够撑起父元素的高度的。spa

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D129_FloatExcriseXia</title>

    <style>

        .fuyuansu,.fuyuansu1{

            border:2px black solid;

        }

        .biaozhun{

            width:100px;

            height: 100px;

            background-color: red;

        }

        .fudong{

            width:100px;

            height: 100px;

            background-color: yellow;

            float:left;

        }

</style>

</head>

<body>

<div class="fuyuansu1">

    <div class="biaozhun"></div>

</div>

<hr>

<div class="fuyuansu">

    <div class="fudong"></div>

</div>

</body>

</html>

3、源码：.net

D129_FloatExcriseXia.html设计

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D129_FloatExcriseXia.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，我的帐号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包