一.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. [原创]K8Cscan插件之端口扫描C#源码

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  2. [原创]K8Cscan插件之Mysql密码爆破

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  3. odoo开发笔记 -- 模型字段定义中设置默认值

    例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res ...

  4. mysql 开发基础系列1 表查询操作

    在安装完数据库后,不管是windows 还是linux平台,  mysql的sql命令都大同小异,相关命令都是相同的,每个命令结束后 都以  ;  结尾, 注意在windows平台中表名是不区分大小写 ...

  5. 在Mac OSX上配置Appium+Android自动化测试环境

    前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...

  6. Android--Service之AIDL传递系统基本类型数据

    前言 前面讲解了Service的一些基本内容.但是对于绑定服务传递数据,只局限于本地服务,无法使用服务进行跨进程间的交互.如果需要用到跨进程交互的话,需要用到一个新的技术-AIDL,这篇博客就针对AI ...

  7. Flink集群部署

    部署方式 一般来讲有三种方式: Local Standalone Flink On Yarn/Mesos/K8s… 单机模式 参考上一篇Flink从入门到放弃(入门篇2)-本地环境搭建&构建第 ...

  8. XSS漏洞解析(一)

    以前写程序没有怎么关注这些网络安全问题,随着自己写的程序越来越多,开始关注了网络安全了. 一.什么是XSS XSS(Cross-Site Scripting) 跨站脚本是一种经常出现在web应用程序的 ...

  9. mysql 多表删除

    删除用户数据,我们就需要删除有关用户的所有数据. 主表是有数据的,其他关联表不一定有数据,我们可以用left join 来关联删除的表. eg:table1 是主表,t2,t3是关联表. SELECT ...

  10. Python numpy中矩阵的用法总结

    关于Python Numpy库基础知识请参考博文:https://www.cnblogs.com/wj-1314/p/9722794.html Python矩阵的基本用法 mat()函数将目标数据的类 ...