CSS
CSS
Langnang
这个作者很懒,什么都没留下…
展开
-
CSS组件之图形(figure)
CSS组件之图形(figure)三角形(triangle)上三角(triangle-up).container{ width:150px!important; border:1px solid; display:inline-block; /* font-size:16px; */}.figure { display: inline-block; background-color: black;}三角形(triangle)上三角(triangle-up)原创 2020-10-12 22:37:07 · 1768 阅读 · 0 评论 -
CSS之滚动条(scrollbar)
CSS之滚动条(scrollbar)/*滚动条样式*/.innerbox::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.innerbox::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); backgro原创 2020-10-12 09:33:20 · 776 阅读 · 0 评论 -
CSS之清除默认样式、样式重置(reset)
CSS之清除默认样式不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题* { padding: 0; margin: 0;}/** 清除内外边距 **/html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting e原创 2020-10-12 09:31:45 · 6649 阅读 · 1 评论 -
CSS之编码规范
CSS之编码规范文件命名建议用小写字母加中横线选择器不要使用样式特点命名减少嵌套层数避免误选减少覆盖使用CSS3的选择器完成一些高级的功能属性书写顺序少用!important属性值规范font-family的设置不要设置太大的z-index合并属性注意float/absolute/fixed定位会强制设置成block清除浮动引号的使用CSS动画规范不要断词不要设置图标字体font-family设置...转载 2019-06-04 10:04:36 · 400 阅读 · 0 评论 -
CSS之浏览器兼容问题
CSS之浏览器兼容问题以下内容转载编辑自奋斗中的小人物的博客符合 W3C 的标准目前,各主流浏览器的新版本,对于 W3C 的标准支持很好,因此,首先保证代码符合 W3C 的标准,这是解决浏览器兼容问题的前提。其次,对于某些支持受限的属性,针对不同的浏览器添加相应的前缀,比如-webkit-、-o-、-moz-。不同浏览器默认的内外边距不同*{margin:0;p...转载 2019-05-27 15:56:41 · 249 阅读 · 0 评论 -
CSS之变量var
CSS之变量var变量是个好东西CSS变量var()语法Question变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。Chrome/Fire...转载 2019-05-22 10:34:12 · 669 阅读 · 0 评论 -
CSS之定位
CSS之定位原创 2019-05-21 22:49:25 · 101 阅读 · 0 评论 -
CSS之框模型
CSS之框模型转载 2019-05-21 22:49:34 · 92 阅读 · 0 评论 -
CSS之选择器
CSS之选择器元素选择器类选择器ID 选择器属性选择器后代选择器子元素选择器相邻兄弟选择器元素选择器p {}h1 {}类选择器.class {}ID 选择器#id {}属性选择器[attr] {}[attr="attribute"] {}后代选择器h1 small {}子元素选择器h1 > strong {}相邻兄弟选择器h1 + p {}...原创 2019-05-21 22:46:50 · 138 阅读 · 0 评论 -
CSS之Flex布局(伸缩布局盒模型)
CSS之Flex布局(伸缩布局盒模型)Flex 布局基础概念容器的属性flex-direction属性flex-wrap属性flex-flowjustify-content属性align-items属性align-content属性项目的属性order属性flex-grow属性flex-shrink属性flex-basis属性flex属性align-self属性Flex 布局Flex是Flex...转载 2019-05-21 21:53:16 · 141 阅读 · 0 评论 -
CSS之栅格系统
CSS之栅格系统响应式设计栅格系统栅格系统的实现ContainerRowColumnResponsive响应式设计在谈论栅格系统之前,我们先了解一下,响应式设计。简单来说,我们在设计的页面的时候,并不知道我们的页面会在什么设备呈现,为了在不同的设备上有最好的呈现效果,我们需要作出一些响应和调整。响应式 Web 设计(Responsive Web design)的理念是,页面的设计与开发应当根...原创 2019-05-21 21:34:14 · 393 阅读 · 0 评论 -
CSS之浏览器如何解析CSS
浏览器如何解析css这里我主要讲一下css解析选择器的匹配规则,我们都知道css的选择器都是全局的。这样有好也有坏!好处是代码重用率高、可以把css文件合并、拆分做的像硬件一样。坏处是css写法特别的灵活,也因为灵活,所以容易耦合在一起。实际上CSS选择器的读取顺序是从右向左。#molly div.haha span{color:#f00}如上面的代码,浏览器会按照从右向左的顺序去读取选...转载 2019-05-24 16:57:58 · 711 阅读 · 0 评论