工作中CSS问题汇总

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

不使用js方法

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

关于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条规则

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

以下是一个左浮动的例子