css盒子布局,浮动布局以及显影与简单的动画
08.05自我总结
一.盒子布局
1.盒子布局的组成
- margin
- border
- padding
- content
2.margin
margin是外边距,控制盒子的显示位置相对于他的上一级
left、top控制自身,right、bottom影响兄弟
3.border
-
宽度:border-width
-
颜色:border-color
-
透明度:transparent
-
样式:border-style:
常用的样式
none
:没有边框solid
:实线dashed
虚线dotted点或者方框根据浏览器不同样式有有点区别
-
透明度:颜色里面的用rgb颜色第四个参数来控制来控制
4.content
content是宽x高,作为内容或子标签的显示区域
padding与边框之间的距离
5.盒子阴影
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色
6.重点
- 盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin
- 父子级顶端产生距离,建议使用padding
- margin、padding的参数auto自动获取留白区域适用根据留白地方居中使用
二.浮动布局
1.浮动布局
float
1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理
2.after|before
after与before是伪类
他们与CSS选择器直接用:连接
after元素出现后
before元素出现前
3.清浮动
父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集
需要左右排列的block采用浮动布局,且父级一定要清浮动
方法一:
复制.浮动的标签:after {
content: '';
display: block;
clear: both;
}
方法二:
复制.浮动标签下一个要显示的标签(会受到他浮动影响的):before {
content: '';
display: block;
clear: both;
}
三.动画
1.显隐
1)display:none | block 不可以做动画
2)opacity: 0 | 1 可以做动画
3)width:0 | height: 0 可以做动画
2.动画
transition: 动画时间(.5s) 延迟时间(.1s) 动画属性(all) 运动曲线(ease)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理