css
keavvy
这个作者很懒,什么都没留下…
展开
-
css中的几种居中的原理和实现方式(margin:0 auto)
文本水平居中 text-align:center块级元素在父元素中水平居中****** margin:0 auto绝对定位后的居中leftt:50%margin-left:负宽度的一半top:50%margin-top:负高度的一半行内块元素或行内元素的对齐的方式包括垂直居中vertical-align的方式、行内元素和行内元素分为topline middleline baseline bottomline在莫仍情况下,行内元素和行内块元素默认按照baseline基线对齐,当设置为v原创 2022-01-13 11:15:50 · 285 阅读 · 0 评论 -
css中清除浮动的几种方法汇总好方法坏方法都有
浮动的最初目的是让文字可以环绕在图片周围,后来浮动才被用到了布局当中,当使用福东时,往往会产生一些副作用,如父元素塌陷,元素重叠等,清除浮动就是为了消除这些副作用。首先我们来了解浮动的原理,通过设置浮动,元素脱离文档流,其父元素如果没设置宽高就会塌陷,其他文本和行内元素会环绕它,浮动后的display属性也会发生变化,他不在是一个行内元素,可以对其设置宽高,浮动类型分为左浮动left 有浮动right,第一种方法 额外标签法利用float:left/right/both来清除浮动原理就是添加该属性的原创 2022-01-12 17:19:20 · 300 阅读 · 0 评论 -
绝对定位后,利用margin进行水平或垂直居中的方式以及原理
在使用绝对定位后,我们经常会利用绝对定位和Margin进行水平居中。假设盒子宽80px,高100px1绝对定位后的水平居中方法:{position:absolute;top:50%;left:50¥;margin-top:-50px;margin-left:-40px;}定位方法是使用绝对定位让盒子在父元素中下移父盒子高度的一半,再利用margin方法将盒子上移负的自己宽度一半。注意,由于绝对定位后的盒子脱离文档流,对其使用margin是相对自身进行移动。假设盒子宽度为width,高度为原创 2022-01-11 10:03:25 · 1589 阅读 · 0 评论 -
CSS中塌陷问题的产生原理及解决办法
塌陷问题的产生主要分为两种情况1 两个兄弟元素之间的margin塌陷2父子元素间的margin塌陷兄弟元素margin’塌陷为文档流中居于上下排列的两个兄弟盒子分别设置为margin-bottom:50px;,下面盒子为margin-top:40px;我们的初衷是把俩两个盒子的之间的间隙设置为40+50=90px但是系统默认把取间隙最大的显示,这就导致了下方的盒子Margi**塌陷。父子元素margin塌陷**给子元素设置margin后,初衷是让子元素在父元素中有一定的margin。运行结果原创 2022-01-10 16:25:13 · 1243 阅读 · 0 评论