CSS回顾(常见问题解决)
一.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回顾(常见问题解决)的更多相关文章
- Linux运维常见问题解决集锦【转】
作为linux运维,多多少少会碰见这样那样的问题或故障,用点心,平时多注意积累,水平肯定越来越高. 下面就是常见问题解决集锦: 1.shell脚本不执行 问题:某天研发某同事找我说帮他看看他写的s ...
- springmvc环境搭建以及常见问题解决
1.新建maven工程 a) 打开eclipse,file->new->project->Maven->Maven Project b) 下一步 c) 选择创建的工程为 ...
- ubuntu安装navicat及常见问题解决
1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- OpenStack安装部署管理中常见问题解决方法
一.网络问题-network 更多网络原理机制可以参考<OpenStack云平台的网络模式及其工作机制>. 1.1.控制节点与网络控制器区别 OpenStack平台中有两种类型的物理节点, ...
- Web Deploy发布网站及常见问题解决方法(图文)
Web Deploy发布网站及常见问题解决方法(图文) Windows2008R2+IIs7.5 +Web Deploy 3.5 Web Deploy 3.5下载安装 http://www.iis.n ...
- 接口测试之——Charles抓包及常见问题解决(转载自https://www.jianshu.com/p/831c0114179f)
简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用,安装Charl ...
- charles抓包的安装,使用说明以及常见问题解决(windows)
charles抓包的安装,使用说明以及常见问题解决(windows) https://blog.csdn.net/zhangxiang_1102/article/details/77855548
- Python爬虫编程常见问题解决方法
Python爬虫编程常见问题解决方法: 1.通用的解决方案: [按住Ctrl键不送松],同时用鼠标点击[方法名],查看文档 2.TypeError: POST data should be bytes ...
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...
随机推荐
- [原创]K8Cscan插件之端口扫描C#源码
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- [原创]K8Cscan插件之Mysql密码爆破
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- odoo开发笔记 -- 模型字段定义中设置默认值
例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res ...
- mysql 开发基础系列1 表查询操作
在安装完数据库后,不管是windows 还是linux平台, mysql的sql命令都大同小异,相关命令都是相同的,每个命令结束后 都以 ; 结尾, 注意在windows平台中表名是不区分大小写 ...
- 在Mac OSX上配置Appium+Android自动化测试环境
前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...
- Android--Service之AIDL传递系统基本类型数据
前言 前面讲解了Service的一些基本内容.但是对于绑定服务传递数据,只局限于本地服务,无法使用服务进行跨进程间的交互.如果需要用到跨进程交互的话,需要用到一个新的技术-AIDL,这篇博客就针对AI ...
- Flink集群部署
部署方式 一般来讲有三种方式: Local Standalone Flink On Yarn/Mesos/K8s… 单机模式 参考上一篇Flink从入门到放弃(入门篇2)-本地环境搭建&构建第 ...
- XSS漏洞解析(一)
以前写程序没有怎么关注这些网络安全问题,随着自己写的程序越来越多,开始关注了网络安全了. 一.什么是XSS XSS(Cross-Site Scripting) 跨站脚本是一种经常出现在web应用程序的 ...
- mysql 多表删除
删除用户数据,我们就需要删除有关用户的所有数据. 主表是有数据的,其他关联表不一定有数据,我们可以用left join 来关联删除的表. eg:table1 是主表,t2,t3是关联表. SELECT ...
- Python numpy中矩阵的用法总结
关于Python Numpy库基础知识请参考博文:https://www.cnblogs.com/wj-1314/p/9722794.html Python矩阵的基本用法 mat()函数将目标数据的类 ...