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 ...
随机推荐
- tensorflow 迭代周期长,每个epoch时间变慢
理论上,session启动后,每个epoch训练时间应该是差不多,而且不会因为迭代周期变长,epoch时间变慢.原因是session里定义了tf.op导致的,每一次迭代都会在graph里增加新的节点, ...
- java并发编程知识点备忘
最近有在回顾这方面的知识,稍微进行一些整理和归纳防止看了就忘记. 会随着进度不断更新内容,比较零散但尽量做的覆盖广一点. 如有错误烦请指正~ java线程状态图 线程活跃性问题 死锁 饥饿 活锁 饥饿 ...
- 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 ...
- vue android低版本 白屏问题 你是不是用了Object.assign ??
问题描述 在部分比较低版本的手机中,发现apk安装后白屏,但是大部分手机都能安装. 本人在使用android4.4时候,也是安装后打开白屏. 原因: 代码写法不兼容 this.user = Objec ...
- C++版 - Leetcode 69. Sqrt(x) 解题报告【C库函数sqrt(x)模拟-求平方根】
69. Sqrt(x) Total Accepted: 93296 Total Submissions: 368340 Difficulty: Medium 提交网址: https://leetcod ...
- [Maven]Maven如何得到单独的单元测试报告
----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...
- kubernetes的安装
获取源码 最新安装包下载地址,GitHub下载地址 本次实验的1.10.0的二进制包下载,百度网盘 机器环境 Kubernetes Roles IP地址 Hostname Master 192.168 ...
- 项目实战3—实现基于Keepalived+LVS的高可用集群网站架构
实现基于Keepalived高可用集群网站架构 环境:随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,目前业务已经通过集群LVS架构可做到随时拓展,后端 ...
- Ubuntu 18.04.1 搭建Java环境和HelloWorld
一.搭建Java环境 系统环境 Ubuntu 18.04.1 JDK 8 IDEA 2018.2 1.下载JDK 官网地址:http://www.oracle.com/technetwork/java ...
- MyBatis源码解析(五)——DataSource数据源模块之非池型数据源
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6675633.html 1 回顾 上一篇中我解说了数据源接口DataSource与数据源工厂 ...