美文网首页走在路上
网页布局学习笔记

网页布局学习笔记

作者: 还能更欢乐吗 | 来源:发表于2015-11-28 16:32 被阅读58次

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分成两列并有一定的间隔。

相关文章

  • 网页布局学习笔记

    1-自动居中: -----给父元素设置宽度(百分比或者固定宽度都行),设置父元素margin属性的左右值为自动,既...

  • HTML入门

    网页布局:div布局与CSS控制 那个学习视频是从布局开始讲起的,那我就从这里开始记笔记吧 html引用css方法...

  • 网页布局笔记

    一、原理 CSS中,存在3种的定位机制: - 标准文档流(Normal flow)浮动(Floats)绝对...

  • 学习笔记(网页布局 样式分类)

    网页布局 1.在“当前版面”分出独立的区块:纵向或横向。2.纵向:每一个区块写一个div(div本身自占一行)。3...

  • 1.网页布局基础

    网页布局基础 什么是网页布局?网页布局是网页制作的基础(DIV+CSS网页布局) 分类:流式布局,浮动布局,绝对定...

  • 用CSS进行网页布局 学习笔记

    网页布局基础知识 一列布局 margin: 0 auto 使内容居中 二列布局 1.自适应宽度:给左右两列设置左...

  • CSS三大核心-盒子模型

    页面布局要学习三大核心,盒子模型、浮动和定位。 网页布局过程: 1、先准备好相关的网页元素,网页元素基本都是盒子B...

  • 6、盒子模型 边框、圆角、阴影、内外边距、外边距塌陷

    1、网页布局的本质 网页布局的核心本质: 就是利用 CSS 摆盒子。 网页布局过程: 先准备好相关的网页元素,网页...

  • Flex布局是什么?Flex的运用场景和概述

    我认为前端学习的第一个难点就是网页布局layout,当你学习了基础的html和css,就应该实战一个网页布局案例。...

  • 12 CSS中的盒子模型

    页面布局要学习三大核心,盒子模型、浮动和定位。学好盒子模型能非常好的帮助我们布局。网页布局.png 1.看透网页布...

网友评论

    本文标题:网页布局学习笔记

    本文链接:https://www.haomeiwen.com/subject/fondhttx.html