- 博客(5)
- 收藏
- 关注
RSS订阅原创 元素水平垂直居中的四种方法
目录方法一：使用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
5703
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
814
原创 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
628
原创 解决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
1968
原创 给第一个子元素加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
838
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人