介绍 & lt; html>
& lt; body>
,,,& lt; div 类=皊quare"比;
,,& lt;/div>
& lt;/body>
& lt;/html> .square {
,,宽度:50大众;
,,身高:50大众;
背景:才能,蓝色,,,
} & lt; html>
& lt; body>
,,,& lt; div 类=癱ontainer"比;
,,,,,,& lt; div 类=皊quare"比;
,,,,,,& lt;/div>
,,& lt;/div>
& lt;/body>
& lt;/html> css: * {
,,,,,,,保证金:,0;
,,,}
,,,/*,设置撑满页面可见区域,*/,,,.container {
,,,,,,,,身高:100 vh,,
,,,,,,,宽度:,100大众;
,,,,,,,背景:,淡菊黄色;
,,,}
,,,.square {
,,,,,,,宽度:,50%,,/*,相对与容器的width */,,,,,,,padding-bottom:, 50%;,,/*,相对与容器的width */,,,,,,,背景:,苍绿色;
,,,}
这篇文章主要介绍了怎么用css实现正方形div,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
目标:实现一个正方形,这个正方形边长等于
<强>方法一:使用单位大众,(ps我觉得这个是最简单的方法)
html结构也很简单,只有一个div即可
<>强方法二:使用padding-bottom
要点:
,
1。高度:0,内容会溢出到垫里,不用担心~ ~
,
2。padding-bottom值设置为百分比时候,相对于包含块的宽度。
,
3。需要设置包含块
html结构:
行了吧,两种就可以了,你也可以使用,不过会有塌陷的危险,所以,就这两个够用啦。
感谢你能够认真阅读完这篇文章,希望小编分享的“怎么用css实现正方形div”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
