CSS应用的小问题总结
1.两个元素换行书写时,在实际的布局中展示为两个元素之间多了一个区间(这个区间通常是因为代码在换行时,解析会自动默认为一个空格字符),所以在实际应用时,如果想要将两个元素完全无缝隙的放置在一起并排显示时,应该注意使用浮动和定位,或者可以通过设置父级元素的font-size:0;的方法;
2.使用绝对定位或者固定定位时,会使元素脱离文档流,此时元素会在文档层的上方显示,可能导致其他元素被挡在下方,不能正常显示出来。此时就需要设置z-index来解决将脱离文档流的元素设置层级,以达到显示效果;
3.很多时候,对于要显示外框线的元素,我们都会下意识的去设置它的边框border的属性值。虽然这样做是对的,但是在固定了大小的容器中,而要显示的元素的大小刚刚好,那么此时就需要设置outline来替代border。(outline只能四个边同时设置,而border可以分别设置单边的属性,使用时应该根据需求来设置)。
CSS应用的小问题总结的更多相关文章
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 来一波CSS兼容问题小总结吧
1.DOCTYPE 影响 CSS 处理; 2.火狐 谷歌等浏览器 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 从零开始学习html(十五)css样式设置小技巧——下
六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...
- CSS sprites(css 精灵):将小图标整合到一张图片上
一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...
- JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- css浮动布局小技巧
父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...
- 纯 css 打造一个小提示 tooltip
最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...
随机推荐
- windows下docker的安装及常用命令学习
docker search 镜像名 本文主要介绍Docker在Windows下的安装.关于Docker的介绍和文档在其官网中可以找到:http://www.docker.com .安装环境:Windo ...
- Flask 微博三方登录
1.进入微博开发平台(https://open.weibo.com/),注册账号,填写开发者信息 2.创建应用.创建应用完成后,可以在"我的应用 - 应用信息"中查看您所创建应用的 ...
- ScreenOper
/// <summary> /// 屏幕操作类 /// Add by 2017-07-25 /// 1.屏幕生成Image 方法 /// 2.Image按百分比压缩 方法 /// 3.Im ...
- Mac 安装 Ruby, Rails 运行环境
对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境. 次安装方法同样适用于产品环境! ...
- CentOS 7 安装配置 Gitlab
centos:http://www.centos.org/download/ download:https://about.gitlab.com/downloads/ update:https://g ...
- 翻译api调用
<?php function language($value,$from="auto",$to="auto") { $value_code=urlenco ...
- 选择 Python3.6 还是 Python 3.7
转自:白月黑羽在线教程:http://www.python3.vip/doc/blog/python/home/ 选择 Python3.6 还是 Python 3.7 Python 3.7 已经发布了 ...
- Ajax(javascript)案例
一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...
- spring boot 与 thymeleaf (2): 常用表达式
在asp.net mvc 中, 有一个视图解析器, 可以支持Razor语法. 使用起来, 是非常的方便, 并且, 写在前台页面的后台方法, 是可调试的. 但是在java中, 目前我还没有接触到, 像. ...
- SSO - 开篇引例
进公司以来, 所做的产品中, 下面的子系统就没有少于10个的, 其中有的是.net做的, 有的是java做的, 还有安卓端, ios端. 那么这么多子系统, 我可能需要访问其中的多个(同一平台), 我 ...