css及HTML知识点
html : 180° 输出为
css: margin: 0 auto;会在页面水平居中显示
box-shadow: 0 0 5px #f61818; 设置投影的位置大小颜色
outline:none; 去掉所有控件获取焦点时的默认外边框
:nth-child(n)第n个 子元素
position的值:
relative,生成相对定位的元素,相对于其正常位置进行定位;
absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位;
fixed,生成绝对定位的元素,相对于浏览器窗口进行定位;
static,默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明);
inherit,规定应该从父元素继承 position 属性的值。
float,position=absolute/fixed都会脱离文档流。区别是float不会挡住元素的内容,包括图片内容。absolute和fixed会挡住内容。
————————————————————————————————————————————————————————————————————————————
css优先级:!important > 行内样式 style>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
——————————————————————————————————————————————————————————————————————————————————————
css选择器:
div>span
选取父元素是 <div> 元素内所有的子级的 <span> 元素,不包括孙子级的
div span 选取父元素是 <div> 元素内所有的 <span> 元素,包括所有后代的
div+p
选择 <div> 元素之后紧跟的第一个 <p> 元素
div~p
选择 <div> 元素之后所有同级的 <p> 元素
div,p 选中所有的<div>和<p>元素
div.t 选择所有带有样式t的<div>元素
————————————————————————————————————————————————————————————————————————
flex布局(弹性布局):flex-direction, flex-wrap, flex-flow, align-items, align-content, justify-content, 弹性布局内各item的属性: order, flex, flex-grow, flex-shrink, flex-basic, align-self
_______________________________________________________________________________________________________________________________________
css有自己的函数: calc, min, max, attr;
width:calc(100% - 50px);
width: min(10%+10px, 100px);
content: attr(title);
white-space: nowrap; 让文字不换行
获取父子兄弟的节点:
offsetParent, parentNode, parentElement
children, firstElementChild,lastElementChild
previousElementSibling,nextElementSibling;
refer:https://blog.csdn.net/laok_/article/details/75760572
取得某一元素相对浏览器可以窗口的位置及大小信息
getBoundingClientRect
操作dom元素,给其添加移除css:
dom元素有个classList属性,并对应有add/remove/toggle/contains/item方法
document.getElementById("myDIV").classList.add("classname1","classname2",...)/.remove("classname1","classname2",...)