前端学习笔记

/**

 * 创建于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”）这样按钮就处于右下角了，再点击的时候就会回到顶部

·定位层级关系：如果层级相同，则根据标签的书写顺序进行覆盖

·层级：

1. 定位元素>浮动元素>标准流中的元素
2. 当元素开启了定位以后，可以通过z-index来设置元素的层级
3. Z-index值越高元素越优先显示（类似于三位直角坐标系中的z轴）
4. 如果z-index值一样，或者都没有z-index则优先显示执行顺序后的元素
5. 父元素永远都不会覆盖子标签

·设置边框圆角使用border-radius属性

·设置背景内容（颜色、图片）的透明度使用opacity属性，取值范围在0-1之间

·border属性设置格式：border：1px solid red；顺序为：宽度、样式、颜色

·背景图片设置属性：background-image:url(图片相对或者绝对位置);默认填充方式是平铺

·定位数值可以为负数