个人博客问题

2.怎么进行录屏？GIF制作？

Mac自带的QuickTime就可以，file里有录制截屏。录完之后用GIFbrewery进行转换

或者直接用GIFbrewery的record screen录制 然后直接生成

3.div中元素怎么居中？

行内元素：

水平居中： text-align:centerul水平居中:加

display:table;margin:0 auto;

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。垂直居中： line- height:父元素的height

块元素：

水平居中：

①margin:0 auto

0指上下外边距为0，auto指左右外边距自适应，此时水平居中。（该方法不适用于垂直居中） 这种方法不适用于通屏，即若子元素溢出，则在父元素中不居中

②position:relative/absolute/fixed

relative:相对定位，保留初始位置（即不浮动）

特点：1.不影响元素本身特性 2.不使元素脱离文档流（不浮动） 3.可以不设定偏移量，此时位置不会发生变化 4.该元素是相对于自己本身位置的偏移量。

absolute:绝对定位，不保留初始位置

特点：1.元素完全脱离文档流（浮动） 2.使内联元素支持宽和高 3.让块标签内容撑开宽高 4.相对父元素偏移，且逐层查找，直到document，若父元素没有position:relative属性，则继续向上找，直到document,即相对于浏览器左上角。 5.提升层级，即盖在其他未用该属性的元素上，或者在他之前使用该属性的元素上。（优先级可以用z-index设置，值越大，优先级越高，但是若父元素，即使用position:relative的元素也被覆盖，则没有用）

fixed:相对于视窗定位，即不管滑轮向下还是向上拉，该元素位置始终不变。（IE6以下不兼容）

< style>.test{width:200px;height:100px;background-color:yellow;}.test1{width:200px;height:100px;background-color:green;position:relative;left:50%;margin-left:-100px; <!--子元素的height的一半-->}.test2{width:200px;height:100px;background-color:blue;}.test3{width:200px;height:100px;background-color:red;} </ style> </ head> < body> < div class="test"> </ div> < div class="test1"> </ div> < div class="test2"> </ div> < div class="test3"> </ div>

(插不了图片。。。我口述吧。。) 就是保留了图片本来的的位置，而图片移动到了屏幕中央的位置。 若将上面test2的position改为absolute，则浮动，图片2本来的位置被test3覆盖 用上面position，left，margin-left三个属性也可以使div水平居中（垂直居中将left改为top即可） 这种方法适用于通屏，即若子元素溢出，则在父元素中也居中。

优点：不用知道父元素的width

垂直居中：

①设置父元素的padding

缺点：需要知道父元素的width值

②上述水平方法第二个，将left改为top

③绝对居中（即水平，垂直都居中）

实现方法：父元素相对定位，子元素绝对定位，在子元素中添加属性

{ margin:auto; top:0; left:0; bottom:0; right:0;}

该方法不浮动，但也存在不通屏的问题。

4.怎么让两个相邻div高度相同？

左边和右边高度不一样，怎么才能一样呢？

把左边和右边单独放到一个div里，div设置成display=flex即可

用了display=flex之后，float、clear、 vertical-align属性就失效了

关于display=flex的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5.position display float之间是什么关系？

https://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html

还有其他笔记已收藏

6.a元素去掉下划线？

对超链接下划线设置 使用代码"text-decoration"

text-decoration参数： 

none : 　无装饰

blink : 　闪烁

underline : 　下划线

line-through : 　贯穿线

overline : 　上划线

一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括： 

总: a          表示所有状态下的连接 如 a{color:red} 

① a:link： 未访问链接 ,如 a:link {color:blue} 

② a:visited： 已访问链接 ,如 a:visited{color:blue} 

③ a:active： 激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue} 

④ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue} 

一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。 

前三者分别对应body元素的link、vlink、alink这三个属性。 

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。

另外，a:active不能设置有无下划线（总是有的）