css-基本问题

已于 2024-04-17 16:55:08 修改
阅读量683 收藏 15
点赞数 23
分类专栏： css 文章标签： css 前端 html
于 2024-03-27 10:10:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/naozheyun2998/article/details/136936440
版权
本文详细解释了CSS中的margin塌陷现象，解决办法如设置padding、border和overflow，还涵盖了margin合并、元素浮动的特点和影响、如何创建水平垂直居中、空白问题、行内块的幽灵空白、清除浮动、BFC的概念及其应用，以及CSS过渡、关键帧和动画的相关知识。
摘要由CSDN通过智能技术生成

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

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

解决办法

无须解决，可以规避

水平居中

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

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

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

行内块的幽灵空白问题

产生原因：

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

具体显示：

在这里插入图片描述

解决方案：

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

值含义
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;

子元素

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

过渡 transition

过渡相关 CSS 属性

CSS 属性名含义值
transition-duration过渡持续时间时间单位：s、ms
transition-delay过渡延迟时间时间单位：s、ms
transition-property设置哪些样式可以过渡all：能过渡都过渡，默认值
指定属性名，多个使用逗号分隔。
transition-timing-function过渡的运动曲线曲线运动、分步运动
transition过渡复合属性多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟

哪些 CSS 属性可以过渡？

1. 属性值是长度，如 width、height、padding、margin、border-width、background-position 等
2. 属性值是颜色，如 color、background-color、border-color 等
3. 属性值是数字，如 z-index、opacity 等
4. 变换 transform、滤镜 filter

什么时候设置过渡相关的属性 transition

在样式变化之前就将过渡相关属性设置好！

transition-timing-function 设置过渡运动曲线：

ease			平滑运动，先加速后减速，默认值
linear			匀速运动
ease-in			加速运动
ease-out		减速运动
ease-in-out 	先加速后减速
cubic-bezier() 	贝塞尔曲线
steps()			分步运动，第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每			  	一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 
step-start		steps(1, start)
step-end		steps(1, end)

贝塞尔曲线在线工具：

https://cubic-bezier.com

3.2 触发过渡的条件

1. CSS 伪类选择器， :hover、:active、:focus、:checked 等
2. CSS 媒体查询
3. JavaScript 事件

关键帧

@keyframes 关键帧名字 {
    from {}
    to {}
}

@keyframes 关键帧名字 {
    0% {}
    100% {}
}

@keyframes 关键帧名字 {
    from {}
    40%{}
    80%{}
    to {}
}

@keyframes 关键帧名字 {
    100% {}
}

关键帧与元素的关系：

1. 一个元素可以设置多个关键帧
2. 一个关键帧也可以设置给多个元素

动画相关 CSS 属性

CSS 属性名含义值
animation-name设置关键帧关键字名字，多个使用逗号分隔
animation-duration动画持续时间时间单位：s、ms
animation-delay动画延迟时间时间单位：s、ms
animation-timing-function动画运动曲线曲线运动、分步运动
animation-iteration-count动画执行次数数字，infinite表示无限次
animation-direction动画运动方向normal：默认值。
reverse：反向。
alternate：交替运动。
alternate-reverse：反向交替。
animation-play-state动画运动状态running：正在运动。
paused：暂停运动
animation-fill-mode动画开始前和结束后状态none：默认值。
forwards：结束后处于结束帧样式。
backwards：开始前处于起始帧样式。
both：同时设置forwards和backwards
animation动画复合属性多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟

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 解决问题也不是最优的。知道有这个东西就行

