HTML 布局原理

HTML元素分为块级元素(block element)和行内元素(inline element)，前者独占一行，也就是元素的头和尾会被自动加上换行符，如

后者不会独占一行，如, ,

一个CSS box从外向内分为4部分：margin, border, padding, content. 除了最内部的内容部分(content)，其他3部分都可以设置宽度，其中margin是块级元素边界(border)之外的透明区域； border是边界线，默认宽度为0，即不可见； padding是内容(content)到边界之间的透明区域；

将下面的代码保存在一个html文件中，可以看到各部分的作用：

<!DOCTYPE html>
<html>
  <head>
    <style>
    div {
        background-color: lightgrey;
        width: 300px;
        padding: 15px;
        border: 5px solid navy;
        margin: 25px;
    }
    </style>
  </head>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</div>
  </body>
</html>

HTML5

测试浏览器对HTML5的支持度：用待测浏览器打开HTML5test，该网页会列出浏览器对HTML5每一项特性支持与否。

Semantic Element

Ref: HTML5 Semantic Elements

Published

Dec 24, 2014

Last Updated

Dec 24, 2014

HTML笔记

HTML 布局原理

HTML5

Semantic Element

Published

Last Updated

Category

Tags

Contact