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>