HTML和CSS的重要:盒子实体模型(Box model)

2021-01-20 17:23 jianzhan

原文:http://jorux.com/archives/property⑷-if-you-love-css/
本文做为特性篇的最终1篇文章内容, 将讲述HTML和CSS的重要—盒子实体模型(Box model). 了解Box model的重要就是margin和padding特性, 而正确了解这两个特性也是学习培训用css合理布局的重要.
注: 为何不汉语翻译margin和padding? 缘故1, 在中文中并沒有与之相对性应的词语; 缘故2: 即便有这样的词语, 因为在撰写css编码时, 务必应用margin和padding, 假如大家总用中文词语替代其来解释的话, 到了具体运用时非常容易搞混margin和padding的定义.
假如有1点Html基本的话, 就应当掌握1些基础元素(Element), 如p, h1~h6, br, div, li, ul, img等. 假如将这些元素细分, 又能够各自归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
    Block-level element: 指可以单独存在, 1般的块级元素之间以换行(如1个段落完毕后另起1行)隔开. 常见的块级元素包含: p, h1~h6, div, ul等; Inline element: 指依附于别的块级元素存在, 紧接于被联元素之间显示信息, 而不换行. 常见的内联元素包含: img, span, li, br等; Top-level element: 包含html, body, frameset, 主要表现如Block-level element, 属于高級块级元素.

块级元素是组成1个html的关键和重要元素, 而随意1个块级元素都可以用Box model来解释表明.
Box Model: 随意1个块级元素均由content(內容), padding, background(包含情况色调和照片), border(边框), margin5个一部分构成. 立体式图以下(Fig. 1):

该立体式图引自: http://www.hicksdesign.co.uk/ (Under the Creative Commons License)
平面图以下(Fig. 2):

依据以上两图, 坚信大伙儿针对Box model会有个直观的了解.
上1页12 3 下1页 阅读文章全文