CSS
分享CSS相关知识,主要记录遇到的问题~
Conradine_Lian
这个作者很懒,什么都没留下…
展开
-
CSS预处理器
CSS预处理器为CSS增加了编程的特性,如使用变量,简单的逻辑程序,函数等,再编译成css文件,供项目使用。好处:简洁,适应性强,可读性强,易于代码维护。Sass:两套语法规则:1. 用缩进作为分割符来区分代码块,可以省略{ } 和 ; 2. 用 { } 作为分隔符 (又称Scss)Less:同时支持缩进和CSS常规样式书写规则。Stylus:主要用来给Node项目进行CSS预处理支持。Stylus同时支持缩进和CSS常规样式书写规则。特性变量sass声明变量 $变量名:变.原创 2020-11-01 15:58:10 · 959 阅读 · 0 评论 -
CSS拾遗篇之浮动元素の影响
前置知识图片(未浮动)默认会与上方最后一行文字基线对齐图片(未浮动)默认会与下方第一行文字基线对齐补充:正是由于基线对齐,所以图片下方会出现空隙!浮动规则浮动元素对其上方元素的影响浮动元素对行内文本的影响:图片或块级元素设置float:left;之后,向左浮动,直到外边缘碰到包含它的框或者另外一个浮动元素的边框为止。浮动之后变为块级元素,vertical-align属性失效vertical-align 用来指定行内元素(inline)或表格单元格(table-cell原创 2020-08-17 22:11:32 · 317 阅读 · 0 评论 -
CSS布局之float + 负margin的使用
负margin设置元素margin-left / margin-top 属性为负值时,元素会按照设置的方向移动相应的距离。设置元素margin-right / margin-bottom属性为负值时,元素本身不动,后面的其他元素会往该元素的方向移动相应的距离,并且覆盖在该元素上面。圣杯布局HTML结构:<div class="wrapper clearfix"> <div class="left"></div> <div class="cente原创 2020-08-18 20:47:56 · 559 阅读 · 0 评论 -
CSS拾遗篇之定位体系和包含块 & html,body 的探究
绝对定位元素相对于最近的有定位的(position值为非static)父级,如果不存在满足条件的父元素,则相对于哪个元素定位 ?若无非static祖先,是相对于初始包含块来定位的,而初始包含块并不是以html 或body 进行定位。案例:div绝对定位 bottom:0 ,body,html无定位的效果图如下: document指的是整个文档,是 html 的包含块 document.documentElement指的是 HTML 可以看出div是相对于初始包含块的,而不是 <h.原创 2020-10-31 13:37:46 · 438 阅读 · 0 评论