盒模型——进阶

border:0 和 border:none 的区别主要体现在两点：性能差异和兼容差异

性能差异
border:0 :是需要占内存的，（因为渲染后，实际上是一个像素为 0的border）
border:none 是不需要占内存的（浏览器在解析 border:none的时候，并不会做出渲染）

兼容差异
只存在于IE6 IE7的<input type="button"/> 和 <button>标签中，其他浏览器不存在兼容
border:0 在所有的浏览器中效果都一样，都是把边框隐藏掉（不是去掉），
border:none 对IE6 IE7 按钮的边框无效，其他浏览器则会去掉按钮的边框，现在IE6 7 差不多逐渐抛弃。无需纠结用哪个

实际中border:0 和 border:none 都差不多，两者性能方面对页面渲染速度的差别不是很大

内边距: padding
padding 复值
一般通过外边距把元素的内容区隔开，也可用padding 这样可以在段落之间插入间隔边框两个边框相接后得到一条实线

 p{
      margin:0;
      padding:0.5em 0;
      border-bottom: 1px solid gray;
      border-left: 1px dashed black;
    }

元素内部默认是没有内边距的，如段落之间一般只用外边距实现，如果没有内边距元素的边框会紧贴内容，
所以如果为元素添加了边框，最好加一些内边距

一个值 值将应用到四条边上
如需设置不同的内边距值，可以提供四个值，顺序分别是顺时针 上右下左

为元素添加内边距，元素的背景会默认延伸到内边距区域，如果背景透明相当于在元素的内容四周添加一些空白，总之只有背景可见，就会延伸到内边距区域
可以用background-clip属性禁止可见背景延伸到内边距区域

 h2{
      padding: 2em;
      background-color: silver;
      background-clip: content-box;
    }

单边内边距可以单独为元素的某一边设定内边距值，且四个边都可以单独设定，
padding-top
padding-right
padding-bottom
padding-left

例：只想把h2元素的左内边距设置为3em ，

  padding:0 0 0 3em; /* 这个写法太麻烦 */
      等价于
      padding-left:3em;

 h2{
     /* 一个元素也可以使用多个单边属性 */
     padding-left:3em;
     padding-bottom: 2em;
     padding-right: 0;
     padding-top: 0;
     background:silver;
    }

padding 的百分比数值
是相对于父元素内容区的宽度计算，无论什么原因，父元素的宽度变了，内边距也会变，，，，这一点不仅针对左右内边距，也针对上下内边距
之所以是相对父元素内容区的高度计算上下内边距的百分比数值，，因为父元素的宽度不随后代元素的宽度影响

百分比数值也可以与长度值混用，

上下内边距设为0.5em

两侧的内边距设为父元素宽度的10%

 h2{
    padding:0.5em 10%;
  }

内联元素 inline 水平元素的padding 百分比值
1，同样相对于宽度计算
2，默认的高度和宽度细节有差异
3，padding会断行

空的inline 元素 + padding宽高也不等
设置font-size:0 高度会发生变化
为什么会有额外的高度

inline元素的垂直padding ,会让 "幽灵空白节点" 显现，也就是规范中的 “”strut“出现

幽灵空白节点本质上是内联元素文本的只受font-size的影响可以设置font-size：0 解决

垂直方向的百分比是相对宽度计算的，可以秦松实现正方形，所以永远是个正方形 padding:50%;

行内元素的内边距：
置换元素的内边距：

  <style>
    /* 
    背景图片+padding
    当一个元素使用背景图的时候，该元素的文字内容会停留在左边
    如果文字前面加一个按钮箭头  ，在不改变总宽度的情况下，加padding-left

     */
        div{
           background-image: url(./img/picture..1.jpg);
         /*   width:127px; */
            width:72px;/* 127 - 55=72 */
            height: 30px;
            font-size: 12px;
            color:red;
            line-height: 30px;
            padding-left:55px;   
        }
    </style>
    <div>商会状况</div>

posted @ 2021-01-06 19:36 沁莹阅读(96) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

盒模型——进阶

公告