jxy9998

jxy9998

关注
发信
关注(28)粉丝(399)

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 合并

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

解决办法

无须解决，可以规避

水平居中

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

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

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

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

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

元素之间的空白问题

产生的原因：

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

解决方案：

  1. 方案一： 去掉换行和空格（不推荐）。
  2. 方案二： 给父元素设置 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>

浮动

元素浮动后的特点：

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

元素浮动后的影响

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

清除浮动

  1. 给父元素指定宽度
  2. 给父元素也设置浮动，但是会带来其他影响
  3. 给父元素设置 overflow:hidden
  4. 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear-both
  5. 给浮动元素的父元素，设置微元素，通过伪元素清除浮动，原理与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 能解决什么问题：

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

如何开启BFC

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

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

03-28 06:25
Powered by LMLPHP ©2024 jxy9998 0.001937