zoukankan      html  css  js  c++  java
  • 盒子模型

    1、盒子模型

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

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

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

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

    2、盒子的定位与浮动

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

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

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

    区别:

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

    注意:

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

  • 相关阅读:
    Tomcat
    mybatis xml参数传递详解
    windows zookeeper集群
    @RequestParam和@RequestBody区别
    nginx学习
    先冒泡,再使用vector
    有a,b,c,d 4个球,分别出现的概率是10%,20%,30%,40%,要求编写RunDemo,每调用一次函数RunDemo,就按上面的概率出现球。
    字符串右移
    编写程序输入实现123->321
    计算机网络(一)
  • 原文地址:https://www.cnblogs.com/qfdy123/p/10920350.html
Copyright © 2011-2022 走看看