CSS总结
yuan_jiazhen
我相信只要我坚持,总有一天会不一样。
展开
-
CSS常用居中方式
HTML结构 注:该HTML为React写法,也可使用原生HTML代替。 <div className={styles.parent}> <div className={styles.children}>子盒子</div> </div> (1)绝对定位盒子居中 .parent { position: relative;...原创 2019-08-05 23:46:08 · 219 阅读 · 1 评论 -
清除浮动
HTML结构 <div class="parent"> 父盒子 <div class="floatLeft">浮动左边盒子</div> <div class="floatRight">浮动左边盒子</div> </div> CSS代码 注:此CSS单纯为了展示居中的效果,不涉及居中的代码,读者可...原创 2019-08-08 23:27:50 · 146 阅读 · 1 评论 -
DIV+CSS布局之左边宽度固定,右边宽度自适应
HTML结构 <div class="parent"> <div class="leftBox">左边宽度固定盒子</div> <div class="rightBox">右边宽度自适应盒子</div> </div> 相关CSS代码 注:以下CSS为Less写法,读者可转换成原生CSS,...原创 2019-08-06 19:34:35 · 708 阅读 · 1 评论 -
纯CSS实现一个气泡框
实现原理:主要通过CSS的border-color属性,结合::before、::after和position: absolute实现。 (1)画一个正方形或长方形的盒子,别忘记此盒子需加上position: relative,不然之后的绝对定位元素会相对于其余设了position: relative的父级元素或windom定位,绝对定位元素就会跑偏了。 <div class="div...原创 2019-08-20 08:07:42 · 2716 阅读 · 0 评论