1.两个元素换行书写时,在实际的布局中展示为两个元素之间多了一个区间(这个区间通常是因为代码在换行时,解析会自动默认为一个空格字符),所以在实际应用时,如果想要将两个元素完全无缝隙的放置在一起并排显示时,应该注意使用浮动和定位,或者可以通过设置父级元素的font-size:0;的方法;

2.使用绝对定位或者固定定位时,会使元素脱离文档流,此时元素会在文档层的上方显示,可能导致其他元素被挡在下方,不能正常显示出来。此时就需要设置z-index来解决将脱离文档流的元素设置层级,以达到显示效果;

3.很多时候,对于要显示外框线的元素,我们都会下意识的去设置它的边框border的属性值。虽然这样做是对的,但是在固定了大小的容器中,而要显示的元素的大小刚刚好,那么此时就需要设置outline来替代border。(outline只能四个边同时设置,而border可以分别设置单边的属性,使用时应该根据需求来设置)。

CSS应用的小问题总结的更多相关文章

  1. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  2. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  3. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  4. 来一波CSS兼容问题小总结吧

    1.DOCTYPE 影响 CSS 处理; 2.火狐 谷歌等浏览器 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  5. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  6. 从零开始学习html(十五)css样式设置小技巧——下

    六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...

  7. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  8. JQuery和html+css实现带小圆点和左右按钮的轮播图

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...

  9. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  10. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

随机推荐

  1. ajax请求报语法错误

    今天改代码修正完一个ajax请求后,调试发现出错进error方法,查看错误信息报语法错误,具体是调用parseJSON方法时出错,因为我是用json方式传递的参数,所以第一时间查看data参数是否正确 ...

  2. shopify网站转化率优化之结账页checkout优化

    昨天分享了“利用GOOGLE地图API实现shopify结账页checkout地址自动填写地址字段”是个非常屌的功能,但shopify默认的结账页checkout是这样的如图 [caption id= ...

  3. 05-01 Java 方法

    方法 方法定义.格式: /* 方法:完成特定功能的代码块. 注意:在很多语言里面有函数的定义,而在Java中函数被称为方法. 方法格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数 ...

  4. ssh-key的复制

    执行ssh-keygen 生产钥 在b主机root目录创建.ssh文件夹 在a主机输入ssh-copy-id root@*.*.*.* 就把公钥复制过去了 命令:scp 不同的Linux之间copy文 ...

  5. Redmine 删除 project 中的 public 选项

    缘由:由于manager的错误设置,导致本不该public的项目设置成public 诉求:去除项目新建及设置时的public勾选 1.查找日志 由于redmine是拿ruby编写的,且主页等都是由ht ...

  6. Android在代码中获取meta标签内容

    最近写SDK需要获取<meta>标签的值,网上资料很多~分享是件好事~我很快就找到了相关资料. 下面贴上代码: ApplicationInfo appInfo = null; String ...

  7. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  8. 即时通讯App怎样才能火?背后的技术原理,可以从这5个角度切入

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云视频发表于云+社区专栏 关注公众号"腾讯云视频",一键获取 技术干货 | 优惠活动 | 视频方案 社交场景 ...

  9. angularjs文档下载

    路过 存文件而已

  10. MVC使用Flash来显示图片

    Insus.NET实现一些网站模版,如用户能动态变更网站的头,中间或是脚的部位,就是不太确定用户上传的是图片,还是Flash.因此想到一个较好的解决方法,就是使用Flash的组件去显示来源的图片或是. ...