网页布局基础 第四次

绝对定位布局:
使用position属性实现的网页布局
CSS中规定的第三种定位机制
能够实现横向多列布局以及较为复杂的定位:比如:带有遮罩层效果的提示框;固定层效果;全屏广告
position拥有三种形式四种值:
1、静态定位 static
2、相对定位 relative
3、绝对定位 absolute
固定定位 fixed
3和4都属于绝对定位,静态定位是元素默认状态,处于标准文档流中

相对定位特点:
1、相对于自身原有位置进行偏移
2、仍旧处于标准文档流中
3、随即拥有偏移属性和z-index属性
z-index:空间的层堆叠
设置
底层:距离观察者最远
……
-3 层
-2 层
-1 层
0 层 (默认)
1 层
2 层
3 层
……
顶层:最接近观察者

绝对定位特点:
建立了以包含块为基准的定位
完全脱离了标准文档流(块级元素不再独占一行)
设置绝对定位之后,如果没有设置固定宽度,宽度随内容变化而变化
随即拥有偏移属性和z-index属性

时间: 2024-12-28 16:33:18

网页布局基础 第四次的相关文章

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

Web前端攻城狮培养计划之前端小白入门:网页布局基础与常见网页特效

步骤1: HTML基础超文本标记语言(英文缩写:HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言,为搭建网页结构做出第一步.本阶段主要介绍了HTML的语法基础.表格.表单.等标签,并有案例结合,达到学以致用. 第1课 HTML基础HTML是网页制作必备技能,在本课程主要介绍HTML概念.语法及常用基础标签 第2课 HTML表格表格在网页中用于数据和排版,本课程介绍表格概念.语法.操作,并通过案例掌握知识. 第3课 HTML表单表单用于收集用户信息,本课程介绍

【网页布局基础】css布局学习总结

三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级元素都是盒子模型,下面说下盒子模型 盒子模型 盒子模型是网页布局的基石,border padding margin 下面给出盒子3d模型图便于理解 常见布局 自动居中一列布局 布局时候最重要的是把握三个技能点:标准文档流,块级元素,margin属性 自动居中代码:margin:0 auto: aut

网页布局基础 第三次(浮动布局)

清楚浮动 清除浮动的方法:对受到影响的元素设置如下属性1.为元素设置clear属性——clear:both;.clear:left;或者clear:right;2.同时设置width:100%(或固定宽度[固定宽度可能有问题])+overflow:hidden;2的width设置为100%就是继承父容器的宽度.左右撑满整个容器,为自己清除浮动创建条件.再加溢出隐藏,就可以把包裹浮动的部分去除. 横向两列布局的实现:这是网页布局最常见的方式之一主要应用技能:float属性——使纵向排列的块级元素,

CSS网页布局基础-圣杯布局和双飞翼布局

行布局 多列布局 圣杯布局 双飞翼布局 一.行布局 行布局垂直水平居中 注:这里没有用margin: 0 auto;先让它水平居中,而是使用了绝对定位布局,然后设置top:50%; left:50%;但是光设置这个还不够,因为这并不是水平垂直居中,因为它并没有考虑自身的宽度和高度,所以这里根据盒子本身的高宽又再此基础上设置了margin-left和margin-top.如果只设置了top:50%; left:50%;而没有设置margin-left和margin-top,效果如下: 代码如下:

网页布局基础 第一次

图片来源:慕课网

网页布局基础-浮动整理

一.float 1.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化 2.清除浮动 (1)clear属性:both.left.right-----给受到浮动影响的元素添加 注意:当父级包含块缩成一条时,用clear:both清除浮动无效,他一般用于紧邻后面的元素为之清除浮动 (2)设置宽度等于100%,同时设置overflow: hidden-----给受到浮动影响的元素添加 3.仍处于标准文档流中 二.position属性:static(静态定位).relative(相对定

网页布局.....待更(三大阶段,预计二周内更完)

网页布局基础        简介 1.什么是网页布局       网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.       2.流式布局,浮动布局,绝对定位布局.相关知识点:标准文档流,盒子模型,float属性position属性等. W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流 特点:从上到下,从左到右输出文档内容 由块级元素和行级元素组成 块级元素:从左到右撑

绝对定位实现网页布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-