1--- 样式最后的{}后面, 不能有分号 ;

2---- display:inline-block 后, 元素间会有间隙    原因:  由换行或者回车导致的。

  解决一: 只要把标签写成一行或者标签直接没有空格,就不会出现间隙。 但是这种方式是不太可靠,存在太多不可控的因素导致失效,

      例如:代码生成工具、代码格式化、或者其他人修改了代码等等。下面列举了各种去掉间隙的方法,是否适合需要看具体的应用场景了 

      <span>中间不留间隙</span><span>中间不留间隙</span><span>我是一个span</span><span>我是一个span</span>

  解决二:结束标签和下一个开始标签同一行

     <span>我是一个span
</span><span>我是一个span
</span><span>我是一个span
</span><span>我是一个span</span>
 解决三:利用HTML注释标签
     <span>我是一个span</span><!--
-->
<span>我是一个span</span><!--
-->
<span>我是一个span</span><!--
-->
<span>我是一个span</span>
 解决四:把span标签的中间的结束标签去掉,只留最后一个闭合标签, 这样间隙就没有了。为了兼容IE6/IE7。(美团用这个方法)
     <span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>

开始的几个的li标签没有闭合

  解决五:在父容器上使用font-size:0;可以消除间隙-----对于Chrome有默认最小字体大小限制,考虑到兼容性,需要取消字体大小限制 
                                      在父容器样式加上: .demo{ font-size:0;-webkit-text-size-adjust:none }

                     

  解决六:   浮动, 需要清除浮动

总结别人的:

  在移动端的页面中,个人倾向于设置font-size:0这种方法来清除掉。

inline-block间隙问题总结, ,style一个样式后面 多加了一个 分号; 导致 样式失效的更多相关文章

  1. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  2. 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  3. <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

    <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

  4. Umbraco Form 中需要为一个Form的某个field设置特别的CSS样式

    在项目开发中,我有一个需求,需要建立一个页面,这个页面上有一个form, 这个form上有一个checkbox, 就是普通的接受terms & conditions, 类似下图 这个项目中的U ...

  5. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  6. WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...

  7. ASP.NET加载主题和皮肤样式的各种方式

    一.加载主题(皮肤.样式表)的多种方式 除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外,还可以通过配置文件为多个页面批量加载主题,另外,还可以通过改变页面的The ...

  8. 样式的操作-访问外部定义的css样式

    JS对css的控制力非常强,甚至可以控制外部定义的css样式 ———————————————————————— <style>            .myclass{           ...

  9. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

随机推荐

  1. python语法_字符类型

    str(string): 字符串   str(被转换的数据) int(interger):整数   int(被转换的数据)

  2. 构建一个可以统计 qps 的nginx服务的Dockerfile

    github 项目地址: https://github.com/SilentCC/nginx_lua_qps_count nginx 是经常会用到的web 服务器,它有出色的并发性能,因此尝尝被用来当 ...

  3. PAT1018 Public Bike Management【dfs】【最短路】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805489282433024 题意: 给定一个图,一个目的地和每个节 ...

  4. Codeforces 1136D - Nastya Is Buying Lunch - [贪心+链表+map]

    题目链接:https://codeforces.com/problemset/problem/1136/D 题意: 给出 $1 \sim n$ 的某个排列 $p$,再给出若干 $(x,y)$ 表示当序 ...

  5. HTML 5 拖放 drag dragend dragover ....

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. // http://www.w3school.com.cn/html5/html_5_draganddrop.asp dataTrans ...

  6. postman进行接口测试

    1.添加header 2.入参为json格式 3.添加cookie 4.上传文件

  7. axios实现拦截器

    项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置. // ...

  8. 001-CPU多级缓存架构

    一.基本概念 大致关系: CPU Cache --> 前端总线 FSB (下图中的Bus) --> Memory 内存 CPU 为了更快的执行代码.于是当从内存中读取数据时,并不是只读自己 ...

  9. python框架之Flask(1)-Flask初使用

    Flask是一个基于 Python 开发并且依赖 jinja2 模板和 Werkzeug WSGI 服务的一个微型框架,对于 Werkzeug 本质是 Socket 服务端,其用于接收 http 请求 ...

  10. grunt 打包 分解(并非原创)

    1. require('time-grunt')(grunt); Time how long tasks take. Can help when optimizing build times任务执行时 ...