精通css之路
酷吧~我装的
啊,我太懒啦
展开
-
详解 display
阶段一 最初只有两个基础盒子:块级盒子、内联盒子 块级盒子(block-level box) 负责结构,可作用宽高,不与图文一行显示 内联盒子(inline box) 负责内容,不作用宽高,与图文一行显示 这时候,所有的"块级元素"只有一个"块级盒子"。 阶段二 display:list-item 因为list-item默认要显示项目符号,一个盒子解释不了。 解决:为list-item重新命名一个盒子——附加盒子,学名标记盒子(marker box)用来存放圆点、数字这.原创 2021-09-20 18:45:21 · 190 阅读 · 0 评论 -
精通css之路 --- width:auto 里的 width:100%
width:auto 里的 width:100% 首先我知道,对于的width:auto: inline-block : 被内容撑开 block : 充满父盒子 后来在 width:auto 和 width:100% 一起使用时,我发现了一些有趣的问题,我随着我的发现把它们记录了下来 <div class="out"> <div></div> <span> 这是一段话这是一段话这是一段话 </span> </div原创 2021-09-20 18:35:12 · 410 阅读 · 1 评论 -
精通css之路 --- margin为负
1. margin是盒子的一部分 这是chrom控制器下的一个和简单的盒模型,可以看出,margin连同border、padding、content在内都属于盒子的一部分。 由此,很容易判断margin为正值时盒子的排布情况。 2. padding没有负值 这个没什么好说的,padding为负值时浏览器会无视该属性 3. margin为负值时不能以"盒子的一部分"的方向思考 只要元素符合"充分利用可用空间",无论垂直还是水平方向,都可以通过margin改变尺寸 什么是"充分利用原创 2021-09-20 18:41:06 · 97 阅读 · 0 评论