DAY_05 HTML小白学习笔记

一、DIV+CSS对页面布局

• 表格：一行或一列的高度等的变化，会引起整行整列都随之而改变。

对搜索引擎抓取不利，可维护性差，嵌套过多代码量大，变动性大。

• DIV+CSS：表现和内容分离，代码简洁，提高页面的浏览速度，易于维护、改版。提高搜索引擎对网页的索引效率。(html和css文件分离出来)

*注意：

对于搜索引擎，仅可使用一个<h1>可使用多个<h2>等

有意义的标签有各自的样式，使用CSS时往往需要先去除他们的样式，再重新用CSS布局。

所以常用<span><div>等无意义的标签(仅为包含内容的一个标记)，适合于布局。

<div>用于阻隔用途。<span>用于强调、突出、区分作用。

• 区块：W3C标准盒子(每一个区块都是一个W3C标准盒子)

盒子包括有：

border边框

内部填充(补白区)：padding

宽度width

高度height

外边距(盒子与盒子之间的距离)margin

兼容性：

W3C标准：非IE浏览器(开发者常用)——有利于搜索引擎的搜索

非标准：IE浏览器

width:300px; height:300px;

指定高、宽时，会出现兼容性问题。

不指定时，使用填充、内边距都不会产生影响。

兼容性的解决方法：

width:250px  !important;

width:300px;

*同样的属性以后写的为主。而使用了!important之后，标准的就会以该条为主。

但是IE浏览器会忽略掉!important。

二、和页面布局有关的CSS属性

1.position位置属性

2.z-index层级先后顺序，后面跟数字，数字越大的在上面。

3.text-lign文本位置：(盒子里的内容)[横向排列]

right:靠右显示

left:靠左显示(默认的)

center：居中显示

4.line-height：行高

用于设置内容垂直居中(使其改变字体大小时不产生对盒子大小的影响)

padding同样可产生居中效果(仅适用于字体大小固定的情况)

5.display:是否要进行元素显示

①让不换行<span>的标签换行 display:block;

②让本身换行<div>的标签不换行(存在兼容性问题) display:inline;

③将标签隐藏，让这个盒子不显示(位置也没了) display:none;

6.visibility:(针对嵌套层)[内容隐藏，但位置仍存在，不影响页面的布局]

inherit;子层继承父层的可见性。

visible;无论父层是否可见，子层都可见。

hidden;无论父层是否可见，子层都隐藏[最常用]

7.overflow:设置超出部分隐藏

overflow:hidden;隐藏超出部分

scroll;始终存在滚动条

auto;自动

8.float:设置区块漂浮属性(文档流是一层、飘浮是一层、定位又是一层)

margin-left:  ;设置盒子与盒子之间的间隔。

也存在着兼容性问题。解决方法：让所有的盒子都漂浮起来。

(漂浮：当第二个盒子漂浮起来，第三个盒子可钻入第二个盒子的底下位置)

上层有足够空间均就在上层，上层空间不足时，自动换行到下一行。

(换行的过程中不会忽略掉多出来的高度，会补到多出来的后面)

9.clear:清除漂浮属性

clear:left;左边有浮块时另起一行。

right;右边有浮块时另起一行。

both;单独另起一行。