zoukankan      html  css  js  c++  java
  • CSS---内外边距

     1、内外边距含义

    内边距是div边框内的距离。背景色会覆盖内边距,内边距会使宽高变大。

    外边距是div边框外的距离。背景色不会覆盖外边距

    内外边距都会撑高父元素,外边距会提高div与div之间的距离

     2、利用border做三角形

    给空div设置

    div{
      0;
      height: 0;
      border-top: 20px solid red;
      border-left: 20px solid transparent;  # transparent透明
      border-right: 20px solid transparent;
    }

    3、margin塌陷:

    不浮动时,在文档流里,当给两个兄弟盒子设置垂直方向上的margin,(上面的margin-bottom,下面的margin-top)

    他们俩之间的距离不是margin-bottom + margin-top 而是以最大的为准,这种现象叫margin塌陷。

    在浮动时,没有塌陷问题,距离是margin-bottom + margin-top (设置父盒子宽度,两个子盒子都向左浮动,父盒子宽度放不下

    两个子盒子时,会出现贴靠,这时不会塌陷)

    解决方式:尽量使用父元素的padding而不是子元素的margin

    4,margin:0 auto

    在某个div里写上:1,还必须写上宽度,margin:0 auto 就会水平居中盒子,   2,只有标准流下的盒子才能使用这个。 因为auto的意思是“尽可能有最大距离” 

    上下外边距为0 左右方向尽可能有最大距离就变成了对父盒子居中显示。

    这个属性不会继承(继承属性:color  font  text-* line-*)

    如果要让盒子内文字居中就要写:text-align:center

     

  • 相关阅读:
    windown reids
    redis 类型、方法
    nginx 路由配置
    http status code
    beego orm mysql
    thinkphp5
    beego
    MAC 更新brew 镜像源
    php session存入redis
    ios项目开发— iOS8 定位功能API改变
  • 原文地址:https://www.cnblogs.com/staff/p/10100203.html
Copyright © 2011-2022 走看看