CSS HTML 基本知识 盒子模型 Flex等

/* postion:

             absolute 不占用文档流空间，父元素没有position属性，相对于body定位元素位置 

             relative是占用文档流空间 相对于文档流中原来的位置进行定位 

             fixed 不占用文档流空间 相对于body定位*/

    /* display: 

              none; 在文档流中删除标签占的空间

            * block 显示，会频繁创建DOM标签/ 

    /* visibility:

             hidden;标签在文档流中占用空间，只是被隐藏。

              visible 显示*/

    /* clear:both清除后面元素的浮动效果 */

    /* float: left right none  左浮动，右浮动不占用文档流空间 */

    /* 布局标签元素举例：div 块结构  span 行内  p  段落  ul 有序  li 列表项   ol  无序   a 超链接  img 图片链接  i 斜体  b 粗体 */

    /* CSS标签选择器：

                 id选择器： #id  

                 类选择器； .class  

                 关系选择器： div>span>.class  div,span选择所有div和span    div p 选择div里面的所有p标签  div+p div标签后面的所有p标签

                 伪类选择器： :hover

                 结构性选择器：div:after 在div标签里面的内容之后插入内容   div":before 在div标签内容之前插入内容*    #div :nth-child(n) 选择包含父元素中的第n个子元素

                 #div :nth-last-child(n)  选择父元素中倒数第n个子元素。

                 #div :nth-last-of-type(n) 选择父元素中 同一类型的元素的第n个元素。

                 first-child  父元素中，某一类标签第一个

                 last-child   父元素中，某一类标签最后一个

    */

    /* 常用属性：font-size  color   backgroud-color   文本 text-align  text-decoration 去掉修饰下划线   text-indent  缩进    line-height行高     width height

                list-style-type:none;  min-height  max-height border  padding  margin  border-radius圆角  text-shadow 字体阴影  box-shadow标签阴影  float:left|right|none clear:both

                position:absolute|relative|fixed|static   display:none|block|inline-box|flex   

                display:flex  

                     flex-wrap:wrap 必要的时候换行

                    justify-content:space-between|center|flex-start|flex-end| x轴（水平）排列方式 

                    align-content:space-between|center|flex-start|flex-end 垂直排列方式 align-content 起作用 配合flex-wrap：wrap 比较好

                    flex-grow:数字 代表一行中子标签占的百分比

                     */