css
SunShinessx
这个作者很懒,什么都没留下…
展开
-
从有赞UI组件库看CSS BEM命名规范的好处
1.什么是BEM命名规范?文字定义不说,看dem0:解释:block 代表了更高级别的抽象或组件。 .block__element 代表.block的后代,用于形成一个完整的.block的整体。 .block--modifier代表.block的不同状态或不同版本。用bem命名的好处是:1.规定。适合前端团队的CSS写法规范化。2.既然是规范,就特别适合阅读,让CSS...原创 2020-05-02 16:41:26 · 1047 阅读 · 0 评论 -
CSS盒模型与style.width,offsetWidth,clientWidth的关系
一。css盒模型分为标准模型和IE模型1.标准模型:浏览器默认模型,即box-sizing:content-box<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS盒模型</title&原创 2019-02-14 22:05:39 · 948 阅读 · 0 评论 -
CSS中的BFC详解
一、何为BFC BFC(Block Formatting Context)块级格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed); 3、dis...原创 2019-02-16 20:54:14 · 224 阅读 · 0 评论 -
Rem布局的原理解析
一.什么是Remrem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDNem作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN从作用上可以看出,rem可以用来解决等比例缩放问题,也就是响应式问题。而em用来解决,当设置了等比缩放,字体不能很好展示,可以用em来解决字体问题。...原创 2019-04-16 18:02:48 · 5608 阅读 · 0 评论 -
css实现不占大小的边框
问题场景:点击item加边框,加打钩。出现的问题:点击之前在同一行,点击后变成两行。这里如果用border来实现边框,最后还是会出现挤下来的情况,因为border会占大小,而且这里不能用box-sizing,因为item的宽度不固定。所以用box-shadow: 0 0 0 4rpx #03A9F4 来实现。不占大小的边框。...原创 2019-05-16 18:47:40 · 5211 阅读 · 0 评论