jxy9998
关注
专栏目录
CSS一些基本问题总结
YouYi__的博客
09-09 254
一、box-sizing属性介绍 含义: box-sizing 是用来设置盒模型的尺寸 属性: box-sizing: border-box; 总宽高不包含padding和border box-sizing: content; 总宽高包含padding和border 二、标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height) CSS盒子模型与低版本IE的盒子模型的
【css】问题集锦
Beam
08-20 1229
一、fixed超出窗口大小部分无法滚动 问题： 使用fixed固定一个div，当这个div高度大于窗口高度后，超出的内容无法滚动查看。 解决办法： 在设置fixed的div添加样式 height:100%;overflow:auto; 即可。 据说还可以设置样式 max-height:100%;overflow:auto; 即可。 具体还是根据情况设置当前div的宽度，若当前div宽度是个固定值不想设置成百分数，则： 可以在外层包裹一个div设置为position:fixed;height:100%;ove
CSS外边距合并（塌陷）和解决方法
weixin_72322475的博客
07-11 1890
总结并举例论证了外边距合并（塌陷）的相关情况和解决方法
CSS中的margin塌陷问题
m0_62711871的博客
04-15 2306
在web学习中我们可能会遇到一个问题：margin塌陷问题。 margin塌陷现象有两种：兄弟关系的盒子和父子关系的盒子。 1.兄弟关系盒子：垂直布局的块级元素，上下的margin会合并，取最大的一个margin作为两者间的距离。 解决方法：只给其中一个盒子设置margin值。 2.父子关系盒子：相互嵌套的块级元素，子元素的margin-top会作用在父元素上，使父元素和子元素一起向下移。 例如： <style> *{ margin: 0;
css之margin塌陷
最新发布
蔡里都傻的博客
07-22 445
实际上导致了整个.parent元素向下移动了20px，使得.parent的顶部与页面顶部之间的间距增加了20px，而不是.child元素内部增加了20px的间距。.child元素的margin-top现在正确地在其内部产生了20px的间距，而.parent元素的顶部没有移动。预期效果：如果margin塌陷没有发生，你可能会期望粉色的.child元素在其顶部有20px的空白区域（即margin），这个空白区域只影响.child元素，.parent元素的顶部不会移动。
CSS基础知识：margin塌陷问题和解决方案
我就知道你会来，我们一起进步吧！
02-04 783
margin塌陷问题，对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
CSS-margin塌陷问题
oah的博客
09-12 461
互相嵌套 的 块级元素，子元素的margin-top会作用在父元素上。
modern-css-reset：用于现代Web开发的基本CSS重置
02-24
现代CSS重置 您可以将其用作CSS项目基础的微小重置。 您可以阅读其。 安装 NPM： npm install --save-dev modern-css-reset 纱： yarn add modern-css-reset Unpkg CDN： < link rel =" stylesheet " href ...
css-in-js-utils:JS解决方案中CSS的有用实用程序功能
05-02
即使已经有很多不同的库，它们基本上都使用相同的机制和实用程序。 实用工具 isUnitlessProperty(property) normalizeProperty(property) resolveArrayValue(property, value) unprefixProperty(property) ...
cssforjs-exercises:Josh W ComeauCSS课程中的练习=> css-for-js.dev
05-05
1. **CSS基础**：练习可能涵盖选择器、盒模型、布局（如流体布局、网格布局、Flexbox和Grid）、响应式设计、颜色、字体、边距和填充等基本概念。 2. **CSS与JavaScript的交互**：学习如何使用JavaScript操作CSS样式...
CSS-in-HTML-basics-Internal-CSS:这基本上是HTML文档中CSS。 嵌入式css意味着您可以在html文件的头部内使用和指定css代码及其需要执行的操作。 因此，通常按照通常如何设置HTML文件的方式完成所有操作，但是在头部内部，我们使用了关键字 and inside we use the keyword type and set it equal to "textcss", then we use the keyword media and set it equal to
04-12
这基本上是HTML文档中CSS。 嵌入式css意味着您可以在html文件的头部内使用和指定css代码及其需要执行的操作。 因此，通常可以按照通常HTML文件设置方法完成所有操作，但是在头内部使用关键字<style>，在内部...
awesome-css-learning：仅限于最佳CSS学习资源的小清单
01-31
1. **CSS基础**：包括选择器（如元素选择器、类选择器、ID选择器）、盒模型（content, padding, border, margin）、布局（display属性，如block, inline, inline-block, flex, grid）以及颜色、字体、背景等基本概念...
margin塌陷和margin重合问题的解决方法总结
Celester_best的博客
10-22 2772
margin塌陷和margin重合问题的解决方法总结
CSS：margin“塌陷”的处理方式
qq_42273666的博客
06-25 269
方式一：给父级元素添加overflow: hidden;或者 overflow: auto;方式三：给父级元素添加border: 1px solid transparent;方式四：给父级元素添加定位，比如：position: absolute;方式五：给父级元素添加浮动，比如：float: left;方式二：给父级元素添加padding: 1px;方式六：给父级元素添加伪元素。
CSS之margin塌陷问题
zqr4818的博客
06-10 301
CSS之margin塌陷问题
margin塌陷和margin合并问题及解决方案
10-26 1153
一，margin塌陷 父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值. 正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位. 但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样. <!DOCTYPE html> <html> <head>...
CSS的margin失效、塌陷和兼容问题
一杯清泉
07-06 1854
在标准文档流中，竖直方向的margin不叠加，以较大的为准，水平方向不影响，可以叠加。注意是标准文档流，不是标准文档流不存在塌陷现象。 要想使p的margin生效，需要给父布局的div添加border，否则margin无效。margin表示兄弟和兄弟之间的距离，最好不要使用margin表示父子之间的距离，要善于使用padding。 四、margin的IE6兼容问题 1、margin双倍问题 浮动方向和margin方向相反，左浮动+右margin2、IE6的三像素
CSS之margin塌陷
dachaoxuexi的博客
02-17 789
CSS中的外边距塌陷（Margin Collapse）问题是指在垂直方向上，当两个或多个块级元素的边距相遇时，它们之间的距离不是它们各自边距的总和，而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。.ac和.bc有上下margin但是只生效了一个最大值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jxy9998

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值