（1）两列布局（左边顶宽，右边自适应）
方法一：采用（左边）position：absollute;并在（右边）设置 margin-left 的值
方法二：（左边）采用 float;并设置（右边）overflow:auto;(隐藏溢出的内容)
方法三：采用 flex 布局（左边宽度固定，右边 flex:1）
（2）三列布局
方法一：（左右）两边设置 position: absolute；和 top:0;left:0;right:0; 中间
设置 margin 即可
方法二：左右采用 float,中间设置 overflow:auto;和 margin:0 300px;
注释：div 顺序浮动元素放在一起，因为浮动会影响后续元素
方法三：采用 flex 布局（left,right 固定宽，flex:1）
三、 css 选择器的优先级和权重
选择器的优先级依次是: 内联样式 > id 选择器 > 类选择器 > 标签选择器 > 通
配符选择器
4、浮动元素引起的问题以及清除浮动的几种方式
浮动引起的问题
1.父元素的高度无法被撑开，影响与父元素同级的元素
2.与元素同级的非浮动元素会紧随其后（类似遮盖现象）
3.如果一个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页面显示的结构（即
通常所说的串行现象）
解决方法如下
1.为父元素设置固定高度
2.为父元素设置 overflow：hidden 即可清除浮动，让父元素的高度被撑开
3.用 clear：both 样式属性清除元素浮动
4.外墙法：在父元素外面，添加“一道墙”，设置属性 clear：both；
5.内墙法：在父元素内部，浮动元素的最后面，添加一道墙，设置属性 clear：both；
6. 伪 元素 ： 为 了 少 创 建 元 素 ， 对 父 元 素 添 加 after 伪 元 素 ， 设 置 属 性 content ： "
剩余18页未读，继续阅读
weixin_47188696
- 粉丝: 0
- 资源: 1
我的内容管理
展开
最新资源
- AirKiss技术详解：无线传递信息与智能家居连接
- Hibernate主键生成策略详解
- 操作系统实验：位示图法管理磁盘空闲空间
- JSON详解：数据交换的主流格式
- Win7安装Ubuntu双系统详细指南
- FPGA内部结构与工作原理探索
- 信用评分模型解析：WOE、IV与ROC
- 使用LVS+Keepalived构建高可用负载均衡集群
- 微信小程序驱动餐饮与服装业创新转型：便捷管理与低成本优势
- 机器学习入门指南：从基础到进阶
- 解决Win7 IIS配置错误500.22与0x80070032
- SQL-DFS：优化HDFS小文件存储的解决方案
- Hadoop、Hbase、Spark环境部署与主机配置详解
- Kisso：加密会话Cookie实现的单点登录SSO
- OpenCV读取与拼接多幅图像教程
- QT实战：轻松生成与解析JSON数据
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
