学习CSS（页面布局篇）

最新推荐文章于 2024-09-26 11:55:47 发布

weixin_34050005

最新推荐文章于 2024-09-26 11:55:47 发布

阅读量57

点赞数

文章标签： python

原文链接：https://my.oschina.net/jediKnight/blog/512690

版权

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

######图文混排

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

<div>
  <a href="#" target="_blank"><img align="left" src="./fire.jpg"></a>
  <span>图文混排右侧标题</span>
  <p>图文混排绕图片段落文字</p>
</div>

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

*{
    line-height:25px;
    height:25px;/*文本内容垂直居中：行间距等于行高*/`

    width:400px;
    margin:0 auto;/*固定宽度且居中*/
}

######由浮动引起的布局问题的解决方案

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

######适配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;