当前位置: 首页 > Web前端 > CSS

csscenter

时间:2023-03-30 14:38:35 CSS

csscenter1.margin:0auto;定义和使用margin速记属性在一个声明中设置所有margin属性。该属性可以有1到4个值。说明此速记属性设置元素所有边距的宽度,或设置每边边距的宽度。块级元素的垂直相邻外边距被合并,而内联元素实际上并不占据顶部和底部外边距。内联元素的左右边距不合并。同样,浮动元素的边距也不会折叠。负边距值是允许的,但要小心使用。注意:负值是允许的。之所以将垂直边距设计成在垂直方向合并,主要是为了方便文字的排版,即一段文字在分行时,上下行之间的直接间距不会重叠。简写的情况:/*四个方向的边距都是10px*/margin:10px;/上下边距都是10px,左右边距是20px/margin:10px20px;/上边距是10px,左右边距为5px,下边距为15px/margin:10px5px15px;/四个值依次为上、右、下、左/margin:10px5px15px20px;/计算方式设置为auto/margin:0auto;/常用水平居中方式/margin:auto;上面auto的计算方式是浏览器自动计算父容器-子元素的剩余部分。以上面的水平居中方式为例,左右边距等于父容器减去子容器剩余部分的宽度,向左右均匀分布,从而达到居中的效果结盟。上诉的第二个陈述无法达到垂直居中的效果。具体可以参考w3c标准声明或者阅读知乎这篇文章。marginiscalculatedusingpercentageunits/percentageiscalculatedaccordingtothewidthoftheparentcontainer,一定要注意/margin:20%;从上面我们可以知道如何通过margin来实现水平居中。2.text-align:center;1)绝对定位实现垂直居中position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;使用绝对定位和负边距的方法,先将父容器向左偏移50%;然后将自身偏移自身宽高的50%,从而实现纵横居中。此方法需要确定居中元素的宽度和高度。2)绝对定位和居中元素不知道宽高``position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;`这里使用CSS3的transform:translate(-50%,-50%);属性实现元素自身的偏移3)绝对定位+margin:auto;实现水平和垂直居中position:absolute;top:0;left:0;bottom:0;right:0;width:100px;height:100px;margin:auto;转载他人主要内容