CSS技巧

最新推荐文章于 2023-12-18 19:34:40 发布

jiaody111

最新推荐文章于 2023-12-18 19:34:40 发布

阅读量215

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42139212/article/details/101023240

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.设置元素在父元素中水平或者垂直居中：

将父元素设置为相对定位position: relative;
将要居中的元素设置为绝对定位position: absolute;
水平居中:方法1–> left:50%; transform: translateX(-50%);
方法2–> left:50% ; margin-left: 该元素宽度的一半px
垂直居中: top:50%; transform: translateY(-50%);
同时设置水平和垂直居中：

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

2.垂直居中vertical-align和水平居中text-align：

在这里插入图片描述

text-align是设置给需要对齐元素的父元素，设置元素的水平居中方式
vertical-align是设置给需要对齐的那个元素本身，而且只能给行内和行内块元素设置。
默认情况下，在垂直方向上，图片和一行文字的基线对齐。基线就是一行文字中最短那个文字的底部。
默认情况下，图片会和父盒子的基线对齐，即图片在高度上不会完全填充父盒子，而是在基线和底线之间留下几个px的间隙。此时可设置图片的vertical-align: bottom 让图片完全填充父盒子。

参考文章：
简单说 CSS的vertical-align
CSS深入理解vertical-align和line-height的基友关系
 我对CSS vertical-align的一些理解与认识（一）
关于Vertical-Align你需要知道的事情

3.height和line-height

当没有给盒子设置height时，由line-height绝对盒子的高度，而且盒子内的文字垂直居中。
参考文章： css中的line-height

4.当图片的宽度大于父元素的宽度时，如何让图片居中显示

如果子元素中的图片的宽度大于父元素的宽度，不能通过text-align: center让图片居中显示。

第一种方法：给图片设置定位流，此时必须知道图片的宽度

//给图片设置css
            position: relative;
            left: 50%;
            margin-left:图片宽度的一半;

第二种方法：

父元素设置：text-align: center;
图片设置：margin: 0 -100%;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            border: 10px solid red;
            margin: 50px auto;
            text-align: center;
        }
        div img{
            /*position: relative;*/
            /*left: 50%;*/
            /*margin-left: -532px;*/
            margin: 0 -100%;
        }
    </style>
</head>
<body>

<div class="father">
    <img src="images/video1.jpg" alt="">
</div>
</body>
</html>

在这里插入图片描述

5.min-width和max-width

最大宽度和最小宽度用来控制当扩大或缩小浏览器窗口时，子元素显示的最大和最小宽度。
max-width：当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。
min-width：窗口缩小到min-width的值就不会再缩小。此时元素显示最小宽度值定义的宽度。

6.使图片和文字在同一行中垂直对齐

设置图片的vertical-align: middle

7.左浮动的元素不要设置margin-left

8.小图标

一般将小图标放在span或者i标签中，设置display: inline-block和宽高

9.父元素中嵌套的第一个子元素

如果嵌套的父子元素中，第一个子盒子距离父盒子的顶部有一定距离，一般不设置margin-top，而是设置padding-top。

10. html{height:100%}

参考文章：由html,body{height:100%}引发的对html和body的思考
给html设置高度为100%,是拿到当前浏览器窗口的大小。

11. 设置三角形状：width和height同时为0

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            height: 0;
            width: 0;
            border-width: 40px 40px 40px 40px;
            border-style: solid solid solid solid;
            border-color: #000 #f00 #0f0 #00f;
        }
    </style>
</head>
<body>
<div></div>
</body>

在这里插入图片描述
想只保留某个边上的三角，把其他三个border-color设置为transparent即可：

    <style type="text/css">
        div{
            height: 0;
            width: 0;
            border-width: 40px 40px 40px 40px;
            border-style: solid solid solid solid;
            border-color: #000 transparent transparent transparent;
        }
    </style>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS技巧

设置元素在父元素中水平或者垂直居中：将父元素设置为相对定位position: relative;将要居中的元素设置为绝对定位position: absolute;水平居中: left:50%; transform: translateX(-50%);垂直居中: top:50%; transform: translateY(-50%);或者将要居中的元素设为 left:50% ; m...
复制链接

扫一扫