标签的权值为 1 类选择符的权值为 10 ID 选择符的权值最高为 100
解释下列样式属性
添加伪类元素, 让鼠标滑过是改变背景和字体颜色 (红色背景, 白色文字, 1px 边框)
怎么让行内元素变成块级元素?
display:none 与 visibility:hidden 的区别是什么?
行内元素和块级元素的具体区别是什么? 行内元素的 padding 和 margin 可设置吗?
怎样样行内元素居中?
怎样让块级元素居中?
CSS 中可以通过哪些属性定义, 使得一个 DOM 元素不显示在浏览器可视范围内?
float 和 position 有什么区别? position 的属性有哪些分别怎么使用?
只有 position 是定位, float 不能说是定位
float 和 position 这两者并没有孰好孰不好的问题, 两者按需使用, 各得所需的效果.
float 从字面上的意思就是浮动, 这种在印刷排版之类中可能解释的更加贴切. float 能让元素从文档流中抽出, 它并不占文档流的空间, 典型的就是图文混排中文字环绕图片的效果了. 并且 float 这也是目前使用最多的网页布局方式. 不过需要注意的是清除浮动是可能需要注意的地方.
而 position 顾名思义就是定位. 以下这几种属性: static(默认),relative(相对定位),absolute(绝对定位) 和 fixed(固定定位).
其中 static 和 relative 会占据文档流空间, 他们并不是脱离文档的.
absolute 和 fixed 是脱离文档流的, 不会占据文档流空间.
比较可以发现, float 和 position 最大的区别其实是是否占据文档流空间的问题.
虽然 position 有 absolute 和 fixed 这两个同样不会占据文档流的属性, 但是这两个并不适合被用来给整个网页做布局. 为什么? 因为这样你就得为页面上的每一个元素设置一个 xy 坐标来定位. float 布局就显得灵活多了. 但是一些特殊的地方搭配 relative 和 absolute 布局可以实现更好的效果. 因为 absolute 是基于父级元素的定位, 当父级元素是 relative 的时候, absolute 的元素就会是基于它的定位了. 比如你可以让一个按钮始终显示在一个元素的右下角. 如果说到性能问题 reflow 问题, 将元素的 position 设置为 absolute 和 fixed 可以使元素从 DOM 树结构中脱离出来独立的存在, 而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素, 从而在某种程度上缩短浏览器渲染时间. 所以如果是制作 JS 动画等, 用 absolute 或者 fixed 定位会更好. 说得不好的地方请大家补充. 总结一句就是不推荐用 position 来布局整个页面的大框架, 而推荐用 float 或者文档流的默认方式.
实现如下图的效果
灰色元素水平垂直居中, 有两个四分之一圆位于其左上角和右下角.
提示: 圆角左上角 border-radius: 0 0 50px 0;
来源: http://www.jianshu.com/p/a69eeb8c2d22