css的相关应用

学习css的相关网站

1. Google: 关键词 MDN
2. CSS Tricks
3. Google: 阮一峰 css
4. 张鑫旭的 240 多篇 CSS 博客
5. Codrops 炫酷 CSS 效果
6. CSS揭秘
7. CSS 2.1 中文 spec
8. Magic of CSS 免费在线书

在css中如何引入其他css

image.png

如何将块元素变为行内元素
1.子元素加上float:left
2.父元素加上class = "clearfix"
3.给clearfix加上
.clearfix{
content:'',
display:block,
clear:both
}
【不建议使用其他方法，例如将块元素变为display:inline-block,因为inline-block有的时候会有意想不到的bug】

.topbar>nav>ul
表示topbar下的儿子nav，不是孙子

如何绘制a链接的下划线

1.a链接加上border:1px solid transparent;
2.a链接的hover加上border:1px solid red;
【如果只有hover加了border，会导致鼠标浮动上去会有抖动的感觉】

image.png

如何查看标签鼠标操作过后的样式
【有的时候想要截图鼠标浮动在元素上面的样子，可以用这个方法】

image.png

color:inherit
表示颜色从祖先那里继承，因为例如a链接自身带有颜色，即使body加了颜色也不会从body里面继承，在a链接加了这句话，就会从body那里继承颜色

高度bug

当内联元素高度大于外部高度的时候，可以设置display:block，这样就可以解决这个问题

position:fixed

当设置position:fixed的时候，宽度会变为里面元素的宽度，而不是屏幕的100%，这个时候我们需要手动设置宽度为100%
如果这个时候我们又设置了padding的值，可能会超过屏幕的宽度，解决的方法是
1.将最里面的元素再次包裹一层div，设置div为width:100% 并且设置padding

image.png

画各种各样的形状
Google搜索css tricks shape

word-break:break-all
当不用这个属性的时候如果有英文在字符串中，英文会单独另起一行，用了这个分行只会一个字母一个字母分行。

图片background

image.png