CSS回顾（常见问题解决）

曾经终败给现在 2023-06-03 09:59 10阅读 0赞

# 一.margin的塌陷解决： #

## BFC （block format context）块级格式化上下文格式 ##

### display:inline-block ###

### float:left / right ###

### overflow: hidden ###

### position: absolute ###

# 二.float #

## 1.浮动元素产生了浮动流 ##

## 2.所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性（inline）的元素以及文本都能看到浮动元素,有点类似于叠层 ##

## 3.清除浮动流 ##

### 1.div\{clear:both\} ###

### 2.伪元素辅助（三件套解决浮动问题） ###

### .wrapper::after\{ ###

### 　　content:''; ###

### 　　clear:both;（只有块级元素才能设置clear） ###

### 　　display:block; ###

### \} ###

。。。

### <span>无聊</span> ###

### 伪元素（天生就存在，行级元素，可以当元素来操作，但是没有元素结构）：span::before ,    span::after\{content:''\} ###

### 如果想设置宽高，必须设置成Inline-block。 ###

。。。

### 3.BFC帮助 ###

### position:absolute; float:left / right;打内部把元素转换成inline - block;意思就是你的内容有多少，边框就有多大，会紧紧局限 ###

# 三.文字溢出处理（三件套） #

## white-space: nowrap  (没有换行) ##

## overflow:hidden （超出DIV就隐藏） ##

## overtext:ellipsis（超出文本变成小圆） ##

## ##

# 四.加载问题 #

### 图片宽高 ###

### <div>淘宝网</div> ###

### div\{ ###

### 　　display: inline - block; ###

### 　　background-image:url(\#); ###

### 　　background-size:200px 80px; ###

### 　　width:200px; ###

### 　　height:80px\} ###

### 要在图片没加载出来的时候，即删了CSS也能显示出东西 ###

## 两个解决办法： ##

### 1.white-space: nowrap ###

### overflow:hidden ###

### text - indent :200px (文本缩进) ###

### 2.height:0px ###

### overflow:hidden ###

### padding-top:80px(通过padding-top来撑开) ###

# 五.行级元素只能嵌套行级元素 #

# 块级元素能嵌套任何元素 #

## 但是<p><div></div></p>是不可以的，p标签里不能套块级元素 ##

## 还有<a><a></a></a>是不可以的，a标签里不能套a标签 ##

# 六.解决图片间隔（因为inline和inline-block都是文本类属性，中间有文字分隔符） #

## 1.margin-left:-6px，压缩后会重叠部分 ##

## 2.但是上面的方法不太好，最好就是把<img><img>之间的空格去掉，然后显示的文本分隔符就会消失。 ##

！调对齐方式，vertical-align

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关实战回顾：Java应用部署过程中常见问题及解决策略

在Java应用部署过程中，可能会遇到一些常见问题。以下是一些常见的问题以及相应的解决策略： 1. **部署失败**：可能由于配置文件错误、依赖未安装等原因导致。解决方案是仔细

痛定思痛。/ 2024年12月01日 06:48/ 0 赞/ 41 阅读

相关 CSS回顾（常见问题解决）

一.margin的塌陷解决： BFC （block format context）块级格式化上下文格式 display:inline-block float

曾经终败给现在/ 2023年06月03日 09:59/ 0 赞/ 11 阅读

相关 HTML/CSS 内容简单回顾

HTML内容简单回顾：什么是HTML：超文本标记语言 p标签：段落标签 br标签：简单换行 h1-h6：标题标签 hr标签：水平分割线，华丽的分割线 font

太过爱你忘了你带给我的痛/ 2022年12月12日 15:03/ 0 赞/ 133 阅读

相关 CSS若干常见问题小结

1.边框部分问题【边框为虚线】 border:1px dashed ddd; 【边框为实线】 border:1px solid

柔光的暖阳◎/ 2022年08月06日 10:07/ 0 赞/ 235 阅读

相关 CSS常见兼容性问题及解决方法

最近在研究浏览器兼容性问题，所以准备写篇愽客记录一下（会持续更新）；浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。我

r囧r小猫/ 2022年06月13日 23:36/ 0 赞/ 410 阅读

相关 CSS 常见问题

1.input输入框点击有边框的解决办法点击输入的时候不需要input输入框有边框显示，例如按钮就不需要，如果设置了border-radius，在点击的时候还有边框就会超

超、凢脫俗/ 2022年05月19日 07:43/ 0 赞/ 257 阅读

相关 CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE… FireFox Chrome

女爷i/ 2022年04月17日 02:46/ 0 赞/ 324 阅读

相关今日关于HTML/CSS回顾

2013/2/2 控制元素位置一般用div包裹下，容易操作 /\一款按钮css\/ .button1\{ background-c

Love The Way You Lie/ 2022年03月31日 10:08/ 0 赞/ 162 阅读

相关 css 常见问题

隐藏滚动条并可以滚动内容 1.计算滚动条宽度并隐藏起来页面向右偏移一定的距离。可以使用绝对定位或者translate。 2.使用三个容器包围起来，不需要计算滚动条

Bertha 。/ 2022年03月18日 03:06/ 0 赞/ 270 阅读

相关 CSS&ECMAScript回顾

css: 层叠样式表作用: 渲染页面提供工作效率,将html和样式分离和html的整合方式1:内联样式表通过标签的style属性 <xxx

ゝ一纸荒年。/ 2022年03月16日 10:38/ 0 赞/ 241 阅读