- 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
- 关于水平居中和垂直居中的方法
- 其中的6,7也是不错的办法
- 如果要用伪类来清除浮动,样式一定要加display:block, content: " ", 如
&:after { clear: both; content: " "; display: block;} /* "display: block; clear: both;"是确保这个空白字符是非浮动的独立区块 */
- flex这个属性的作用是把容器内的剩余宽度按照比例做一个分配,比如如下dom树,如果.title和.img flex:1,代表两个div 50% 50%分配宽度
生鲜馆
第二件半价
- 如何去掉div中文字上下的间距,有一种解决办法,就是设置这个div的line-height, 设置成差不多当前字体大小的高度就行了。不知道还有没有其他办法。 关于样式的权重计算规则(经常发现父元素定义的font-size,子元素无法直接继承,因为*默认定义了font-size)
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100
- 第三等:代表类,伪类和属性选择器,如.content,权值为0010
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000
- 继承的样式没有权值。
- 关于如何清除浮动
- text-overflow只能针对单行文本溢出设置省略号,多行文本溢出设置省略号参考
- 有关border-radius的详细原理,这篇文章说的很好
- 若想让容器内的元素通过text-align来设置左右对齐,子元素必须是inline或者inline-block的元素,如果子元素是block,父元素上设置text-align无效
- 如果是inline元素,设置height width margin均无效
- position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。注意一点的是,position:relative并不能够隐式的改变display的类型(看了京东分类页的header-bar有感)
- 写样式的时候发现比如我在父元素上定义的font-size不能传递给子元素,那可能是因为通配符(*)优先级大于继承而来样式的优先级
样式命名技巧
- “分离”,“统一前缀”,方法为“面向属性的命名”,准则为“无层级、无标签”。详见