HTML基础知识

一、块级元素和行内元素

行内元素:与上一个可定位元素处于同一行。默认尺寸为包裹自己。行内元素设置width、height无效。

块级元素:位于新的一行。默认宽度为父元素的宽度，高度包裹自己。块级元素设置width、height有效。

 

    <body>
        <div style="background: #30d031">块级元素</div>
        <div style="width: 100px;height: 100px;background: #888888">
　　　　　　　外部块级元素
            <p style="background: #dedede">内部块级元素</p>
        </div>
        <a style="background: #308081">行内元素!</a>
    </body>

二、块级元素和行内元素的转化

display:block;　　　　　　把元素设置为块级元素

display:inline;　　　　　　把元素设置为行内元素

display:inline-block;　　　将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽和度，打破了块级元素和内联元素的区别。

三、浮动元素

float:left;float:right;　让元素左靠齐或则右靠齐。只对position为static或relative的元素产生效果。float样式会使元素失去挤压效果。但是会让父元素的文本内容产生环绕。如果一个块级元素设置浮动后，则宽度将会收缩为包裹内容。

四、position属性

五、元素的居中设置

margin:auto和left:50%;均可以让元素居中。

margin:auto;只对position为relative和static的元素有效。只对块级元素有效。

left:50%;需要知道元素的宽度，用以做调整。

posted @ 2015-08-21 20:41  Dalink  阅读(164)  评论(0)    收藏  举报