几乎没用到过的css 样式
1. :focus 选择器用于选取获得焦点的元素。
案例:http://www.w3school.com.cn/tiy/t.asp?f=css_sel_focus
2. clearfix清除浮动闭合容器之:after与:before
首先对伪类:before与:after做下注脚
:before 伪元素在元素之前添加内容。
:after 伪元素在元素之后添加内容。
这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。
好了,进入正题
在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况,
可能很多朋友给父级元素用overflow:hidden简单粗暴的解决,但这种方式有弊端,一是在IE6下不能完美解决,二是假如在该模块有定位的层就有定位层显示不完整的可能。
也有可能有些朋友是在父级元素里最后添加一个<div style=”clear:both”></div>来解决这个问题,但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的。
案例:
< pre >.clearfix:after { content : "." ; display : block ; height : 0 ; clear : both ; visibility : hidden ;} * html .clearfix{zoom: 1 ;} /* IE6 */ *+html .clearfix{zoom: 1 ;} /* IE7 */ |
几乎没用到过的css 样式的更多相关文章
- bootstrap-全局css样式
bootstrap-全局css样式 1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container) 流式版心(.con ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- css样式兼容各个浏览器时的部分总结
[本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- Html+CSS基础之CSS样式
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...
- 百万年薪python之路 -- 前端CSS样式
CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...
- 前端CSS样式操作
目录 字体和文字 设置标签的宽高 字体属性 文字的属性 文字对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 背景属性 背景图片 边框 画圆 di ...
随机推荐
- Chromium on Android: Android在系统Chromium为了实现主消息循环分析
总结:刚开始接触一个Chromium on Android时间.很好奇Chromium主消息循环是如何整合Android应用. 为Android计划,一旦启动,主线程将具有Java消息层循环处理系统事 ...
- Razor和HtmlHelper的使用意义
Razor和HtmlHelper的使用意义 写这篇文档的目的是为了给初学MVC的同伴们介绍在MVC的View中的两个新概念,能有利于我们更快,更好的开发项目.一个是视图引擎,一个是HtmlHlper. ...
- RAC下一个Fatal NI connect error 12170.错误处理
原创作品,离 "深蓝blog" 博客,欢迎转载,请务必注明转载的来源.否则有权追究版权责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/a ...
- RSA加密解密(PHP Demo)
$private_key = '-----BEGIN RSA PRIVATE KEY----- MIICXQIBAAKBgQDpoODVtnSztGyb//p+g/Ob36jb3jzWzS2qovOj ...
- 锋利的KATANA
锋利的KATANA 阅读目录 ASP.NET 发展历程 走进Katana的世界 使用ASP.NET/IIS托管Katana-based应用程序 使用自定义Host(self-host)托管Katana ...
- 深入探讨 Java 类加载器[转]
原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-classloader/index.html 类加载器(class loader)是 Java™ ...
- 文《左右c++与java中国的垃圾问题的分析与解决》一bug分析
文<左右c++与java中国的垃圾问题的分析与解决>一bug分析 DionysosLai(906391500@qq.com) 2014/10/21 在前几篇一博客<关于c++与jav ...
- Jquery学习(三)选择
1.Jquery最重要的是选择. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最经常使用的,最经常使用的一般也是 ...
- JS 精度问题处理
/除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) ...
- 中英文url解码vc++源程序
本文主要讨论中文url解码实现问题,没有具体解说url编码,utf-8编码.想对编解码问题有更加具体的了解,请查阅相关文档 url编码:实质字符ascii码的十六进制.仅仅是略微有些变动,须要在前面加 ...