工作中CSS问题汇总

最新推荐文章于 2024-05-07 09:15:59 发布

qq_23389687

最新推荐文章于 2024-05-07 09:15:59 发布

阅读量185

点赞数

分类专栏：工作学习

本文链接：https://blog.csdn.net/qq_23389687/article/details/90288411

版权

工作学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

css 在不知道具体宽度的时候画出一个正方形

不使用js方法

可以利用padding-bottom 或 padding-top来解决；让padding的值等于width的值，这样就可以得到一个正方形，如果有内容，可以放在子元素中，子元素做绝对定位就可以

<head>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow:auto
        }
        .box{
            margin: 30px auto;
            width: 60%;
            padding-bottom: 60%;
            box-sizing: border-box；
            background: #000;
           
        }
    </style>
</head>
<body>
   <div class="box">
	   <div class="small"></div>
   </div> 
</body>
</html>

关于css两端对其的问题

如下例中，上下两行的文字要两端对其

用户名：
住址：

//css部分
 .wrap{
        width: 200px;
        text-align: justify
    }
    span{
        display: inline-block;
        padding-left: 100%;//或者width:100%;两者功能相同
    }
//添加span元素违反结构元素分离原则，不添加span可以使用伪类来完成效果
div:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

//html部分    
<div class="wrap">春光<span></span></div>
<div class="wrap">春光灿烂<span></span></div>
<div class="wrap">眼光<span></span></div>
<div class="wrap">阳光明媚<span></span></div>

在这里插入图片描述

CSS浮动问题

关于浮动的9条规则

浮动元素会被推到其父容器的边缘
任何浮动元素会出现在它之前浮动元素的旁边或下方；
左浮动的盒子不能出现在有浮动盒子的右边
浮动元素不能高过它容器的上边缘
当前浮动元素不能比前一个块级元素或浮动元素高
浮动元素不能高过前一行的行内元素
靠着另一个浮动元素的浮动元素不能超过父容器边缘；
一个浮动元素必须尽可能高的放置
一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高。

以下是一个左浮动的例子
在这里插入图片描述

qq_23389687

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工作中CSS问题汇总

文章目录###css 在不知道具体宽度的时候画出一个正方形不使用js方法可以利用padding-bottom 或 padding-top来解决；让padding的值等于width的值，这样就可以得到一个正方形，如果有内容，可以放在子元素中，子元素做绝对定位就可以<head> <style> html,body{ wid...
复制链接

扫一扫