CSS常用实例,web前端开发者不知道这些就太low了
时间:2022-05-03
本文章向大家介绍CSS常用实例,web前端开发者不知道这些就太low了,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CSS常用实例
web前端开发中,会用到css实现各种网页布局,以下是我列出的几种常见实例,如果本文有错误的地方,也请指正。 PDF格式: http://demos.pxuexiao.com/flask_doc/css_demo01.html Author: lshxiao
一、常见左右布局
最常见的布局就是左右布局,这里只简单说一下,2列左右布局的情况
1、表格
<!--
表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。
好处:不用考虑左右内容的高度,两个td的高度始终相同,也不用清除浮动
坏处:但总是感觉这种实现方式比较low,不够优雅。
-->
<table>
<tr>
<td>left</td>
<td>right</td>
</tr>
</table>
2、左右float
<!--
左右浮动实现方式,也是前端开发最常用的一种实现方式。
好处:代码相对优雅,并且符合div+css布局网站的风格
坏处:要设置元素的宽度,控制不好,有可能换行展示,并且要对父元素清除浮动
-->
<style>
.clearfix{ overflow: hidden; zoom:1; }
.left{ float: left; width: 30%; min-height: 200px; background: #f00; overflow: hidden;}
.right{ float: left; width: 70%; background: #0f0; overflow: hidden;}
</style>
<div class="clearfix">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
3、position方式一
<!--
左右都用position: absolute;实现。
这种实现有个很大的缺点:父元素无法被撑开, 这种实现方式被大部分使用场景抛弃
-->
<style>
.panel{ position: relative;}
.p-left{ position: absolute; width: 30%; background: #f00;}
.p-right{ position: absolute; width: 70%; background: #0f0; left: 30%;}
</style>
<div class="panel">
<div class="p-left">
left
</div>
<div class="p-right">
right
</div>
</div>
4、position方式二
<!--
对上面的方法稍加改动,左侧浮动+定位,右侧设置margin-left来实现。
这种实现方式是很多博客中左侧固定菜单,右侧内容弹性布局最常用的实现方式
-->
<style>
.panel {
overflow: hidden;
}
.p-left {
position: relative;
float: left;
width: 30%;
background: #f00;
}
.p-right {
margin-left: 30%;
background: #0f0;
}
</style>
<div class="panel">
<div class="p-left">
left
</div>
<div class="p-right">
right<br>
more<br>
content
</div>
</div>
<div>
other element
</div>
二、盒子水平垂直居中
水平垂直居中的场景:弹出dialog需要居中显示。 一般情况都是用JS来计算位置,这里我介绍一下CSS来实现水平垂直居中的实现
1、盒子宽高固定
<!--
前提:元素宽高固定
实现原理:先让元素的凭意一点与浏览器窗口正中央位置重合,这里选择左上角,然后再让元素向左偏移宽度的一半,向上偏移高度的一半。
-->
<style>
.panel {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background: #0aa;
}
</style>
<div class="panel">
</div>
2、盒子宽高不固定
<!--
如果你是在移动端开发,或者不考虑IE低版本浏览器兼容问题,你可以用transform: translate(-50%, -50%);来实现。
这种实现方式,不要求宽高固定
-->
<style>
.panel {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
/*margin-left: -150px;*/
/*margin-top: -100px;*/
-webkit-transform: translate(-50%, -50%);
background: #0aa;
}
</style>
<div class="panel">
</div>
三、元素宽高等比放大缩小
相信不少同学在移动端网页开发中,都插入过图片吧,试问一下,你的图片比例是否可以跟随屏幕尺寸的变化而不变? 你肯定会说,我只设置宽度为100%,高度不就自动按比例缩放了嘛?如果是非图片元素,又如何实现等比放大缩小? 那还不简单嘛?宽高都设置成百分比呗,比如宽度100%,高度100%
1、了解width,height,padding百分比设置
<!--
试验一:宽高都设置为50%,好像并没有效果
-->
<style>
.panel {
width: 50%;
height: 50%;
background: #0aa;
}
</style>
<div class="panel">
</div>
<!--
试验二:在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果
-->
<style>
html, body{
height: 100%;
}
</style>
<!--
到现在你应该思考一个问题,width, height的百分比,是以谁为标准设置的?
它们都是以父元素的宽高为标准,然后取对应的百分比值。
我们要想实现等比缩放,只能有一个标准,比如都是宽度为标准的话,是不是就好办了?看下面的margin, padding的设置
效果:屏幕宽度发生变化时,margin-left, padding-top的大小也在随之改变,这样我们就已经实现了元素的等比缩放了
原理:margin,padding的百分比设置时,是以父元素的width为标准
-->
<style>
html, body{
height: 100%;
}
.panel {
width: 50%;
/*height: 50%;*/
margin-left: 10%;
padding-top: 20%;
background: #0aa;
}
</style>
<div class="panel">
</div>
2、微信朋友圈图片9宫格实现
<!--
有了上面的等比缩放效果,就可以写出朋友圈图片的9宫格效果,这里不写代码了。
直接给个链接地址吧:http://demos.pxuexiao.com/scale/wx.html-->
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 一文搞懂CDN加速原理
- 3分钟短文:Laravel Carbon自定义日期时间格式
- (30)字符截取命令sed
- 2. Bean Validation声明式校验方法的参数、返回值
- 如何识别和阻止基于电报的僵尸网络
- 由String,String Builder,String Buffer 引起的面试惨案
- MySQL案例:各类临时文件的存放位置
- 关于加@Transactional注解的方法之间调用,事务是否生效的问题
- 基于Vue实现一个有点意思的拼拼乐小游戏
- 硬核手写字节码实现HelloWorld
- 由 go orm 引发的探索
- 为什么不建议在 for 循环里捕捉异常?
- 我就是想找个下标,怎么用到二分查找了?
- 利用Decorator和SourceMap优化JavaScript错误堆栈
- 【每日一题】43. Multiply Strings