CheyBen的博客

这里举的两个例子中，是以左侧为固定宽度，右侧为自适应的宽度。要实现这样的效果，本质是要实现元素宽度的自适应，而元素宽度自适应有1、使用行块级元素宽度默认继承父元素宽度，如div2、设置块元素的宽度为父元素的100%3、还有一个可能比较少了解的，就是对绝对定位的元素设置left：0和right：0就可以使得元素的宽度展开到父元素的宽度（如果元素的宽度未设置具体宽度）4、flex弹...

分析：如果目标元素的高度（或宽度）只由其内容、padding、border确定的情况下，则会存在失效情况。解决方法：对目标元素设置固定高度（或宽度）

推荐一篇不错的文章：CSS中的五大选择器div[title^="intro"] {...} // title以intro开头的div元素div[title$="intro"] {...} // title以intro结尾的div元素div[title*="intro"] {...} // title中包含"intro"子串的div元素...

1、向右箭头 &:after{ content: " "; display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-c...

1、解决内容超出屏幕宽度，如下，如果内容长度超出屏幕，text-overflow: ellipsis不会生效，内容溢出屏幕<div class="a"> <div class="b">内容...</div> <div class="c">按钮</div></div><style> .a{...

在less中如果使用calc计算含有rem式子，会存在将rem转成百分比计算的问题，如width: calc(100% - 4rem) // 结果会变成width: 96%。解决方法：width: calc(~'100% - 4rem') // 式子用引号括起来 再加上转义符号~...

本篇主要是对平时用得比较少的样式做个归纳，以备需要时候进行查询1、box-shadow //设置阴影代码：<style> .container{ width:200px; height:200px; background-color: yellow; box-shadow: 0 0 10px red inset;//i...