关于css
2016-04-13 23:59
288 查看
资料
Advanced html css
讲了布局等内容 http://learn.shayhowe.com/advanced-html-css/Center
估计是关于居中最全的了吧 https://css-tricks.com/centering-css-complete-guide/居中作弊工具
http://howtocenterincss.com/css tricks
https://css-tricks.com/css的基础知识点
盒子模型
W3C标准的盒子模型
IE的盒子模型
CSS的居中问题(水平and垂直)
水平居中
非块状
设置父亲节点text-align: center;
####块状非浮动
设置子节点
margin: 0 auto;
垂直居中
设置子节点为position: absolute
top:50%;
margin-left:高度的一半
父亲节点为static (这种方法适用于水平居中)
浮动的塌陷问题
这篇有讲细节/article/1214609.html
额外加一个div标签
在子节点加一个额外标签,然后clear:both;
缺点:增加了无用的标签,不利于语义化
父亲overflow:hidden
这种方式是因为父节点会计算子节点的高度clearfix
利用伪类这种方式可以写成css样式,直接引用就行了
bootstrap也是自带的 http://v3.bootcss.com/css/#helper-classes-clearfix
position的四种方式
static
也就是原来的文档流,默认定位relative
根据static的文档流,改变定位,top,right,left,bottom四个属性来改变定位absolute
两种定位方式,如果父亲节点是relative的话,那么针对父亲节点定位,不然是针对整个页面定位,也是四个方式,top之类的fixed
针对浏览器的窗口定位,也是四个方向,top之类的display的三种
block
块状,一行一个,有高度和宽度 例子 divinline
内联,一行好多个,没有高度和宽度,例子 spaninline-block
内联块状,一行好多个,有高度和宽度,例如 img相关文章推荐
- css——多行文字固定高度垂直居中(ie6.7.8.9 chrome ff)
- CSS3选择器总结
- 你不知道的CSS(边框塌陷)
- CSS中的绝对定位与相对定位
- 如何使用CSS实现小三角形效果
- CSS 外边距合并
- CSS小叙
- 一起熟悉css选择器
- CSS3---变形与动画效果
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- css3 监听webkitAnimationEnd运动结束 后执行什么
- CSS选择器详解一
- CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
- css3 用border写三角形
- css学习
- JSP的CSS背景样式写法
- css的定位:
- CSS学习之CSS样式介绍和使用
- 纯css3实现图片轮播
- CSS3中transform属性和transition属性