![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
FQIP
这个作者很懒,什么都没留下…
展开
-
css实现一侧固定宽度,另一侧宽度自适应
这里举的两个例子中,是以左侧为固定宽度,右侧为自适应的宽度。要实现这样的效果,本质是要实现元素宽度的自适应,而元素宽度自适应有1、使用行块级元素宽度默认继承父元素宽度,如div2、设置块元素的宽度为父元素的100%3、还有一个可能比较少了解的,就是对绝对定位的元素设置left:0和right:0就可以使得元素的宽度展开到父元素的宽度(如果元素的宽度未设置具体宽度)4、flex弹...原创 2020-04-21 23:22:23 · 2158 阅读 · 0 评论 -
box-sizing失效的原因
分析:如果目标元素的高度(或宽度)只由其内容、padding、border确定的情况下,则会存在失效情况。解决方法:对目标元素设置固定高度(或宽度)原创 2019-12-20 15:27:13 · 8952 阅读 · 0 评论 -
常用的css选择器归纳
推荐一篇不错的文章:CSS中的五大选择器div[title^="intro"] {...} // title以intro开头的div元素div[title$="intro"] {...} // title以intro结尾的div元素div[title*="intro"] {...} // title中包含"intro"子串的div元素...原创 2019-11-06 11:18:15 · 107 阅读 · 0 评论 -
常用的一些css样式
1、向右箭头 &:after{ content: " "; display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-c...原创 2019-11-05 15:55:04 · 119 阅读 · 0 评论 -
flex使用中遇到的问题
1、解决内容超出屏幕宽度,如下,如果内容长度超出屏幕,text-overflow: ellipsis不会生效,内容溢出屏幕<div class="a"> <div class="b">内容...</div> <div class="c">按钮</div></div><style> .a{...原创 2019-11-05 15:52:04 · 312 阅读 · 0 评论 -
在less的calc计算中,含有rem单位的运算问题
在less中如果使用calc计算含有rem式子,会存在将rem转成百分比计算的问题,如width: calc(100% - 4rem) // 结果会变成width: 96%。解决方法:width: calc(~'100% - 4rem') // 式子用引号括起来 再加上转义符号~...原创 2019-11-04 19:09:36 · 1845 阅读 · 1 评论 -
CSS备忘录集合:box-shadow,文字竖向排版
本篇主要是对平时用得比较少的样式做个归纳,以备需要时候进行查询1、box-shadow //设置阴影代码:<style> .container{ width:200px; height:200px; background-color: yellow; box-shadow: 0 0 10px red inset;//i...原创 2019-04-03 13:36:48 · 296 阅读 · 0 评论