学习css（页面布局篇） -凯发k8官方网

2019独角兽企业重金招聘python工程师标准>>>

######图文混排

*{clear:both;/*清除浮动*/ }

######几种不同的居中布局方法

*{line-height:25px;height:25px;/*文本内容垂直居中：行间距等于行高*/`width:400px;margin:0 auto;/*固定宽度且居中*/ }

######由浮动引起的布局问题的凯发k8官方网的解决方案

######绝对定位与相对定位

######适配ipad屏幕的布局

######经典的clearfix和升级版的clearfix 经典的，单独添加的div在ie和firefox中会引起高度变化，父元素使用overflow：hidden时，如果子元素定位到部分或全部在父元素之外，父元素会对超出子元素部分进行裁剪。

.clearfix{clear:both;height:1px;margin-top:-1px;/*消除高度影响*/overflow:hidden;/*可清除浮动，但有副作用*/ }

升级版的clearfix

######滚动条的控制

*{overflow:scroll;/*强制显示*/ overflow:hidden;/*隐藏滚动条*/ overflow-x:scroll;/*强制显示*/overflow-x:hidden;/*隐藏ie的水平滚动条*/ overflow:-moz-scrollbars-horizontal; overflow:-moz-scrollbars-vertical;/*强制显示mozilla的垂直滚动条，即使需要水平滚动条时也不会出现，上一句同理*/ }

######css3文本分列 针对不同内核的浏览器，分别加上-webkit-或-moz-,文本自适应text-align:justify;

• column-count定义栏目的数量
• column-width定义每栏的宽度
• column-gap两栏之间的距离
• column-rule每栏之间的边框
• column-rule-width每栏之间边框宽度
• column-rule-style每栏之间边框样式（实线、虚线）
• column-rule-color每栏之间边框的颜色
• column-span定义元素可以在栏目上定位显示

######flash参数设定引起的布局问题 浮动层浮动到flash上方时，可在间加入或在中加入wmode="opaque"

• wmode=window 在web页上用影片自己的矩形窗口来播放应用程序，“window”表明此flash应用程序与html没有任何交互，并且始终位于顶层。
• wmode=opaque使应用程序隐藏页面上位于它后面的所有内容。
• wmode=transparent 使html页的背景可以透过应用程序的所有透明部分显示出来，可能会降低动画性能。

######metro和flexbox布局风格

转载于:https://my.oschina.net/jediknight/blog/512690

总结

以上是凯发k8官方网为你收集整理的学习css（页面布局篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。