CSS

============================================================================================

前端的设计层考虑：数据结构，表现，行为进行分离，所以相应的有html,css,javascript

样式优先级：内联样式，内部样式，外部样式，浏览器默认样式,注意：如果内部或外部都有选中相同的元素，这时候会按权重来计算选择哪个，而不依赖内部优先级高于外部优先级。

权重计算：style attribute(内联)是1000,id是100,class or pseudo-class or attribute是10, element是1

选择器：#id .class element

选择器分组： 用逗号分开。用逗号分开的各部分都使用该样式

继承：如果子元素没有设置样式，父元素设置了样式，则它会继承父元素的样式

派生选择器（后代选择器）：用空格分开。空格前面为父容器，空格后面为无限层次的子元素。

属性选择器：[attribute\[=|~=|\|=|^=|$=|*=value\]]

三种定位机制：标准文档流--块级元素是自上向下（独占一行），遇到框边缘会自动换行，行级元素是自左向右，遇到框边缘自动换行

                        float

 四种定位:   1. static:这是定位的默认值，也就是标准文档流，块级元素是尽可能撑开到达父容器的边缘，行级元素是没有width和height属性,自适应内容大小。

                 2.relative：它和absolute及fixed都伴随着left,right,top,bottome属性，static position没有这几个位置属性，relative是相对于标准文档流的相对位置。也即相对于static时位移。它所留的位置没有被填充。会产生overlap

                 3.absolute：是相对于它的含有positioned定位属性的祖先容器的位移，除static外的其它三个定位为positioned定位,如果都没有找到positioned定位的父元素，它就是相对于body的定位。它所留的位置被填充。会产生overlap。缩为行内元素。

                 4.fixed：是相对于viewport（可视窗口frame）的位移，它所留的位置被填充。会产生overlap，缩为行内元素。

float:是一种特殊的定位，如果float:left，表示它在父元素的left:0;top:0;如果float:right;表示它在父元素的right:0;top:0。其它后面的兄弟元素会填充。它是为了解决环绕，如果不想让其它元素环绕，而另起一行，可以在其它元素上使用clear属性，如果想想让overlap元素扩展大可以使用overflow:auto。缩为行内元素。

float用在哪个元素，则表明它与兄弟节点之间要float，而对当前元素的子元素没有效果。

max-width:会自动调节每行的字符数。

块级元素与行级元素都是盒子模型，盒子模型由四部分组成:margin,padding,border,content

盒子元素的显示是由5层由上而上叠加而成，这5层分别为border,content+padding,background-image,background-color,margin

============================================================================================

div居中

#container {

width: 600px;

height: 400px;

background-color:#f2eeee;

margin-left:-300px;

margin-top:-200px;

position:absolute;

top:50%;

left:50%;

}

遮罩

#mask{

top:0;

left:0;

width:100%;

height:100%;

position:absolute;

background-color:#e0e0e0;

opacity:.70;

z-index:500;

}

============================================================================================

垂直外边距父子元素合并：必须设置给父元素设置border-top或者padding-top,否则子元素的外边距会影响父元素的外边距

垂直外边距兄弟元素合并：取外边距大的值

============================================================================================

获取网页的大小document. documentElement .clientHeight/clientWidth

获取viewport的大小document. documentElement .scrollHeight/scrollWidth

element.offsetLeft是获取相对父元素的相对位置， element.offsetParent是获取当明元素的父元素

获取绝对位置 可以通过递归获取 element.offsetParent.offsetLeft叠加来获取绝对位置

获取相对位置：绝对位置-document. documentElement.scrollLeft

============================================================================================

css中的伪类pseudo-class的属性content:

例如：p:before{content:''}在p标签的前面插入content内容。

content内容可以为：

b.content：attr（title） 可以为当前标签的属性值。

c. content:"大浪" 可以为字符串，这里面的字符集为unicode集，unicode集里有图标字符。所以可以c. content:"\2019",其中2019表示向左键头的unicode的十六进制编码，在html中也可以使用"实体编码"来显示字符，并且前辍是&# ， ← 等价于十进制的 ←

d.content:url(123.gif) 可以引用图片。

unicode字符搜索： https://unicode-table.com

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================

============================================================================================