css 如何绘制正方形
CSS 如何 绘制 正方形
2023-09-14 09:01:09 时间
前言
如何绘制正方形的问题呢,在这里我先只写一种方式,后续补齐。
正文
写正方形有一个很特殊的地方就在于我们在写html的时候,宽是一定固定的,因为不可能溢出去,但是高就不固定了,因为可能要滑动。
问题就回到了,知道了宽,如何设定高的问题了。
padding 方式
原理:padding的宽度的百分比是根据width来确定的。
.container{
width: 200px;
background: yellow;
}
.container::before
{
content:"";
padding-top:100%;
display: block;
}
这样通过befor把元素撑开。
但是呢,里面的元素已经被占用了,那么我们需要书写不是container而是这样。
.container{
width: 200px;
background: yellow;
position: relative;
}
.container::before
{
content:"";
padding-top:100%;
display: block;
}
.ele{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
html:
<div class="container">
<div class="ele">
dsda
</div>
</div>
相关文章
- 如何制作网页-初学者入门HTML+CSS
- 【青山学css】如何用css实现抖音直播评论区透明渐变效果
- css gray rgb数值,CSS3 调色板 颜色值对照表
- HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
- 在html中加入外部css样式,如何引入CSS样式表?
- 如何使用CSS伪类选择器
- CSS笔记(10)
- 【说站】css内边框如何理解
- 【说站】css中fraction如何使用
- 【说站】css如何使用scale()方法进行缩放
- 【说站】css Flex容器如何理解
- gridview样式模板_css列表样式
- js / css 设置div不可点击
- CSS媒体查询_css网页
- 利用CSS,如何把宝姐居中显示?
- CSS笔记
- 【原创】CSS中的盒子模型以及设置元素居中
- 吃了吗?来5道css面试题
- HTML & CSS 系列--第一篇:概述
- css如何隐藏垂直滚动条但同时需保持滚动
- CSS专题,熟练布局技巧,需知文档流
- CSS基础 – 弹性盒子模型 – flex布局详解编程语言
- 6种编写HTML和CSS的最有效的方法详解编程语言
- CSS 媒体类型
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- CSS规则层叠的应用css必须要注意的几点
- 使用母版页时内容页如何使用css和javascript
- 如何使用jquery动态加载js,css文件实现代码
- CSS绘制五角星