css
hu_lanlan
这个作者很懒,什么都没留下…
展开
-
display:none与visibility:hidden
display:none:会让元素从渲染树中消失,渲染的时候不占据任何空间; visibility:hidden:不会让元素从渲染树中消失,渲染的时候任然占据空间,只是内容不可见。display: none:是非继承属性,子孙节点消失是由于元素从渲染树中消失造成的,通过修改子孙节点的属性无法显示; visibility: hidden:是继承属性,子孙节点消失是由于继承了hidden,通过设原创 2017-09-15 11:41:39 · 414 阅读 · 0 评论 -
CSS的display属性
none(将元素设置为none的时候既不会占据空间,也无法显示,相当于该元素不存在,该属性可以用来改善重排与重绘) inline(用来设置行内元素属性,设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中) inline-block(inline-block既具有block的宽高特性又具有inline的同行元素特...转载 2018-03-14 10:21:05 · 201 阅读 · 0 评论 -
background-size的取值有哪些?cover与contain有什么区别?
contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕)length:设置背景图像的高度和宽度。如果只设置一个值,则第二个值会被设置为“auto”。percentage:以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值,则第二个值会被设置为原创 2017-11-06 11:31:14 · 2868 阅读 · 0 评论 -
CSS中奇数选择器与偶数选择器,一句代码怎么实现?
p标签下的奇数行与偶数行p:nth-child(odd){} //奇数行p:nth-child(even){} //偶数行:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。原创 2017-11-06 11:24:32 · 62093 阅读 · 0 评论 -
margin和padding的区别?
(1)margin位于border之外,是容器外边距,用来隔开元素与元素的间距,padding位于border之内,是容器内边距,用来隔开元素与内容的间隔(2)margin允许重叠,padding不允许(3)margin允许出现负值,padding不允许原创 2017-11-06 11:21:00 · 503 阅读 · 0 评论 -
CSS3新增长度单位
来自: http://www.jianshu.com/p/60ea15164b82rem:对于根元素(html)的字体大小。相对视窗的单位: vh, vw,分别代表viewport height和viewport width。1vw就是viewport width的1%。Box SizingW3C规范: width只是content的宽度,不包含padding和border, box-si转载 2017-10-23 21:32:07 · 630 阅读 · 0 评论 -
水平垂直居中
转自:http://blog.csdn.net/u012657197/article/details/73558168转载 2017-09-15 11:45:19 · 538 阅读 · 0 评论 -
CSS hack
来自:http://blog.csdn.net/freshlover/article/details/12132801#t3CSS hack:针对不同的浏览器/不同版本写相应的CSS code的过程CSS hack的原理: 不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,针对不同的浏览器情景来应用不同的CSS。CSS hack分类: (1)属性转载 2017-10-14 21:33:07 · 400 阅读 · 0 评论 -
CSS3新增属性
(1)背景与边框:border-radius,box-shadow,border-image,background-size(可能的取值:cover(撑满整个屏幕,某些部分也许无法显示在指定区域),contain(大小适应内容区域),length,percentage)background-clip:规定背景的绘制区域,也就是说对背景图片进行剪裁(可以取的值有:border-box(背景被裁剪到边框原创 2017-11-07 17:27:53 · 224 阅读 · 0 评论 -
学习CSS布局
转自:http://zh.learnlayout.com/no-layout.html转载 2017-09-18 17:23:35 · 376 阅读 · 0 评论 -
CSS中的Sprites
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式 1、它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。 2、利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background原创 2017-09-16 20:58:07 · 766 阅读 · 0 评论 -
reflow与repain
来自:http://blog.csdn.net/ClaireKe/article/details/51375622转载 2017-09-15 16:12:21 · 432 阅读 · 0 评论 -
BFC的理解
来自:http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html转载 2017-09-15 15:00:08 · 284 阅读 · 0 评论 -
Sass与Less
SASS是一种CSS开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发变得简单和可维护,后缀名.scss SASS是用Ruby语言写的,两者的语法没有关系,使用时先安装Ruby,再安装SASS。安装好Ruby后,输入gem install sass就可以使用了。sass test.scss test.css //将scss文件转化为css格式并保存成文件Le...原创 2018-04-09 21:03:28 · 751 阅读 · 0 评论