网页布局学习笔记

1-自动居中:

-----给父元素设置宽度(百分比或者固定宽度都行),设置父元素margin属性的左右值为自动,既是:{width:80%; margin:0 auto;}。

2-清除浮动影响的其中两种方法:

-----1-给父元素设置overflow:hidden;

-----2-给受影响的元素设置clear属性,值可以是both,left,right。

3-定位分为3种:

-----1-static静态定位,就是默认的状态;

-----2-relative相对定位,没有脱离文档流;

-----3-absolute绝对定位,脱离了文档流,如果没有已经定位的祖先元素,就参照根元素html进行绝对定位,如果有已经定位的祖先元素,就参照最近的并且已定位的祖先元素进行绝对定位;

-----4-fixed固定定位,脱离了文档流,参照浏览器的可视窗口进行绝对定位;

-----其中fixed也是属于绝对定位的,所以定位分为3种:静态,相对,绝对。

4-用绝对定位进行一横两列的布局案例:

-----1-给包裹层mainbody设置相对定位relative属性,作为需要设置绝对定位的子元素的参照层;

-----2-给第二列no2层设置绝对定位absolute属性,并设置top属性为0,使它与包裹层顶部齐平,再设置left或者margin-left属性,使它与兄弟元素no1分成两列并有一定的间隔。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,875评论 0 6
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 962评论 0 1
  • position属性比起其他的基础属性来讲要复杂一些,我在这试着把里面的门道全部总结出来。 目前position有...
    microkof阅读 3,667评论 3 5
  • 听着闹铃的声音,机械式的起床,洗漱,等车…… 有人说,你工作时脸上没有过笑容,我说我已被生活压的喘不过气来。 不为...
    古月_e0ab阅读 206评论 0 0