什么是盒模型

  • 所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型”
  • 盒子的总宽度 = width + 左右padding + 左右border
  • 盒子的总高度 = height + 上下padding + 上下border

width属性

  • width属性表示盒子内容的宽度
  • width属性的单位通常是px,移动端开发也会涉及百分数、rem等单位
    -当块级元素(div、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承

height属性

  • height属性表示盒子内容的高度
  • height属性的单位通常是px,移动端开发也会涉及百分数、rem等单位
  • 盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0

margin属性详解

  • margin是盒子的外边距,即盒子和其他盒子之间的距离
  • margin也有四个方向

小属性

意义

margin-top

上margin,“向上踹”

margin-right

右margin,“向右踹”

margin-bottom

下margin,“向下踹”

margin-left

左margin,“向左踹”

  • 竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准
  • 一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除
* { /*通配符选择器*/
	margin: 0;
	padding: 0;
}

body, ul, p { /*表示选择所有元素*/
	margin: 0;
	padding: 0;
}

盒子的水平居中

  • 将盒子左右两边的margin都设置为auto,盒子将水平居中
.box {
margin: 0 auto;
}
  • 文本居中是text-align: center; 和盒子水平居中是两个概念
  • 盒子的垂直居中,需要使用绝对定位技术实现

padding属性详解

  • padding是盒子的内边距,即盒子边框内壁到文字的距离
  • 四个方向的padding,可以分别用小属性进行设置

小属性

意义

padding-top

上padding

padding-right

右padding

padding-bottom

下padding

padding-left

左padding

  • padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding
  • padding属性如果用三个数值以空格隔开进行设置,分别表示上、左右、下的padding
  • padding属性如果用二个数值以空格隔开进行设置,分别表示上下、左右的padding

行内元素和块级元素

display属性类型

是否能并排显示

是否能设置宽高

当不设置width属性时

举例

块级元素



width自动撑满

div、section、header、h系列、li、ul等

行内元素



width自动收缩

a、span、em、b、u、i等

  • img和表单元素是特殊的行内块,它们既能够设置宽度高度,也能够并排显示

行内元素和块级元素的相互转换

  • 使用display:block;即可将元素转为块级元素
  • 使用display:inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见
  • 使用display:inline-block;即可将元素转为行内块

元素的隐藏

  • 使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
  • 使用visibility: hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置

box-sizing属性

  • 将盒子添加了box-sizing: border-box; 之后,盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为“内缩”的,不再“外扩”
.box {
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	padding: 10px;
}

HTML5盒子得宽与高 html盒子总宽度_html

  • box-sizing属性大量应用于移动网页制作中,因为它结合百分比布局、弹性布局等非常好用,在PC页面开发中使用较少
  • box-sizing属性兼容到IE9