为了账号安全,请及时绑定邮箱和手机立即绑定

《网页布局基础》-学习笔记

标签:
Html/CSS
W3C标准

结构化标准语言(HTML和XML)
表现标准语言(CSS)
行为标准语言(DOM和ECMAScript)
常见块级元素:div ul ol li dl dt p...
CSS的定位机制:标准文档流,绝对定位,浮动


盒子3D模型

从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

border:边框粗细 样式 颜色
padding:上 右 下 左
margin:1.上 右 下 左;2.上右 or 下左 or 上左 or 下右;3.上 左/右 下

背景图像/背景颜色:

.book{ background:url(../images/t_book.gif) no-repeat #eff9f9;}

分析:background:url(../images/t_book.gif) -〉背景图像
eff9f9; -〉背景颜色
no-repeat -〉不重复


自动居中一列布局

需要设置 margin 左右值设置为 auto,而且一定要设置width为一个定值。
使#mainbody和#footer宽度以父包含块wrap宽度为准自适应: 

#mainbody, #footer{width:100%}

一个网页一般分为三个部分,#header,#mainbody,#footer,
如果想让整体网页居中,先将网页包裹成一个块级元素,class="wrap"

 .wrap{margin:0 auto;width:960px}

如果设置了{margin:0 auto;}不要再设置浮动或者绝对定位,因为那样会让你的居中效果消失。


浮动

可实现块级元素横向排列
1、3个属性值:left-左浮动,right-右浮动,none-不浮动
2、设置了浮动的元素,仍旧处于标准文档流中,意味着会占据标准文档流中的空间,对周围的元素产生影响
3、当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化(没内容时直接缩到浮动的那一边,看不见了)
4、当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。


清除浮动的常用方法

1.clear属性-常用

p{clear:both;}
p{clear:left;}
p{clear:right;}

2.overflow属性-父级

p{width:100%; overflow:hidden;}
p{width:960px; overflow:hidden;}

两种清除浮动方法的使用场景
1、当子元素设置了浮动,父元素没有设置浮动而导致的父元素高度不能自动扩展(此时父块在下,子块漂浮起来,脱离父块的盒子,父块没有子块的支撑,就缩成一条线),
缩成一条线,子元素从父元素中溢出时,适合使用overflow属性的方式来清除浮动;
此法可同时去除紧邻的块级受到的浮动影响,而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。

解释:width设置为100%就是继承父容器的宽度(如果本身就是块级元素,则自动具备此特性)。左右撑满整个容器,为自己清除浮动创建条件。再加溢出隐藏,就可以把包裹浮动的部分去除(即去除浮动)。

2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear属性更为合适。


绝对定位布局

position属性拥有三种定位形式:1、静态定位 2、相对定位 3、绝对定位
可设置4个属性值:
static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
在position属性中绝对定位absolute和固定定位fixed都属于绝对定位形式。


相对定位

1.仍旧处于标准文档流中,即占据一定的空间
2.拥有偏移属性和 z-index属性(会产生覆盖效果)
3.相对初始位置的偏移的位置


绝对定位

特点:

  • 建立了以包含块(父级元素)为基准的定位
  • 完全脱离了标准文档流
  • 随即拥有偏移属性和z-index属性
  • 如果没有设置宽度,宽度随内容变化而变化(和浮动相似)

情况1:未设置偏移量
无论是否存在以定位祖先元素,都保持在元素初始位置(类似于没有速度也就没有相对运动这一说法) 但是脱离了标准文档流
情况2:设置偏移量
1.无已定位祖先元素:以html为偏移参照基准
2.有已定位祖先元素:以距其最近的已定位祖先元素为偏移参照基准
已定位元素:非静态定位元素。


使用absolute实现横向两列布局

布局大多数情况下用float定位,用absolute常用于一列固定宽度,另一列宽度自适应的情况
特点:
1.父元素设置相对定位:relative 设置父元素定位是为了不让自适应层相对HTML定位
#mainbody{width:100%;margin-top:20px;position:relative;}
2.自适应宽度元素设置绝对定位:absolute 让其脱离文档流
#content{position:absolute;top:0px;margin-left:200px}
*注意:固定宽度层的高度 > 自适应宽度层的高度

点击查看更多内容
34人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消