css及HTML知识点

html : 　180° 输出为

css: 　 margin: 0 auto;会在页面水平居中显示
　　　　box-shadow: 0 0 5px #f61818; 设置投影的位置大小颜色

　　　　outline:none; 去掉所有控件获取焦点时的默认外边框

　　　　:nth-child(n)第n个子元素

　　　 z-index只能在position属性值为relative或absolute或fixed的元素上有效。

————————————————————————————————————————————————————————————————————————

　　　　css布局页面的三大属性： display/position/float

　　　　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",...)

巴特西

css及HTML知识点

最新文章

热门文章