浮动

display属性

块级元素<div>,<p>,<h1>~<h6>,列表

内联（行内）元素<a><img><span>

------标准文档流的组成

display{none 设置元素不被显示

          {inline 设置元素为内联元素

          {block 设置元素为块级元素

          {inline-block  设置元素为行内块元素

<!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>

常用的网页布局

1，上下结构

2，上中下结构

3，上左右下结构1-2-1结构

4，上左中右下结构1-3-1结构

float 浮动属性

left:向左浮动

right：向右浮动

none：不浮动

浮动原理详细：请百度w3cshool --css:浮动

clear属性

left：

right：

both：

none:

如何让父容器随子元素自适应高度

（1）在父容器中添加一个空的子元素

.clear{clear:both;}

<div class="clear"></div>

(ps:在要求定位的属性时必须用clear）

(2)在父容器中加一个样式

overflow：hidden:裁剪内容 - 不提供滚动机制。;

{auto:如果溢出框，则应该提供滚动机制。

{scroll:裁剪内容 - 提供滚动机制。

{visible:不裁剪内容，可能会显示在内容框之外。}

（ps:子元素必须要被浮动，才不被剪除)

 

posted @ 2017-04-17 11:42  Gavin_zhong  阅读(147)  评论(0)    收藏  举报