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条规则
- 浮动元素会被推到其父容器的边缘
- 任何浮动元素会出现在它之前浮动元素的
旁边
或下方
; - 左浮动的盒子不能出现在有浮动盒子的右边
- 浮动元素不能高过它容器的上边缘
- 当前浮动元素不能比前一个块级元素或浮动元素高
- 浮动元素不能高过前一行的行内元素
- 靠着另一个浮动元素的浮动元素不能超过父容器边缘;
- 一个浮动元素
必须尽可能高
的放置 - 一个左浮动的盒子必须尽可能左的放置,一个右浮动的盒子要尽可能的右的放置。尽可能
高的位置的优先级比左右高
。
以下是一个左浮动的例子