几乎没用到过的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 ...
随机推荐
- matlab入门 蜂窝阵列
B{1,1}=[1,2]; B{1,2}='kitty'; B B = [1x2 double] 'kitty' celldisp(B) B{1} = 1 2 B{2} = ...
- SVD奇异值分解的几何物理意义资料汇总
学习SVD奇异值分解的网上资料汇总: 1. 关于svd的一篇概念文,这篇文章也是后续几篇文章的鼻祖~ http://www.ams.org/samplings/feature-column/fcarc ...
- Cordic 算法的原理介绍
cordic 算法知道正弦和余弦值,求反正切,即角度. 采用用不断的旋转求出对应的正弦余弦值,是一种近似求解发. 旋转的角度很讲求,每次旋转的角度必须使得 正切值近似等于 1/(2^N).旋转的目的是 ...
- Display Database Image using MS SQL Server 2008 Reporting Services
原文 Display Database Image using MS SQL Server 2008 Reporting Services With the new release of MS SQL ...
- Service与Activity与交流AIDL
深圳旅游月.终于回来了,做了很多个月,这些天来的东西会慢慢总结出来的.今天,我们正在谈论的Service小东西:沟通. 固定通信的做法比较,基本上按照写模板可以实现. 1.Service与Activi ...
- mongodb迁移
A机器上有mongodb服务,A机器要废,于是迁至B. 简单起见,依旧是在A上ps auxwww|grep mongo找到正在执行的进程: /home/admin/mongodb/mongodb-li ...
- DevExpress XtraReports 入门四 创建 Web 报表
原文:DevExpress XtraReports 入门四 创建 Web 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这 ...
- Ubuntu中编译链接Opencv应用的简便方式
安装完毕Opencv后,使用下面命令查 看编译/连接參数 pkg-config --cflags --libs opencv 可看到例如以下信息 -I/usr/include/opencv /usr ...
- 使用excel微调button调整日期
笔者:iamlaosong excel提供了一个调整的数字button.用来调节单元格增加或减少数量.因为它需要值是0-30000.所以不能直接用其调节日期.但能够使用"初始日期+调节值&q ...
- 6最好的之一 HTML5/CSS3 演示(PPT)框架
HTML 是全世界最流行的网页编程语言.而HTML5是这门语言的升级版本号.越来越多的开发人员和设计师開始使用HTML5.以下介绍几个 HTML5/CSS3 的演示工具和框架,你能够用它们来创建你的网 ...