css-基本问题

margin 塌陷问题

什么是margin 塌陷？

第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

出现的原因：

在早期的时候，制定者认为，第一个子元素的上margin 给父元素，第二个子元素的下margin 给父元素，这样做，处理起来性能最优的。

表现形式：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>16_margin塌陷问题</title>
    <style>
      .outer {
        width: 400px;
        /* height: 400px; */
        background-color: gray;
        /* border: 10px solid transparent; */
        /* padding: 10px; */
        /* overflow: hidden;*/
      }
      .inner1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 下面这行代码是有问题的 */
        margin-top: 50px;
      }
      .inner2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 50px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner1">inner1</div>
      <div class="inner2">inner2</div>
    </div>
    <div>我是一段测试的文字</div>
  </body>
</html>

解决办法

方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden

margin 合并问题

什么是margin 合并

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加

解决办法

无须解决，可以规避

水平居中

行内元素、行内块元素，可以被父元素当做文本处理。

如何让子元素，在父亲中水平居中：

若子元素为块元素，给父元素加上： margin:0 auto; 。
若子元素为行内元素、行内块元素，给父元素加上： text-align:center

如何让子元素，在父亲中垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子
总高) / 2
若子元素为行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle;
若想绝对垂直居中，父元素 font-size 设置为 0 。

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案：

方案一：去掉换行和空格（不推荐）。
方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推
荐）。

行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

具体显示：

在这里插入图片描述

解决方案：

方案一：给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
方案二：若父元素中只有一张图片，设置图片为 display:block 。
方案三：给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 fontsize

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>26_行内块的幽灵空白问题</title>
    <style>
      div {
        width: 600px;
        background-color: skyblue;
        /* font-size: 0; */
      }
      img {
        height: 200px;
        height: 50px;
        /* vertical-align: bottom; */
        /* display: block; */
      }
    </style>
  </head>
  <body>
    <div>
      <img src="../images/2.jpg" alt="悟空" />
      x
    </div>
  </body>
</html>

浮动

元素浮动后的特点：

脱离文档流
不管浮动前是什么元素，浮动后，默认宽和高都是被内容撑开（尽可能小），而且可以设置宽、高
不会独占一行，可以与其他元素共用一行
不会margin 合并，也不会margin 塌陷；能够完美的设置四个方向的margin和paddign
不会像行内块一样被当做文本处理（没有行内的空白问题）

元素浮动后的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元组之前的位置，在浮动元素的下面；对千米那的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但是父元素的宽度依然束缚浮动的元素

清除浮动

给父元素指定宽度
给父元素也设置浮动，但是会带来其他影响
给父元素设置 overflow:hidden
在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear-both
给浮动元素的父元素，设置微元素，通过伪元素清除浮动，原理与4相同，推荐使用

.parent::after{
content:'';
display:block;
clear:both;
}

布局中的一个原则：
设置浮动的时候，兄弟元素要么全部浮动，要么全部不浮动

让定位元素在包含块中居中

方法1：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方法2：

left:50%;
top:50%;
margin-left:负的

默认宽度

默认宽度：不设置width 属性值，元素呈现出来的宽度

总宽度= 父的content - 自身的左右margin
内容区的宽度 = 父的content -自身的左右margin - 自身的左右border - 自身的左右padding

盒子的大小

盒子的大小= content + 左右padding + 左右border

背景图片

/* background: 背景颜色背景url 是否重复位置 / 大小原点裁剪方式; */
background:skyblue url(‘…/images/bg03.jpg’) no-repeat 10px 10px / 500px 500px border-box content-box;

多背景

        background: url('../images/bg-lt.png') no-repeat left top,
                    url('../images/bg-rt.png') no-repeat right top,
                    url('../images/bg-lb.png') no-repeat left bottom,
                    url('../images/bg-rb.png') no-repeat right bottom;

文本

文字阴影

text-shadow: 0px 0px 20px red;

文本换行

white-space: nowrap;

文本溢出

text-overflow: ellipsis;

值	含义
clip	当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为 … 。

文本修饰

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor

text-decoration-line 设置文本装饰线的位置

值	含义
none	指定文字无装饰（默认值）
underline	指定文字的装饰是下划线
overline	指定文字的装饰是上划线
line-through	指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条的形状

值	含义
solid	实线（默认）
double	双线
dotted	点状线条
dashed	虚线
wavy	波浪线

text-decoration-color 文本装饰线条的颜色

版心

版心一般设计成960-1200的宽度

2d效果

transform: translate(-50%,-50%);位移
transform: scale(1.5);缩放
transform: rotate(30deg);旋转
transform: skew(30deg);扭曲

组合写：注意点：多重变换时，建议最后旋转。
transform:translate(100px,100px) rotate(30deg);
backface-visibility: hidden; 背部可见性

3d效果

给父元素添加3d 效果

/* 开启3D空间 /
transform-style: preserve-3d;
/ 设置景深（有了透视效果，近大远小） /
perspective: 500px;
只有给父元素开启3d 空间，才能够看到
/ 设置透视点的位置 */
perspective-origin: 102px 102px;