实习day06 下

实习day06

要想做出一个好看的网页需要CSS，JavaScript为我们的网页提供"魔法"，使网页看上去美观，让客户可以能够接受我们写的网页。

网页版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

• 一列固定宽度且居中
• 两列左窄右宽型
• 通栏平均分布型

这三种是很常见的网页分布排版。

清除浮动

为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

文字混排效果，但是现在拿来做布局，出现很多的问题。

准确的说，不是清除浮动，清除浮动后造成的影响

清除浮动的方法

1. 清除浮动的方法
2. 父级添加overflow属性方法
3. 使用after伪元素清除浮动
4. 使用before和after双伪元素清除浮动

定位(position)

如果用标准流或者浮动，实现会比较复杂或者难以实现，这时候我们就需要使用定位。

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式(定位的分类)

选择器{position:属性值;}

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

相对定位r(elative)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。相对定位不脱标（不脱离标准流）

1.元素相对定位后，虽然可以用便偏移量改变位置，但是在文档流中的位置仍保留。
2.每次移动的位置，都是以自己的左上角为基点移动。

绝对定位(absolute)

绝对定位可以让元素脱离正常的文档流，实现更灵活的布局方式

子绝父相
首先，绝对定位是将元素依据最近的已经定位绝对，固定，相对的父元素(祖先)进行定位。

也就是说,子级绝对定位，父级只要是定位(除static静态定位)就可以，也就是说，子绝父绝也行

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

水平居中的算法:

1. left 50% ，父盒子的一半大小
2. 再有外边距负的一半值即可

固定定位fixed

它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

固定定位是一种特殊的绝对定位

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

1.默认值是0，取值越大，定位元素越居上

2.取值相同，看书写顺序

3.数字没有单位

4.只有定位才有该属性，浮动，标准流，静态定位都没有该属性

四种定位总结

定位模式	是否脱标（脱离标准流）	是否使用偏移量	移动位置基准
静态static	不脱标，正常模式	不可以	正常
相对定位relative	不脱标，占有位置	可以	相对与自己移动
绝对定位absolute	脱标，不占位置	可以	相对于定位父级移动
固定定位fixed	脱标，不占位置	可以	相对于浏览器移动

定位模式转换

元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

元素的显示与隐藏

• display
• visibility
• overflow

display 显示

display 设置或检索对象是否及如何显示。

none : 隐藏功能

block : 除了转换成块级元素外，还有显示元素功能

特点：隐藏之后，不保留位置

visibility 可见性

设置或检索是否显示对象。

visible : 对象可视

hidden : 对象隐藏

特点：隐藏之后，继续保留位置

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

/*overflow: visible;*/  /*默认值,超出显示*/
/*overflow: auto;*/ /*自动   超出显示滚动条,不超出不显示滚动条*/
/*overflow: scroll;*/  /*一直显示滚动条*/
overflow: hidden;  /*不显示超出的内容,超出的内容隐藏*/