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;

  calc(100% - 50px);

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

原文地址:https://www.cnblogs.com/Gift/p/3656337.html