盒子模型

1、盒子模型

content(内容):必需的一部分,可以是文字、图片等元素。

padding(空白):也称内边距或补白,用来设置内容和边框之间的内容。

border(边框):可以设置内容边框线的粗细、颜色、样式等。

margin(边界):外边距,用来设置内容边框线的粗细、颜色、样式等。

2、盒子的定位与浮动

      相对定位时,无论是否进行移动,元素仍然占据原来的空间,移动元素会导致其覆盖其他框。通过设置垂直或水平位置,可以让其“相对于”它的原始起点进行移动。postion:relative

      绝对定位是参考浏览器的左上角,配合top、left、bottom和right进行定位的,若没有上述四个值,则默认依据父级的坐标原点为原始点。在父层position为默认值时:上、下、左、右的坐标原点以body的坐标原点为起始点位置。position:absolute

      固定定位是绝对定位的一种特殊形式。固定定位的容器不会随着滚动条的拖动而变化位置。可以把一些特殊效果固定在浏览器的视线位置。

区别:

      绝对定位的坐标原点为上级元素的原点,与上级元素有关;相对定位的坐标原点为本身偏移前的原点,与上级元素无关。

注意:

      页面设计要适应各种屏幕分辨率,并且要能够正常显示。在定位时最好使用相对定位。在使用绝对定位时会产生一个问题。目前。大多数网页都是居中显示的,而且元素与元素之间的布局是紧密的。而绝对定位的开始位置是浏览器左上角的原点,当设定各元素块边偏移属性时,由于客户端分辨率的不同,各元素块的显示可能会有偏差。

原文地址:https://www.cnblogs.com/qfdy123/p/10920350.html