随笔分类 - CSS
摘要：参考淘宝移动端页面https://h5.m.taobao.com/对rem的处理 以iphone6/7/8 (375*667)为基准设置1rem=100px； 320px 1rem 85.3333px 375px 1rem 100px 414px 1rem 110.4px
阅读全文
摘要：概念：如果页面内容不够长时，页脚显示在视窗底部，当内容足够长时，页脚会被内容向下推送。 实现方式： 1.当footer为定高时 a、可以利用calc计算属性实现 b、用相对定位relative实现 2.当footer为不定高时 a、利用flexbox布局实现
阅读全文
摘要：今天在布局时，发现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失 看了网上资料以及通过实践分析，总结如下 1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline 2.对于内容为空的inline-b
阅读全文
摘要：判断规则 1一般情况 ：.外部样式<内部样式<内联样式 2.特殊情况： 外部样式放在内部样式后面 3.通过计算权值判断 a.内联样式权值1000 b.ID选择器权值100 c.class类选择器权值10 d.标签选择器权值1 e.通配符、子选择器、相邻选择器等的权值为0 注：无论是外部样式、内部样式
阅读全文
摘要：1.只有普通文档流中块级元素的垂直外边距才会发生合并，也就是说行内元素不会发生外边距合并，且合并是发生在垂直方向，水平方向不会发生外边距合并 2.浮动元素和绝对定位元素也不会发生外边距合并 发生合并的两种情形： （1）当一个元素出现在另一个元素上面，则第一个元素的下边距和第二个元素 的上边距会发生合
阅读全文
摘要：px：相对于显示屏屏幕分辨率而言 em：相对于父元素的字体尺寸 rem：相对于根节点（即html标签）字体尺寸 浏览器默认字体大小：16px 兼容性： 除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，会忽略rem设定的字体大小，此时可多写一个绝对单位的声明。故考虑兼容性，一般
阅读全文
摘要：1.利用css如何制作一个半圆？（思路：对样式border-radius以及宽高的控制） 页面部分 效果： 2.即当a标签内有内容时，无法再对a标签进行宽高的控制，但又不想引入图片作为背景，此时用css3渐变属性linear-gradient（思路：一个圆，将自己不需要显示的半圆用白色背景） 效果展
阅读全文
