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

    1、盒子模型

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

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

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

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

    2、盒子的定位与浮动

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

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

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

    区别:

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

    注意:

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

  • 相关阅读:
    编写第一个 .NET 微服务
    Docker 基础知识编排在开发机上设置和使用 Kubernetes 环境
    将微服务部署到 Azure Kubernetes 服务 (AKS) 实践
    .NET Task.Run vs Task.Factory.StartNew
    Python上下文管理器
    Python可迭代的对象与迭代器的对比
    开发你的第一个SpringBoot应用
    Flask的Blueprints和Views
    Flask项目发布流程
    长篇大论Python生成器
  • 原文地址:https://www.cnblogs.com/qfdy123/p/10920350.html
Copyright © 2011-2022 走看看