css-基本问题

margin 塌陷问题

什么是margin 塌陷？

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

出现的原因：

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

表现形式：

css-基本问题-LMLPHP
代码：

<!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 ，再给需要显示文字的元素，单独设置字体大小（推
荐）。

行内块的幽灵空白问题

产生原因：

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

具体显示：

css-基本问题-LMLPHP

解决方案：

方案一：给行行内块设置 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;

文本修饰

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

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

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

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;

子元素

transform: translate3d(50%, 50%, 20px);位移
transform: rotate3d(1,1,1,30deg);旋转

缩放只有在旋转后才能看到，要不看不到效果
transform: scale3d(1.5,1.5,1) rotateY(45deg); 缩放

组合写：注意点：多重变换时，建议最后旋转。
transform: translateZ(100px) scaleZ(1) rotateY(45deg);

过渡

/* 设置哪个属性需要过渡效果 /
/ transition-property: width,height,background-color; */

/* 让所有能过渡的属性，都过渡 */
transition-property: all;

/* 分别设置时间 /
/ transition-duration: 1s,1s,1s; /
/ 设置一个时间，所有人都用 */
transition-duration: 1s;

过渡demo

BFC

BFC Block Formatting Context(块级格式上下文)；可以理解成元素的隐藏属性；

BFC 能解决什么问题：

元素开启BFC 后，其子元素不会再产生margin 塌陷的问题
元素开启BFC后，自己不会被其他浮动元素所覆盖
元素开启BFC后，就算子元素浮动，元素自身高度也不会塌陷。

如何开启BFC

根元素：html 元素本身就具有BFC 属性
浮动元素
绝对定位，固定定位的元素
行内块元素
表格单元格：table,thread,tbody,tfoot,th,td,tr,caption
overflow 的值不是visible 的块元素
伸缩项目
多列容器
column-span 为all 的元素（即使钙元素没有包裹在多列容器中）
10.display:flow-root

不建议开启BFC；有一些问题也是因为BFC 引起的。BFC 解决问题也不是最优的。知道有这个东西就行

jxy9998