css学习总结笔记

css（层叠样式表）：样式表语言
浏览器将html和css转换为Dom，dom在内存中表示文档。
装载html---解析html---形成DOm树----显示
                       |                   |
                   装载css-----解析css
属性：值   background-color：red
css方式：行内   <p style=""> 
               内联 <style>  
               外部导入<link rel="" href="">

选择器：标签选择器                            p{}           <p></p>
             (class)类选择器                      .p{}          <li class="p"></li>     
             id选择器                                #p{}         <li id="p">
             （嵌套）并且选择器               li.nav{}     <li calss="nav"></li>

             （组合）和选择器                  li，.nav{}   <li></li>
                                                                           <p calss="nav"></p>

             普遍选择器                            .p>*{}         <li class="p">......</li>
             层次选择器：(1)子代选择器    ul.p>li{}      <!--选中class为p的ul节点下的所有li子元素--!>
                                 (2)后代选择器    ul.p li{}       <!--选中class为p的ul节点下的所有后代li元素--!>
                                 (3)兄弟选择器    使用 “+” 隔开两个选择器。
                                                          例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素
                                                          使用 “~” 隔开两个选择器。
                                                          例如 ".one~*"表示选择class为"one"元素之后的所有兄弟 元素
              属性选择器                          input[name]       input[name^=usename]
              伪类选择器   以：开头        (子类元素相关) :first-child      :nth-child(n)     :last-child
                                                       （元素状态相关）:hover(鼠标悬停状态)           :link （未被访问                                                                                       过的状态）  
                                                                                  :active（活动状态）
              伪元素选择器   以::开头          ::after（选中之后不存在的节点）            ::before（选中之前的不存在的节点）
              级联：id：100；类，属性，伪类：10；

css样式：font针对字体，text针对文本，列表，
其他样式：cursor:光标形状  
                 display：显示方式 inline 行内显示，宽高无效
                                              block 块级显示，宽高有效
                                              inline-block 行内显示同时宽高有效 
                                              none 不显示，不占据屏幕空间
                 visibility：hidden/visible(设置内容显示与隐藏)
                 outline：（默认为）none（设置外边框）

盒子模型：margin border padding content
                取值缩写：上右下左（顺时针）
                content-box：（默认盒子）内容盒子（盒子宽高为内容所占宽度与高度）
                 border-box：（IE）边框盒子（盒子宽高为整体所占宽度与高度）
                 盒子背景样式：background-position(位置)/size(大小)/image/color/attachment(背景图                                             像固定点)
                 盒子边框样式：border-width/style(样式:solid/none等等)/coler/radius(圆角框半径)
                 表格样式：border-collapse(表格样式：表格边框是否合并)/caption-side(标题放置表格                                      位置)

默认文档流：网页的基础。对页面布局不加任何修饰，元素自动的布局方式。
                    分两类：在文档流中；不在文档流中（脱离文档流）。       
  
布局：为了解决多个块元素在x轴显示的问题，以及多个块元素在z轴显示的问题。

          浮动布局：（主要用法）让块级元素在一行内显示（列级布局）或者让文字在图片周围显                               示。
                             float:left/right/none（默认值，不浮动）/inherit(浮动方式继承子元素)
          清除浮动：位于浮动元素下的非浮动元素会显示到浮动元素的下面，非浮动元素中的文字会                              环绕在浮动元素周围,要想让该非浮动元素位于浮动元素之后 （单独一行）需要                              清除浮动。
                            clear:both; 父元素overflow:hidden;

          伸缩盒布局：当页面需要适应不同屏幕大小以及设备类型时，确保元素拥有恰当的布局方                                    式。
                              常用： （使同一父元素下的几个块级元素在同一行显示，为父元素设置）
                              dispaly：flex即可。
                              flex-direction(定义主轴)：row（主轴为x轴），column（主轴为y轴）
                              justify-content（主轴对齐方式）：center/space-between/flex-start/
                                                                                   flex-end/space-around（填充空白自适应在                                                                                       主轴中心显示）
                              align-items(在交叉轴的对齐方式)：flex-start(伸缩盒容器顶部)/flex-end/
                                                                                    stretch（默认值）/center/baseline（基线对                                                                                      齐）
                              元素规则：flex-grow（延展元素）/flex-basis（定义空间大小）/flex-shrink（处                                                  理在主轴上增加空间的问题）
                              当多个article在一行中填充，如果一行放不下，则换行 section { flex-wrap:                                      wrap; }
 
         定位布局： position：（静态）static/（相对）relative/（固定）fixed/（绝对）absolute/（粘                             性）sticky
                            当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现                              的顺 序（ z-index 取值无需指定单位，值大的显示在上方。 ）

          网格布局:由行，列，沟组成的一种布局方式，当使用网格布局的时候无需考虑每个元素的                              宽度， 只需要考虑每个元素需要占几列。网格布局是利用float属性实现。