html补充

1.opacity(透明度)

不仅对颜色有效，对图像或者页面中其它的元素也有效。

opacity: value|inherit;

value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。

注意： 当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。
 因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

---

2.cursor(鼠标形式)

1. cursor:url('img/sanchaji.png'),pointer;//自定义图标的时候，后面必须加上一个普通光标

2. cursor:default;

cursor属性的默认值为 auto， 它表示由浏览器根据当前上下文，自动确定最适合的光标类型。auto 与 default 不同，default 表示使用客户端操作系统默认的光标类型。

---

4. display: flex (类似于行内块元素)

felx 详解

全称为 “Flexible Box Layout”，即 “弹性盒布局”，旨在提供一种更有效的方式来
布局对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化

.container {
  display: flex | inline-flex;
}

---

5、justify-content （弹性容器中对齐和分布子元素的水平位置）

该属性可应用于具有 display: flex 或 display: inline-flex 的父容器。以下是 justify-content 属性的几个常用取值：

1. flex-start: 默认值，子元素靠左对齐。
2. flex-end: 子元素靠右对齐。
3. center: 子元素在容器内居中对齐。
4. space-between: 子元素平均分布在容器内，首尾子元素靠边。
5. space-around: 子元素平均分布在容器内，包括首尾子元素。

6.###

（1）定位：position

一般：子级元素用绝对定位，父级元素用相对定位

relative 相对定位，移动的时候相对原来的定位，原来的位置不脱离标准流

absolute 绝对定位，现对于他的父元素来说，如果最近的，没有祖元素或者祖元素没有定位，那么，就相当于浏览器为定位标准，定位之后，原来的位置不在占有空间

fixed 固定定位,：是固定于浏览器可视的位置，即，浏览器滚动时，页面的元素的位置不改变

sticky 粘性定位，浏览器的可视为参照点，占有原来的位置，必须有 top bottom right left 其中的一个，兼容性不太好

.op{
    position: relative/absolute/fixed/sticky;
    top:10px;
    bottom:10px;
    right:10px;
    left:10px;
}

(2)叠放次序

.op{
	z-index:1;//可以是正数，负数，0，默认auto
}

比说：两张图片在同一位置，那么，谁在上，谁的z-index值大，

注意：只有定位 position 的盒子才有用

(3) 元素的隐藏和显示

display :

类似于网页中的广告，点击关闭，在此刷新会显示出来

.op{
	display: none;//隐藏， 不在占有原来的位置
    display: block;//除了转化为块级元素之外，还可显示元素，重新占有原来的位置	
}

visibility

.op{    
	visibility: hidden;//隐藏， 占有原来的位置   
	visibility: visible;//显示元素，占有原来的位置   
}

overflow

.op{    
	overflow: scroll; //溢不溢出都显示滚动条
    overflow: auto; // 需要才显示滚动条
     overflow: hidden;//溢出的部分隐藏起来
     overflow: visible;//默认的，超出的部分显示 
}

(4)字体图标

iconfont.cn 阿里的

icomoon.io github的

下载之后，点击 demo.html 文件，找到要添加的图标，下面有个小方框的东西，虽然看起来都一样，复制下来，放到 html 文件中即可

举例：

<span> □ </span>   //注意，这个方块是复制相应的图标的方块

但是css中要使用：

span{
	font-family:'icommon'; //这个可以复制前面的
	//其他的样式 大小，颜色。。。。
}

// 该文件就是前面下载的  这个是 style文件， @font-face 里面的内容要复制到html页面中，主页面里 放到 css标签的里面，然后后面的要根据上面的 span 里面的写法

@font-face {
  font-family: 'icomoon';//复制这个到 span
  src:  url('fonts/icomoon.eot?9gijve');
  src:  url('fonts/icomoon.eot?9gijve#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?9gijve') format('truetype'),
    url('fonts/icomoon.woff?9gijve') format('woff'),
    url('fonts/icomoon.svg?9gijve#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pencil:before {
  content: "\e905";
}
.icon-pencil2:before {
  content: "\e906";
}
.icon-quill:before {
  content: "\e907";
}
.icon-pen:before {
  content: "\e908";
}
.icon-blog:before {
  content: "\e909";
}
.icon-eyedropper:before {
  content: "\e90a";
}

追加时，在网址里有个按钮 import icons 选择 .josn 后缀的文件，在添加新的即可

三角形的做法：

.op{
	margin-top-color: blue; //这个是下三角，其他的同理
}

(4)文本域取消用户拉大效果

inptu{
	outline: none;//取消表单轮廓
}

textarea{
	resize: none;
}

(5) vertical-align

实现行内块元素和文字垂直对齐，具体可参考《浏览器搜索框》

一般属性值多用: midddle

也可解决图片下部分会有默认的白色空隙的问题

(6)对于 超链接打开方式的追加解析

对于该问题的来源，是由于导航栏和主界面分开写而导致的问题

_top、_parent、_self 和 _blank 都是 HTML 中使用的 <a> 标签的 target 属性值，用于指定链接在何处打开。

• _top：在整个窗口中加载目标页面。如果当前页面在一个框架集内，将会在顶层框架中加载目标页面，并且会取消所有已有的框架集。

• _parent：在父级框架中加载目标页面。如果当前页面不在框架集中，那么该属性与 _self 等同，即在当前窗口中打开目标页面。

• _self：在当前窗口中打开目标页面，默认值。

• _blank：在新窗口中打开目标页面。