行、块、行块标签与盒模型

块级标签(block),行级标签(inline),行块标签(inline-block):

块级标签(block)的特点有:1.独占一行   2.可以设置尺寸   3.没有明确宽度和高度是,宽度由父级决定,高度由内容决定   4.支持margin和padding

行级标签(inline)的特点:1.不会独占一行,可以与其他行级元素同行排列   2.不支持尺寸设置   3.对左右margin和左右padding支持较好,上下margin和padding要慎用

行块标签(inline-block)的特点:支持盒模型,但不会独占一行

盒模型:

1.盒模型有外边距margin、边界border、内边距padding、内容尺寸(width/height)四个部分组成

2.盒子模型分为标准盒模型与怪异盒模型

标准盒模型:内容尺寸: width height 

                     盒子尺寸 : 内容尺寸 padding border

                    区域尺寸:内容尺寸 padding border margin

怪异盒模型:box-sizing: border-box / content-box;

注意:盒子与盒子之间用margin 盒子内部用padding 盒子尺寸尽量用auto

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框(规范的将来版本可能允许非矩形框,不过对现在来说,框都是...
    四光年阅读 850评论 0 10
  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 3,432评论 0 3
  • 不见人心冷,独见己心乱。 回忆旧时光,彷徨人世间。
    醉梦红尘阅读 335评论 2 6