![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 66
大风起兮云飞扬丶
Love Life,More Love Code
展开
-
CSS之border-box与content-box
在css的面试题中,三句话不离盒子模型。相信很多小伙伴对于盒子模型都一知半解,但是被问到,又嗯、啊、这,半天说不到重点。今天我们就来一起学习一下盒子模型中的两个重要概念。盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) 、第二种IE标准的盒子模型(怪异盒模型)1、标准盒模型:content(内容) + border + padding + margin2、怪异盒模型:width + height + margin注意:在怪异盒模型中 border 、padding都被计算到width原创 2021-03-16 23:54:09 · 755 阅读 · 0 评论 -
彻底搞懂BFC
首先,什么事BFC?答:BFC(Block formatting context),中文名:块级格式化上下文,一定记住它是一个独立的渲染区域。接下来,我们说说BFC能解决些什么样的问题1、边距重叠问题 * { margin: 0; padding: 0; } div { width: 100px; height: 100px; bor原创 2021-03-02 22:01:37 · 151 阅读 · 1 评论 -
CSS文字自适应div宽度
1、文字自适应宽度<body> <div class="box"> <div>大风起兮云飞扬</div> <div>安得猛士兮守四方</div> <div>威加海内兮归故乡</div> </div></body> .box{ border:1px solid red; } .box di原创 2020-11-25 16:53:04 · 7451 阅读 · 1 评论 -
CSS文本处理
1、单词换行*注意:只对英文有效,它会破坏单词的结构,适用于长单词换行*注意:word-wrap 强调的是是否允许单词内断句 .box { border: 1px solid red; width: 100px; word-wrap: break-word; }2、文本换行*注意:它不会破坏 .box { border: 1px solid red; width: 100px; word-原创 2020-11-25 15:10:51 · 139 阅读 · 0 评论