CSS样式适配杂记
1.问:input框的对齐,制作类似百度搜索框的时候,发现IE下前面输入框和后面按钮总是不能对齐。
解答:给input框增加vertical-align:bottom;
2.问:IE下display:inline-block不起作用。
答:display:inline-block后面增加*display:inline;*zoom:1;具体参见:带你深入剖析inline-block属性值的前世今生。该文对inline-block有详细分析。
3.问:如何取消inline-block元素之间的间距。
答:1.给父盒子设置font-size:0,再把当前元素的font-size设回。2.给当前元素设置float:left。
4.问:如何清除浮动
答:1.在需要清除浮动的盒子内添加额外的元素并设置clear:both.
2.需要清除浮动的盒子设置overflow:hidden。前提是该盒子没有height属性。
3.给父元素添加.clearfix类,并设置样式如下:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
} .clearfix:after {
clear: both;
}
.clearfix {
*zoom:;
}
5.height和line-height:行内元素没有height属性。
6.div居中:给父元素设置文字居中,再给子元素设置margin:0 auto。
7.让div刚好占满整个屏幕:给div本身和其所有父元素(html,body...)设置height和width100%;
8.需要事件触发的动画用transition实现,不需要事件触发的动画用animation实现。
CSS样式适配杂记的更多相关文章
- css样式重置 移动端适配
css 默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- Yii2 assets注册的css样式文件没有加载
准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
随机推荐
- CUDA 动态编译(NVRTC)简记
在linux上用sublime text 3上写完CUDA代码和c++代码后,想用code::blocks去一并编译,就像visual studio那样一键编译运行,但发现在code::blocks上 ...
- Python使用Flask框架,结合Highchart处理jsonl数据
1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- man中文手册安装
转载自 https://www.cnblogs.com/fyc119/p/7116295.html man中文手册安装 下载源码 wget https://src.fedoraproject.org/ ...
- Servlet监听器的使用
Servlet监听器的使用 制作人:全心全意 在Servlet技术中已经定义了一些事件,并且可以针对这些事件来编写相关的事件监听器,从而对事件做出相应的处理.例如,想要在Web应用程序启动和关闭时来执 ...
- C. Day at the Beach
codeforces 599c C. Day at the Beach One day Squidward, Spongebob and Patrick decided to go to the be ...
- hdu 5015 矩阵快速幂(可用作模板)
转载:http://blog.csdn.net/wdcjdtc/article/details/39318847 之前各种犯傻 推了好久这个东西.. 后来灵关一闪 就搞定了.. 矩阵的题目,就是构造 ...
- js 发布订阅模式
//发布订阅模式 class EventEmiter{ constructor(){ //维护一个对象 this._events={ } } on(eventName,callback){ if( t ...
- 【Google Chrome】Google Chrome快捷键大全
相信很多朋友在使用过Google Chrome之后,就会不想回到原先使用的浏览器了,尤其是IE.没错Google Chrome的优点很多,已经获得了一大部分网友们的用户,软件志现在也是Firefox+ ...
- Docker website
https://github.com/docker/labs/ (nguo123gmail Cooooos123!) Docker Tutorials and Labs At this time ...
- 建立DJANGO的自定义TAG
DJANGO的TAG分为三类: • simple_tag : Processes the data and returns a string• inclusion_tag : Processes th ...