css盒子模型学习

盒子模型是一个用于描述html和css中元素布局的概念。

在web开发中，每个html元素都可以看作是一个矩形盒子，这个盒子由内容区域、内边距、边框和外边框组成。

在标准盒模型中，为盒子设置的width、height属性为content内容的宽度和高度。

内容 Content : 下图中 内容为 100 x 100 像素的元素 ;
内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ;
边框 Border : 边框 包裹 内边距 , 在 外边距 与 内边距 之间 , 边框 1 像素 ;
外边距 Margin : 最外层 元素 , 与其它盒子的距离 ;

• 设置边框样式 : border-style 属性值 设置边框样式 , 可设置的值由如下选择 :
  • none : 默认选项 , 忽略边框宽度 ;
  • solid : 设置 实线边框 ;
  • dashed : 设置 虚线边框 ;
  • dotted : 设置 点线边框 ;

  • 块级盒子和内联盒子

  • 不论是标准盒模型还是怪异盒模型，我们都广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为。

    块级的（block）盒子会表现出以下行为：

    盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
    每个盒子都会换行
    width和height属性可以发挥作用
    内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
    除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。
    内联的（inline）盒子会出现以下行为：

    盒子不会产生换行。
    width和height属性将不起作用。
    垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开。
    水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
    用做链接的<a>元素、 <span>以及<strong>都是默认处于inline状态的。
    我们通过对盒子display属性的设置，比如inline或者block，来控制盒子的外部显示类型