
CSS学习记录
ldz_miantiao
每天住在B站的切图仔
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
利用CSS实现rem适配
原文地址:https://www.toutiao.com/i6773562707711885832方案一:使用meta标签在html的head中插入下面的meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=375, user-scalable=no">没错,是两个viewport标签。width=d转载 2020-10-26 21:11:11 · 7335 阅读 · 0 评论 -
Less知识点记录(包含HBuilderx保存自动编译Less设置方法)
一、HBuildex编译设置(已配置node与Less插件)本人使用的是HbuilderX编译,可以实现保存自动编译,在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true"这里是手动编译二、代码学习模块使用的是css的模板,所以有些地方会有些颜色不对应// //******************************************...原创 2019-07-23 22:42:36 · 4058 阅读 · 0 评论 -
JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草。直接设置style的属性 某些情况用这个设置 !important值无效如果属性有’-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style[‘text-align’] = ‘100px’;element.style.height = '100px';直接设置属性...转载 2019-04-12 20:59:36 · 18599 阅读 · 0 评论 -
10种方法解决float属性引起的“父元素塌陷” 问题(包含BFC解决方法)
场景:父元素是一个没有样式的div/ul/等其它类block元素,子元素里面设置浮动,父元素就会发生塌陷问题,这个现象是在页面设计中过程中会发生的十分经典的情况。前排提示由于浮动会对后面的元素造成影响,所以在书写html结构的时候应该从上到下、从左到右、从里到外的顺序书写,另外,每一行都需要单独的包起来。解决方法使用伪类(好用的的放前面),操作简单兼容性高别问我为什么谁用谁知道,并...原创 2019-03-01 15:28:03 · 827 阅读 · 3 评论 -
深入理解之border属性(第一期)
之前在慕课看到了这个系列的教程,来自于张鑫旭老师,有兴趣的朋友可以搜索看看,本人在此做一个学习记录。一、border-width属性border-width属性不支持百分比值,不会因为设备的尺寸变化而变大(类:outline,box-shadow,text-shadow)border-width支持关键字,thin(1px 细),medium(3px 默认),thick(5px 粗)...原创 2019-03-03 13:42:30 · 7759 阅读 · 0 评论 -
深入理解之overflow属性(第五期)
一、overflow特征overflow-x:hidden;/ overflow-y:hidden;,当一方被隐藏的时候,另一方会自动变成visible;IE7浏览器下,文字越多的时候,按钮两侧的padding空白会越大。解决方法:给所有按钮添加overflow:visible;二、overflow与滚动条无论什么浏览器,默认滚动条来自于HTML,而不是body。body/html...原创 2019-03-19 15:20:51 · 18615 阅读 · 0 评论 -
深入理解之padding属性(第二期)
前排提示:之前在慕课看到了这个系列的教程,来自于张鑫旭老师,有兴趣的朋友可以搜索看看,本人在此做一个学习记录。一、padding与容器尺寸的关系对于block水平元素来说,可以理解为人的脂肪层,会影响尺寸。对应以下情况外部不会改变,不会影响元素的尺寸。注:当padding大小超过宽高时,会影响到元素的尺寸。div{ width:auto; border-sizing:bord...原创 2019-03-08 00:20:42 · 1457 阅读 · 1 评论 -
深入理解之margin属性(第三期)
一、margin与容器的尺寸margin可以改变容器的尺寸margin与可视尺寸(1)试用于没有设定width/height的普通block水平元素。float元素/absolute/fixed元素/inline水平元素/table-cell元素 是不可以的。(2)只试用于水平方向的尺寸例:可以实现一侧定宽的自适应布局<img width="150px" style="flo...原创 2019-03-11 19:46:36 · 934 阅读 · 1 评论 -
深入理解之z-index属性(第四期)
一、z-index基础支持负值(在日常的使用的层叠上下文里,-1,-2值足够使用)支持css3animation动画。如果不考虑css3只有 定位元素的index才有作用:position、relative、absolute、fixed。二、相关特性如果定位元素z-index没有发生嵌套。后来居上原则哪个值大哪个值就在上面如果定位元素z-index发生了嵌套祖先...原创 2019-03-18 23:09:08 · 407 阅读 · 0 评论