css 记录

去掉文本框焦点移入 出现黑框

 input[type="text"] {
        outline: none;
      }

　　

清除标签默认的margin和padding 

    * {
      margin: 0;
      padding: 0;
    }

　　

css3盒子模型自动计算 box-sizing: border-box;

.box {
      /* 自动内减 */
      box-sizing: border-box;
    }

　　

水平布局的盒子，左右margin正常，两者距离为左右margin之和

1、外边距折叠现象-合并：

垂直布局的同级块级元素，上下margin会合并，两者距离为最大一方margin

解决方法：

①开发时，避免出现垂直布局的上下相邻块级元素之间同时出现margin-top、margin-bottom

原因 就是两个盒子 第一个盒子 margin-bottom: 100px; 第二个盒子  margin-top: 90px;

那么 外边距选择 100px

 

2、外边距折叠现象-塌陷：

互相嵌套的块级元素，子元素的margin-top会作用在父元素之上会导致连带父元素一起往下移动

*解决方法：

①父元素设置border-top或者padding-top

②父元素设置overflow：hidden；

③转为行内块元素

④设置浮动
原因 就是两个盒子  是嵌套的 子盒子设置 margin-top 父盒子 也会margin-top

 

行内元素的margin-top和margin-bottom以及padding-top和padding-bottom设置是无效的‌，而margin-left、margin-right、padding-left和padding-right设置是有效的。这是因为行内元素虽然拥有盒子模型，但其垂直方向的margin和padding属性设置不会对元素周围的元素产生任何影响，即它们不会改变元素在文档流中的实际位置或尺寸。相反，水平方向的margin和padding属性设置是有效的，这是因为行内元素在文本流中是按照字符间距进行排列的，因此水平方向的边距和内边距能够按照预期的方式工作‌12。

如果需要给行内元素设置垂直方向的边距或内边距，一种常见的解决方法是将行内元素转换为行内块级元素（通过设置display: inline-block属性），这样行内元素就可以像块级元素一样具有高度的边距和内边距属性了‌