HTML

网页的两种布局

一、header固定不动，左侧菜单绝对定位(absolute)，空出头部和中间板块的位置。固定于当前页面，随着整体页面滑动而消失，中间板块，也用绝对定位，空出头部和左侧菜单的位置，不设置bottom和页面高度的时候，会根据中间板块的内容的多少调整板块高度

html元素主要分为3类，块级元素、内联元素以及内联块级元素。

①布局实现上板块不动，左侧固定，中间板块的大小随内容的多少改变，当出现滚动条滚动时，左侧内容会随着滚动消失。

二、在布局方式①的基础上，把bottom设置为0，当内容超出时，背景不会跟上，添加overflow:auto属性就可以解决。布局②实现上，左，上板块固定大小和位置，中间板块在板块大小内内容滑动。

---

元素的分类：

（1）块级元素

• 在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点：

• 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行；（一个块级元素独占一行）

• 2、元素的高度、宽度、行高以及顶和底边距都可设置；

• 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

（2）内联元素

• 在html中，span、a、label、input、 strong 和em就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点：

• 1、和其他元素都在一行上；

• 2、元素的宽度就是它包含的文字或图片的宽度，不可改变。

注意：为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。

（3）内联块级元素

• 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点：

• 1、和其他元素都在一行上；

• 2、元素的高度、宽度、行高以及顶和底边距都可设置。

注意：img是inline元素，但是他同时也是替换元素，他有着特殊的表现：

• 1. 可以设置width/height;
• 2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置；
• 3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是a里面包含的img；
• 4. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素。

---

其他标签随笔：

form标签的使用

• form标签里面嵌套表单，可以实现表单里面按钮的具体功能，比如，reset,submit

• form标签的action属性，传递表单数据提交的地址。

• form标签的enctype="multipart/from-data"属性，可以上传文件。

• form表单里的name属性，负责绑定数据，在后台显示 name:{输入的数据}，value属性用来区别特殊标签(没有输入的标签，例如，checkbox)的数据绑定，在后台显示 name:{value}，表示用户选择了哪一个。

• name相同，value不同，形成互斥并且代表不同的值。

• select标签里的option标签也是同样适合通过相同的name，不同的value来区分用户真正选择了什么。

• form标签的method属性，规定数据传递的方式，如post，get。

---

• lable标签的for属性，可以关键其他元素，实现点击标签本文，获取关联元素的焦点
  < lable for=“元素id”>

---

ul li，ol li，dl dt dd的使用

• ul li嵌套 li的前面是黑点

• ol li嵌套 li的前面是数字

• dl dt dd嵌套 dt是标题 dd是缩进以后的文本

display的使用

• display:none;
  隐藏元素的可见性，并且其位置也消失(可能会被下面的其他元素补上)

• visibility:hidden;
  隐藏元素的内容，其位置保留，形成留白区。

• display:inline-block;
  使标签同时具有内联标签的特点和块级标签的特点，即，可以自定义高度和宽度。

• cursor:pointer;
  改变鼠标聚焦到元素时的显示状态为“小手”。

float的使用

• float:left;
  控制元素的漂浮，但是会脱离父级元素，如果要想漂浮但是又不脱离父级元素，需要用clear:both;(在使用了float:left的块级元素后面添加一个块级标签，写入clear:both属性值)

• 另一种方法让所有子标签装在父级标签里
  为父级标签添加一个伪类after，并把css设置为

.clearfix:after{
     
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

• 针对多个浮动标签，需要撑起父级标签，并显示父级标签的“背景”的。
  具体应用:如果子标签需要float;就在父级标签的class里面写入属性:clearfix。

position定位

• position:fixed;
  固定定位，相对于浏览器窗口定位。
  把元素固定在窗口的一个位置，无论页面怎么活动，元素始终保持在固定位置不动

• position:absolute;
  绝对定位，相对于浏览器窗口定位。
  但是会随着页面的滚动，一起滚动。

• position:realitive;
  相对定位，一般单独使用没有什么效果，需要结合position:absolute;，使元素相对于使用了realitive的父级元素相对定位，不再以浏览器窗口为基准。(这里的父级元素不是亲父级元素，当使用了absolute定位时，标签会一直往上寻找一个带有realitive的父级元素，如果没有，就是以body(浏览器窗口为准))。

---

透明度属性设置

• opacity:1; 不透明

• opacity:0.5; 透明度为原来的一半

• background-color:rgba(0,0,0,.6);
  设置背景颜色透明度为0.6。

• inline-block
  使元素堆叠起来，但是会使元素之间有3px的边距，可以使用float:left;消除掉这3px。

a标签target属性的属性值:

• 1、_blank：target="_blank"
  含义：在一个新的窗口打开被连接文档
• 2、_self：target="_self"
  含义：在当前页面打开被链接文档
• 3、_parent：target="_parent"
  含义：在父框架集中打开被链接文档
• 4、_top：target="_top"
  含义：在整个窗口打开被链接文档

iframe标签

• 创建一个窗口用来显示标签里面的src属性里的网址内容(嵌套网站)。(伪Ajax)

• < base target="_blank">
  设置当前网页里的所有链接打开方式为在新的页面打开。(写在head里面)