一。CSS盒子模型
盒子模型解释
元素在页面中显示成一个方块,类似一个盒子,css盒子模型就是使用显示中的和字来做比喻,帮助我们设置元素对应的样式,盒子模型示意图如下:
把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子的内容和边框之间的距离(padding)、盒子与盒子之间的距离(margin)
设置宽高
width:200px; 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体的宽度(难点)
height:200px; 设置盒子的高度,此高度是盒子内容的高度,不是盒子整体的高度(难点)
设置边框
设置一边的边框,比如顶部的边框,可以按如下设置:采用最后一个设置,方便快捷。
个别方式采用以下方法:
常采用这种方式:
padding 后面值设置如下:
设置外间距margin:
外边距设置方法和padding设置方法相同,将上面的padding换成margin,就是外边距的设置方法。
练习题:
通过以上页面得出结论:盒子的width 和 height 设置的是盒子内容的宽和高,不是盒子的本身的宽和高,盒子的真实尺寸计算公式如下:
盒子的宽度 = width + padding左右 + border左右
盒子的高度 = height + padding上下 + border上下