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. POJ 2782

    #include <iostream> #include <algorithm> #define MAXN 100005 using namespace std; int _m ...

  2. django-suit报错解决-----from suit.apps import DjangoSuitConfig

    (py27) [root@test SimpletourDevops]# python manage.py makemigrationsTraceback (most recent call last ...

  3. Nuget 打包

    https://github.com/NuGetPackageExplorer/NuGetPackageExplorer 下载地址 1 打包的dll 中没有依赖 最简单的情况,保证dll放到lib下, ...

  4. ScreenOper

    /// <summary> /// 屏幕操作类 /// Add by 2017-07-25 /// 1.屏幕生成Image 方法 /// 2.Image按百分比压缩 方法 /// 3.Im ...

  5. IE不兼容document.getElementsByClassName

    在DOM3里已经加入了getElementsByClassName这个方法,然而IE9.10以外的其它版本均不支持,这是一块伤痛啊! 目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果 ...

  6. dubbo-001--前言

    1,前言: 第一次了解dubbo是在15年刚工作的时候在瑞友,项目是给凯撒旅游公司签证部做一个签证系统,项目需要调用一些凯撒的方法,比如权限.部门信息,跟签证相关的一些如签证国家城市.领区啥玩意的,等 ...

  7. dockerfile简述

    作用 Dockerfile的内容是一坨可以执行的代码(或者说是指令)(docker的DSL),这些代码使得创建镜像的操作可以复用以及自动化. 指令格式 Dockerfile的指令格式很简单: INST ...

  8. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  9. 数据库设计 Step by Step (1)——扬帆启航

    引言:一直在从事数据库开发和设计工作,也看了一些书籍,算是略有心得.很久之前就想针 对关系数据库设计进行整理.总结,但因为种种原因迟迟没有动手,主要还是惰性使然.今天也算是痛下决心开始这项卓绝又令我兴 ...

  10. 【原创】贡献一个项目中用到的js身份证验证-超级准!!!

    前言 百度百科解释:身份证号码 首先贡献一个大神的链接:js验证身份证超准 代码 function checkIdcard(idcard) { var Errors = new Array( &quo ...