css 盒模型 文档流 几种清除浮动的方法
2024-08-26 02:46:18
盒模型
1、box-sizing: content-box 是普通的默认的一种盒子表现模式
盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode
2、box-sizing:border-box 以盒子边框为界 自己管理里面的元素
border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内(inset)/外阴影;
文档流
普通流(标准流)
浮动
定位
浮动
浮动出现:解决文字环绕的效果
后来发现浮动可以做很多事
浮动会脱离标准流 不会占有原来的位置
浮动 是找的离他最近的父元素
浮动的对齐方式是顶部对齐
浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮: 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。
漏: 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏 给了标准流的盒子。
特: 特别注意,这是特殊的使用,有很多的不好处,使用要谨慎。
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
我们有时候不方便给父盒子高度 或者不知道父盒子的高度 这个时候就需要清除浮动
怎么去清除浮动?
clear:both 同时清除左右两侧浮动的影响
1.给父盒子设置高度
*2.额外标签法 : 添加一个额外的标签 clear:both 起到分离上部分和下部分的作用
影响了本身html结构
3.给父盒子一个display:table 但是有缺陷 建议 不要使用
*4.overflower:hidden 溢出隐藏
*5.
.father:after {
content: ".";/* 这里不建议大家使用"" */
display: block;
clear: both;
height: 0;
visibility: hidden;
}
6. *zoom:1;处理ie6以下的版本兼容问题
*7.双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:".";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
最新文章
- SQL Server 存储过程中处理多个查询条件的几种常见写法分析,我们该用那种写法
- <;jsp:include>;和<;%@ include %>;的区别
- 《C程序设计的抽象思维》2.10编程练习(未完)
- Lucene -- 实时索引
- BZOJ3853 : GCD Array
- 解决Hibernate Write operations are not allowed in read-only mode的方法
- grep经常使用使用方法
- 云计算平台(检索篇)-Elasticsearch
- Azure Site Recovery:我们对于保障您的数据安全的承诺
- c#调用钩子
- VMware Network Adapter VMnet1和VMnet8 未识别的网络的解决方法
- 给进程分配cpu核心
- excel vba 实现跨表单(sheet) 搜索 - 显示搜索行记录搜索历史
- [LeetCode] Score After Flipping Matrix 翻转矩阵后的分数
- 关于SpringCloud配置网关转发时出现一下啊错误:“com.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud.netflix.zuul.filters.route.RibbonRoutingFilter.handleException”
- 使用kingshard遇到的坑
- linux下修改时间和时区
- 047 大数据下的java client连接JDBC
- 给 Windows 文件菜单添加 ";用XX程序打开"; ";用XX编辑"; ";用XX运行";
- PowerShell实现基于SharePoint的网站HomePage Auto-Upgrade Solution