兼容之css中的hack
Hack有三种方式,谈谈其中之一的css中的hack兼容
常见的css属性hack:
/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red\9; /* IE6、IE7、IE8、IE9 识别 */
color:red\0; /* IE8、IE9 识别*/
color:red\9\0; /* 仅IE9识别 */
color:red \0; /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important 有危险*/
总之 IE太艹蛋了╭(╯^╰)╮
Bootstrap 栅格系统 学习总结
Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景。
只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap。
这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结:
(1)第一步:创建栅格系统的容器
<div class="container-fluid"><div class="row"> ... </div> </div>
解释:为了寄予栅格系统合适的排列和padding,要把每一行“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的
.container是固定宽度,居中显示:下面是Bootstrap中.container类的代码
.container-fluid是 100% 宽度:下面是Bootstrap中.container-fluid类的代码
(2)第二步:创建合适的栅格系统
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
解释:上面这段是我从Bootstrap官网复制下来的,每一个“row”代表一行,而内部的“col-md-数字”代表一个单元格; Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;
合理的选择单元格的数字配置,再往单元格中添加我们想要的内容,这样一个栅格系统就完成了!
(3)进阶:单元格的类还有其他选择 ,一共有四种: .c0l-xs- 无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机; .col-sm- 屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板; .col-md- 屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器; .col-lg- 屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器; 以上的情况可以通过下面的代码清晰的理解:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
屏幕大于992px时:.col-md-8 和.col-md-4 还处于 作用范围内,如下
屏幕在769px-992px之间时:.col-md-已失效,而.col-sm- 还处在 作用范围内,如下
屏幕宽度小于768px时,.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响,这时候就由.col-xs-起作用,如下
转载于:https://www.cnblogs.com/bycbk/p/7471840.html
兼容之css中的hack相关推荐
- css什么是hack,CSS中hack是什么意思
CSS中的hack就是针对不同的浏览器和版本来写不同的CSS样式,使其能呈现出我们想要的页面效果 CSS hack主要是用来解决浏览器的兼容问题,能够针对不同的浏览器去写不同的CSS,而且还能在不同的 ...
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
- 聊聊一直困扰前端程序员的浏览器兼容-【css】
1.为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上各大厂商出于自身利益考虑而设置的种种技术壁 ...
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16 作者:佚名 我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
- 关于CSS中浏览器兼容的问题总结二
CSS对浏览器的兼容性有时让人感觉比较麻烦,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xht ...
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- [css] css中兼容ie浏览器的前缀是什么?
[css] css中兼容ie浏览器的前缀是什么 -webkit- 谷歌 -moz- 火狐 -o- opera -ms- ie 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
- php 兼容火狐,HTML_总结CSS中火狐浏览器与IE浏览器的兼容代码,如何让你写的代码更兼容火狐 - phpStudy...
总结CSS中火狐浏览器与IE浏览器的兼容代码 如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了, ...
最新文章
- php error_reporting 详解
- php opcache 坑,PHP7 opcache缓存清理问题
- Caffe官方教程翻译(1):LeNet MNIST Tutorial
- 前OnePlus视觉设计师蔡孝永:视觉设计师都在想些什么?
- 3.2 矩阵和图像类型
- write up web:网站被黑
- php+sqlserver实现分页效果
- 直通输出设备 android kodi,【本地播放】利用Kodi媒体播放器轻松实现源码输出DTS到功放...
- Java代码中的注释详解
- cdn厂商 同兴万点_CDN牌照哪家强?阿里、腾讯牌照差异竟如此之大
- VS2015安装教程详细步骤及配置Opencv4.1.1(亲测)
- webis个人主页设计_个人网站设计及实现毕业设计论文
- Qt,C++ 仿MAC桌面程序,DOCKBAR
- 最新触摸精灵开发教程(价值300
- 计算机二级基础知识【重】
- eclipse不自动弹出提示(alt+/快捷键失效)
- 流量矿石团队成员出席“区块链技术与金融领域创新应用培训会”
- ICLR2021 - Federated Learning Paper
- SAP中带用内部订单控制的成本中心发料的成本对象确定
- SemanticKitti数据集的使用
热门文章
- java列表mvc分页_Springmvc完成分页的功能
- ssl charles 参数看不到_偷偷告诉你Charles的秘密
- C语言随机生成26个字母,菜鸟求助,写一个随机输出26个英文字母的程序
- 开发板移植mysql_数据库移植到gpu
- mysql acid介绍_InnoDB ACID模型介绍
- LeetCode-107二叉树的层次遍历 II-BFS实现
- 双目测距(一)--图像获取与单目标定
- 系统学习数字图像处理之描绘子
- python怎么运行yaml配置文件_python的技巧和方法你了解多少?
- php composer 框架,用 Composer 组建了个 PHP 框架