浮動

時間 2019-11-25

標籤浮動简体版

原文原文鏈接

display屬性css

塊級元素<div>,<p>,<h1>~<h6>,列表html

內聯（行內）元素<a><img><span>ide

------標準文檔流的組成佈局

display{none 設置元素不被顯示spa

{inline 設置元素爲內聯元素code

{block 設置元素爲塊級元素htm

{inline-block 設置元素爲行內塊元素blog

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div span{
				border: 1px solid red;
				height: 100px;
				width:500px;
			}
			#hide{
				display: none;
			}
			.inline{
				display: inline;
			}
			.block{
				display: block;
			}
			.inlineblock{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="inline">這是一個div塊級元素</div>
		<span class="block">這是一個內聯span行內元素</span>
		<span id="hide">這是一個內聯span行內元素</span>
		<span class="inlineblock">行內塊元素</span>
	</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div span{
                border: 1px solid red;
                height: 100px;
                width:500px;
            }
            #hide{
                display: none;
            }
            .inline{
                display: inline;
            }
            .block{
                display: block;
            }
            .inlineblock{
                display: inline-block;
            }
            ul li{
                display: inline-block;
                padding: 0 8px;;
            }
            ul li a{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="inline">這是一個div塊級元素</div>
        <span class="block">這是一個內聯span行內元素</span>
        <span id="hide">這是一個內聯span行內元素</span>
        <span class="inlineblock">行內塊元素</span>
        
        <hr/>
        <ul>
            <li><a href="">你好，請登陸</a></li>
            <li></li>
            <li><a href="">個人訂單</a></li>
            <li></li>
            <li><a href="">個人京東錄</a></li>
            <li></li>
            <li><a href="">京東會員</a></li>
            <li></li>
            <li><a href="">企業採購</a></li>
            <li></li>
            <li><a href="">手機京東</a></li>
            <li></li>
            <li><a href="">京東商城</a></li>
            <li></li>
            <li><a href="">靜靜的</a></li>
        </ul>
    </body>
</html>