前端学习笔记
/**
* 创建于20190108
* 用于记录学习前端的笔记以及心得
*/
//20190108
·一个网页中可以有多个同样大小的标题
·hr——横线标签
·img标签中的alt属性的用处：在图片不能显示的时候替代图片在相应的位置，src属性中可以是相对路径，也可以是绝对路径，也可以是网络上某一个地方的图片，title属性的作用是让当鼠标悬停时现实的文字
//20190109
·input标签内部属性placeholder的作用：为输入框设置提示信息，此信息不能被删除，属于提示性文字
·input的type有date，是一个可供选择的日期框
·input的type之file，是一个浏览并选择文件的组件
·a标签可以包裹图片，也就是用图片来做超链接的入口
·a标签href属性中跟上：“javascript：”可以让此超链接点击后不进行刷新
·a标签中的href属性可以设置"#+所要跳转位置组件的id"就可以实现页面内部跳转
·每个组件属性都可以加上id，用于本页面识别标识
·a标签中的target属性：_blank选项是新打开一个标签页，_self选项是在本页面重新创建一个页面，覆盖本页面
·列表标签属性中有一个type，可以设置前面标号的形状
//20190110
·div标签是独占一行的，span标签是一个一个连起来的
·有的浏览器不支持audio标签，就可以在audio标签中加入“您的浏览器不支持audio标签”或者其他文字，在audio标签不可用的时候就会显示该文字
·style属性是css中的功能
·margin属性是设置外边距
·组件高度为height，宽度为height，如果内容为图片，则不能设置宽高，图片自动会把空间撑开，否则只能显示指定高度图片部分
·img标签中有width属性，可以设置图片的宽度，高度会等比缩放
·设置图片大小兼容页面宽度的时候，把width属性设置为100%即可，就可以兼容各种平台
·css中的样式优先级是行内样式优先级大于页面样式大于外部样式
·css中常用选择器：通用选择器：*{}中间写样式，作用于页面内所有组件
标签选择器：标签名{}中间写样式，作用于所有同类标签
类选择器：先在想要设定样式的组件属性中加入class属性，把他们的class设置为同一个，格式为（.设置的class的值）{}中间写样式；class属性可以设置多个值，中间用空格分开，比如class=”test test01” .test{color:green;} .test01{color:blue;}
这样带有class的标签可以同时设置两种样式
Id选择器：作用于带有相应id值得标签，格式为（#+所定义的id）{}中间写样式，一个页面中不能有两个相同的id，虽然在html页面中可以显示并运用，但是在js识别的时候就会出错，所以约定一个页面只有一个相同的id
复合选择器：把两个选择器结合起来，就是在指定的选择类别中再次选择，比如在div群中选择指定class名的标签，格式：div.test{} div#test{}中间不用空格，直接写就行
群组选择器：同时作用于多个选择器，中间以逗号分隔
后代选择器：用于选择在某一个标签中嵌套的标签，格式为父标签 子标签 子标签的子标签……中间用空格分隔，这种选择器会把父标签中所有的子标签全部使用样式，如果只对直系后代使用样式，就用直接后代选择器
直接后代选择器：只用于直系后代，直系后代的后代不使用，格式 父标签>子标签{}中间写样式
·选择器优先级别：选择器的针对性越强，它的优先级别就越高，如果优先级别相同，则先定义的优先级更高
·在行级标签中嵌套块级标签结果还是块级标签，还是独占一行
·css中display属性，可以在行级标签和块级标签之间相互转换
Display有四个属性：
none：让此标签隐藏
Inline：让此标签变成行内标签（不独占一行但是宽高不可变）
Block：让此标签变成块级标签（独占一行但是宽高可变）
Inline-block：让此标签同时具有行内标签和块级标签的属性，即宽高可变，而且不独占一行
·css文件以及html文件中style标签内的注释不能是html标签，而应该是/**/否则以下的代码无法运行
//20190111
·css盒子模型从内到外是：内容->内边距->边框->外边距
·组件的块级和行级不要轻易去改变，要灵活排版的话就是用float属性，块级元素在float起来之后就可以设置宽高了
·margin：0 auto；的意思是把上下外边距设为0，把左右外边距自动设置，即用父标签的宽度减去子标签的宽度然后除以二，这样子标签就实现了动态居中
·利用text-align和line-height属性居中只能水平垂直居中行级标签和行级块级标签，不能水平垂直居中块级标签
·利用定位的方法进行水平垂直居中的话可以一步到位，不用再加上magin：0 auto；直接使用left：50%；top:50%;margin-left:-所在组件长的一半;margin-top:-所在组件宽的一半
//20190112
·设置背景颜色透明：background-color：rgba（0,0,0,0.1）前面三个对应红黄蓝三原色的深度值，最后一个取值在0-1之间，越小透明度越高，前三个数字是十进制
·把超链接的下划线去掉用到css中的text-decoration属性，设置为none即可，在css中可以改变超链接字体颜色，用color属性
·酒红色三原色配比为126,28,51
//20190114
·标签源代码在编辑的时候，如果两个标签不写在一行，有可能出现标签中间有间隙的问题，当然，写在一行就不存在这个问题，但是为了美观，要用另一种方法来解决：在父标签中设置属性font-size：0；然后在字标签中设置font-size：原有大小；即可解决
·处理垂直居中问题时候可使用vertical-align：middle；
//20190115
·去除li标签前边儿的原点：对li标签使用css属性：list-style：none；
·li标签实现一个框两行的效果的时候，使用float属性加上给外层div设置固定宽高即可实现
·定位：static：默认，不设置定位方法
Relative：相对定位，相对父标签或者周围标签来定位，且定义此定位方法的标签会提升一个层级，如果不设置偏移量，位置不会发生改变
Absolute：绝对定位，同——如果不设置偏移量，位置也不会发生改变，完全脱离标准流，也会使使用标签上升一个层级，相对最近的开启了定位的祖先标签来定位，如果所有祖先标签都未开启定位，则相对于浏览器进行定位
Fixed：固定定位，相对于浏览器进行定位，用于定位页面中不变的元素，不会随滚动条滚动而产生位置变化，在做导航条，右边儿功能菜单时，都可以使用此属性
·网页中“回到顶部”按钮的样式以及功能的实现：外层用a标签嵌套，内层设置一个div
，其中包含一个图片，div设置大小以及背景颜色，然后a标签的position属性设置为fixed
，然后right设置30px;bottom设置30px;且href设置此页面顶部标签的id，target设置_self（在本页面打开）（类似于<a href=”#top” target=_self”）这样按钮就处于右下角了，再点击的时候就会回到顶部
·定位层级关系：如果层级相同，则根据标签的书写顺序进行覆盖
·层级：
- 定位元素>浮动元素>标准流中的元素
- 当元素开启了定位以后，可以通过z-index来设置元素的层级
- Z-index值越高元素越优先显示（类似于三位直角坐标系中的z轴）
- 如果z-index值一样，或者都没有z-index则优先显示执行顺序后的元素
- 父元素永远都不会覆盖子标签
·设置边框圆角使用border-radius属性
·设置背景内容（颜色、图片）的透明度使用opacity属性，取值范围在0-1之间
·border属性设置格式：border：1px solid red；顺序为：宽度、样式、颜色
·背景图片设置属性：background-image:url(图片相对或者绝对位置);默认填充方式是平铺
·定位数值可以为负数
