![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
壮哉我大前端
文章平均质量分 86
以休伯利安的名义
为了伯伦希尔的荣耀
展开
-
元素水平垂直居中的四种方法
目录方法一:使用flex布局方法二:使用transform将元素进行移动,必要时可将margin设为负值(需要知道元素的尺寸)方法三:通过改变父元素和子元素的position属性实现居中效果方法四:子元素设置display: inline-block,父元素设置text-align: center且line-height等于height写在最后方法一:使用flex布局将父元素的display属性设为flex、justify-content和align-items属性都设为center,可以让子元素在父元原创 2021-02-20 12:32:41 · 5668 阅读 · 1 评论 -
object-fit和object-position——定义图片和视频元素在容器内如何显示的css属性
目录object-fitobject-fit: fill;object-fit: contain;object-fit: cover;object-fit: scale-down;object-fit: none;object-fit: initial;object-fit: inherit;object-position当我们给img标签加上固定的宽和高时,img标签中的图片会默认被拉伸变形,如图:<body><img src="./demo.jpg" alt=""><原创 2021-02-07 14:35:51 · 760 阅读 · 0 评论 -
css属性line-height的应用——单行文字上下居中
目录line-height属性的可用属性值1.line-height: normal2.line-height: number3.line-height: length4.line-height: x%5.line-height: inherit应用场景单行文字上下居中写在最后line-height属性是很常用的css属性,可以用它来设置文字的行高,但是不允许使用负值。line-height属性的可用属性值1.line-height: normal默认值。文字会默认有一个合理的行间距。2.line原创 2021-02-03 17:52:38 · 600 阅读 · 0 评论 -
解决img标签自带外边距问题
三种方法去除img标签自带外边距方法一:给img标签加“display: block”方法二:给img标签的父容器指定高度方法三:将img标签父容器的font-size设置为0,其他子元素的字号另外设置写在最后<div id="img"> <img src="./img.jpg" alt="" srcset=""></div><div id="bottom"></div><style> #img img{原创 2021-01-22 09:03:50 · 1918 阅读 · 0 评论 -
给第一个子元素加margin-top,父元素会向下移动的解决办法
4种方案方法一:给父元素加overflow:hidden方法二:给父元素加border:1px solid transparent方法三:父元素或子元素浮动方法四:父元素加padding-top:1px写在最后给第一个子元素设置margin-top上外边距时,父元素总会跟着向下移动。<div id="parent"> <div id="son"></div></div><style> body{ margin原创 2021-01-19 13:12:24 · 801 阅读 · 0 评论