web 应用课学习

1：css:
/* 外边距 */
margin-bottom: 10px;

p标签自带外边距

/* 鼠标点击后的颜色 */
button:link

/* 鼠标未点击的颜色 */
button:visited 

/* 鼠标覆盖后的颜色 */
button:hover

/* 鼠标点击时的颜色 */
button:active 

/* 所有的奇数块变色 */
p:nth-child(odd)

/* 所有的偶数块变色 */
p:nth-child(even)

element1 element2 只要element2的祖先节点里面存在element1 则会触发
element1 > element2 只有element2的父亲节点是2在element1 才会触发

<!--用行高来居中-->
height:200px;
line-height:200px;

<!--用来消除a标签的下划线-->
a{
    text-decoration:none;
}

<!--设置字间距-->
letter-spacing:间距大小;

<!--text-shadow的四个参数--> (且可以向多个方向偏移)
1:朝x方向的偏移量是多少 (向下)
2:朝y方向的偏移量是多少 (向右)
3:半径是多大
4:颜色是什么

<!--字体样式设置-->
font-size：italic (斜体)

<!--字体粗细设置-->
font-weight：(1:1000 无单位)

<!--设置字体下划线-->
1:text-decoration:underline
2:border-bottom: width  style  color;

<!--设置段首缩进-->
text-indent:缩进值

<!--背景图片大小设置-->
background-size:cover  //图片的长和宽都要大于等于div 然后取最小值
background-size:contain  //图片的长和宽都小于等于div 然后取最大值

<!--背景图片的滑动-->
background-attachment:scrool //随着包含它的区块滚动。
background-attachment:fixedc //在视口内固定。

body会自带一个默认的外边距大小为8px(margin)

<!--设置背景透明度-->
opacity:(参数大小为[0,1])

<!--设置表格是否贴合在一起-->
border-collapse:collapse(贴合)
border-collapse:separate(分开)

div为块状元素  span为行内元素
<!--将div换成span-->
在div中加入display:inline
<!--将span换成div-->
在span中加入display:block
div和span的区别   div是独占一行  span可以共占一行

p标签不能存在连续两个及两个以上的空格或回车  pre标签可以

<!--使div强制不换行-->
white-space: nowrap;

overflow:auto
会使超出的部分变成滑动区间  水平超出则水平方向多滚轮 竖直方向超出则竖直方向多滚轮
特殊指定水平方向滚轮 overflow-x
特殊指定竖直方向滚轮 overflow-y

使水平方向超出部分以省略号代替 竖直方向超出无影响
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;


<!--解决边距折叠-->
1:在父元素中设置overflow:hidden
2:将父元素往上挤
.div-inner::before{
    contain:"";
    display:table;
}

当左右两者都有外边距时，两者的边距总距离会相加
当上下两者都有外边距时，两者的边距总距离回取两者的最大值

div的width=content+padding+border

内元素设置padding时使用%是指对于父元素的百分比

z-index 可以将某个元素体现在最外层
z-index值越大优先级越高 且只能在position:relative时使用

align-items:stretch
当没有定义高度的时候 它可以将元素拉伸到与容器相同的高度或宽度

快速居中的方法
margen 0,auto

背景图片不重复
background-repeat: no-repeat;

背景图片的位置在视口内固定
background-attachment: fixed;

2：javascript
parseInt(5/3) = 1  //对浮点数取整

<!--向上取整 向下取整-->
上:x.ceil();
下:x.floor();
取整:x.round();

<!--addEventListener-->
两个参数
1：表示点击事件
2：表示点击事件触发的函数

<!--js实现逆序-->
a.sort(function(a,b){
    return b-a;
})

<!--保留两位小数如何输出-->
let x = 1.234567;
let s = `${x.toFixed(2)}`;

<!--document.querySelector()-->
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代