一.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

CSS回顾(常见问题解决)的更多相关文章

  1. Linux运维常见问题解决集锦【转】

    作为linux运维,多多少少会碰见这样那样的问题或故障,用点心,平时多注意积累,水平肯定越来越高. 下面就是常见问题解决集锦:   1.shell脚本不执行 问题:某天研发某同事找我说帮他看看他写的s ...

  2. springmvc环境搭建以及常见问题解决

    1.新建maven工程 a)  打开eclipse,file->new->project->Maven->Maven Project b)  下一步 c)   选择创建的工程为 ...

  3. ubuntu安装navicat及常见问题解决

    1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...

  4. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  5. OpenStack安装部署管理中常见问题解决方法

    一.网络问题-network 更多网络原理机制可以参考<OpenStack云平台的网络模式及其工作机制>. 1.1.控制节点与网络控制器区别 OpenStack平台中有两种类型的物理节点, ...

  6. Web Deploy发布网站及常见问题解决方法(图文)

    Web Deploy发布网站及常见问题解决方法(图文) Windows2008R2+IIs7.5 +Web Deploy 3.5 Web Deploy 3.5下载安装 http://www.iis.n ...

  7. 接口测试之——Charles抓包及常见问题解决(转载自https://www.jianshu.com/p/831c0114179f)

    简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用,安装Charl ...

  8. charles抓包的安装,使用说明以及常见问题解决(windows)

    charles抓包的安装,使用说明以及常见问题解决(windows) https://blog.csdn.net/zhangxiang_1102/article/details/77855548

  9. Python爬虫编程常见问题解决方法

    Python爬虫编程常见问题解决方法: 1.通用的解决方案: [按住Ctrl键不送松],同时用鼠标点击[方法名],查看文档 2.TypeError: POST data should be bytes ...

  10. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

随机推荐

  1. tensorflow 迭代周期长,每个epoch时间变慢

    理论上,session启动后,每个epoch训练时间应该是差不多,而且不会因为迭代周期变长,epoch时间变慢.原因是session里定义了tf.op导致的,每一次迭代都会在graph里增加新的节点, ...

  2. java并发编程知识点备忘

    最近有在回顾这方面的知识,稍微进行一些整理和归纳防止看了就忘记. 会随着进度不断更新内容,比较零散但尽量做的覆盖广一点. 如有错误烦请指正~ java线程状态图 线程活跃性问题 死锁 饥饿 活锁 饥饿 ...

  3. update-rc.d: error: XXX Default-Start contains no runlevels, aborting.

    root@hm-saas-db:/etc/init.d# update-rc.d confluence disable update-rc.d: error: confluence Default-S ...

  4. vue android低版本 白屏问题 你是不是用了Object.assign ??

    问题描述 在部分比较低版本的手机中,发现apk安装后白屏,但是大部分手机都能安装. 本人在使用android4.4时候,也是安装后打开白屏. 原因: 代码写法不兼容 this.user = Objec ...

  5. C++版 - Leetcode 69. Sqrt(x) 解题报告【C库函数sqrt(x)模拟-求平方根】

    69. Sqrt(x) Total Accepted: 93296 Total Submissions: 368340 Difficulty: Medium 提交网址: https://leetcod ...

  6. [Maven]Maven如何得到单独的单元测试报告

    ----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...

  7. kubernetes的安装

    获取源码 最新安装包下载地址,GitHub下载地址 本次实验的1.10.0的二进制包下载,百度网盘 机器环境 Kubernetes Roles IP地址 Hostname Master 192.168 ...

  8. 项目实战3—实现基于Keepalived+LVS的高可用集群网站架构

    实现基于Keepalived高可用集群网站架构 环境:随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,目前业务已经通过集群LVS架构可做到随时拓展,后端 ...

  9. Ubuntu 18.04.1 搭建Java环境和HelloWorld

    一.搭建Java环境 系统环境 Ubuntu 18.04.1 JDK 8 IDEA 2018.2 1.下载JDK 官网地址:http://www.oracle.com/technetwork/java ...

  10. MyBatis源码解析(五)——DataSource数据源模块之非池型数据源

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6675633.html 1 回顾 上一篇中我解说了数据源接口DataSource与数据源工厂 ...