常见css水平自适应布局_html/css

来源：动视网责编：小采时间：2020-11-27 16:04:37

常见css水平自适应布局_html/css

常见css水平自适应布局_html/css_WEB-ITnose:左右布局，左边固定，右边自适应布局 BFC方法解决 div + css宽度自适应（液态布局） /*左边栏，设定宽度*/ body,#wrap{ width: 100%; border: 1px yellow; } .wrap_l { float: left; height: 150px; width: 150

推荐度：

点击下载本文 文档为doc格式

导读常见css水平自适应布局_html/css_WEB-ITnose:左右布局，左边固定，右边自适应布局 BFC方法解决 div + css宽度自适应（液态布局） /*左边栏，设定宽度*/ body,#wrap{ width: 100%; border: 1px yellow; } .wrap_l { float: left; height: 150px; width: 150

左右布局，左边固定，右边自适应布局

BFC方法解决

 div + css宽度自适应（液态布局）   这是左边部分
 这是左边部分
 这是左边部分 这是中间部分

原理：给左侧添加

overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的

用position:absolute;处理

 div + css宽度自适应（液态布局）   这是左边部分
 这是左边部分
 这是左边部分 这是中间部分

　　一般以父元素未计算元素，父元素一般有一定的宽度，绝对布局是相对父dom元素的，如果相对父dom元素无效，可以将父dom元素的postion：relative相对出来

这个写法兼容ie6以上的版本

用table布局

 div + css宽度自适应（液态布局）     我是左边 我是右边

　　table的布局的其实实现原理也部分设置到BFC的特性

display:table 仿table布局

 div + css宽度自适应（液态布局）   这是左边部分
 这是左边部分
 这是左边部分 这是中间部分   我是左边 我是右边

css3解决方案，主要利用弹性盒模型

 div + css宽度自适应（液态布局）   这是左边部分
 这是左边部分
 这是左边部分 这是中间部分

　　css3给我们提供的很多css2中很多很繁琐的问题，在css3为我们提供了弹性盒模型，之前的css3标签是display:box之后版本为flex，

　　它的特性就是：在子区域内添加任意数量的元素水平和竖直排序，子元素可以设置标签flex：1 控制所占的百分比，水平标签一般设置flex-direction：column 这种写法兼容最新版，老版本的是box-orient：horizontal

常见css水平自适应布局_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html 布局适应

热门焦点

常见css水平自适应布局_html/css

常见css水平自适应布局_html/css

常见css水平自适应布局_html/css

最新推荐

猜你喜欢

热门推荐