zoukankan      html  css  js  c++  java
  • CSS中的间距设置与盒子模型

    CSS间距

    很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了。

    内补白

    设置元素的内间距

    • padding: 检索或设置对象四边的内部边距

      padding:10px;

    • 上下及两边设置

      padding:5px 10px;

    • 由上边界开始,顺时针设置

      padding:10px 20px 30px 40px

    • 单边设置

      • padding-top: 检索或设置对象顶边的内部边距
      • padding-right: 检索或设置对象右边的内部边距
      • padding-bottom:检索或设置对象下边的内部边距
      • padding-left: 检索或设置对象左边的内部边距

    外补白

    设置元素的外间距

    • 将padding换成margin,用法同上
    • 注意: 在使用padding与margin的时候,会改变我们元素的实际大小

      解决方案 ↓↓↓

    margin相关技巧

    • 设置元素水平居中: margin:x auto;
    • 上方法只能用于水平居中,不可用于垂直居中
    • margin负值可以让元素位移及边框合并

    盒子模型

    元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。

    把元素叫做盒子,设置对应的样式分别为:

    • 盒子的边框(border)
    • 盒子内的内容和边框之间的间距(padding)
    • 盒子与盒子之间的间距(margin)。

    盒子真实尺寸

    • 盒子宽度 = width + padding左右 + border左右
    • 盒子高度 = height + padding上下 + border上下

    在布局中,如果我想增大内容和边框的距离,又不想改变盒子显示的尺寸

    box-sizing: content-box 外补白

    box-sizing: border-box 内补白

  • 相关阅读:
    C语言字符串之无重复字符的最长子串
    C语言递归之求根到叶节点数字之和
    C语言递归之二叉树的最大深度
    C语言递归之翻转二叉树
    C语言递归之对称二叉树
    C语言链表之两数相加
    如何把笔记本电脑的有线网分享给手机上
    安利spacemacs ^^
    lambda创世纪
    jinterface包详解
  • 原文地址:https://www.cnblogs.com/aduner/p/12207576.html
Copyright © 2011-2022 走看看