CSS宽高等比布局的方法
建站知识 2021-07-03 07:54www.168986.cn长沙网站建设
宽度是高度的两倍(等比缩放)
实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-:50% (也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);
为什么不直接`width: 50%; height: 50%;?
那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);
原题目:
- 红色块级元素垂直居中于屏幕中央;
- 红色块级元素距离屏幕左右边距各20px;
- 红色块级元素里面的内容水平垂直居中;
- 红色块级元素的高度始终是红色块级元素宽度的50%。
红色部分宽高之比2:1
源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宽高比例固定</title> <style> .father{ overflow: hidden; position: absolute; left: 10px; right: 10px; : 50%; transform: translateY(-50%); background-color: #0c8ac5; } .son{ width: 100%; padding-: 50%; background-color: #c03035; } span{ position: absolute; : 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #D8D8D8; } img{ float: left; margin-right: 10px; border: 2px solid #fdf6e3; } </style> </head> <body> <section class="father"> <div class="son"><span><img src="https://p2.ssl.cdn.btime./t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武当派弟子(现已离开武当),八奇技之一风后奇门的继承人,靠占卜悟出天道,却又作出甘于投身乱世的选择。外表一副老好人的温良相,谦谦有礼如温吞水般,做事也经常是一副没精打采,貌似没睡醒的样子。优哉游哉还脾气软,代表举动经常是歉意笑着作出让步。似乎对什么都无所谓,一副悠然道人之姿,在涉及到家人安危时毫不含糊,甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人,实力在后生一辈中甚至称得上头筹,暂时只有一次完全没预料到地阴沟里翻船。</span></div> </section> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键