内联标签和块级标签

区分块级和内联标签，选中时整行都被选中就说明是块级标签

style
height:1200px

background-color:blue

float:left向左飘

clear:both 撑开，显示背景色

<div style="background-color:red;height:35px;"></div>
<div  style="width:900px;background-color:pink;">
    <div style="background-color:blue;height:100px;float:left;width:200px;">
        left
    </div>
    <div style="background-color:yellow;height:100px;float:left;width:200px;">
        right
    </div>
    <div style='clear:both;'></div>
</div>

效果图：

<div style="height:35px;"></div>
<div  style="width:900px;">
    <div style="height:100px;width:200px;">
        left
    </div>
    <div style="height:100px;width:200px;">
        right
    </div>
    
</div>

效果图：

 

 

<div style="background-color:red;height:35px;"></div>
<div >
    <div style="background-color:blue;height:100px;width:30%;float:left;">
        left
        <input type="text" /> <input type="text" />
    </div>
    <div style="background-color:yellow;height:100px;width:70%;float:left;">
        right11111111111111
    </div>

</div>

效果图：

 

对齐：居中对齐

<div style="width:900px;margin:0px auto;">
    <div style="height:100px;width:30%;float:left;">
        left
        <input type="text" /> <input type="text" />
    </div>
    <div style="height:100px;width:70%;float:left;">
        right11111111111111
    </div>

</div>