css和html 重点笔记

<!-- display:none与visibility:hidden 

display:none 隐藏相对应的元素且不占该元素原来所占的空间

visibility:hidden 隐藏相对应的元素且挤占该元素原来的空间

px 长度单位 表示一个像素点 em  相对长度单位 表示当前元素的字体大小 rem相对与html元素声明字体大小

简述浮动布局及其工作方式 

 1. 浮动布局（x轴）

      float:left

      浮动元素：

        1) 脱离文档流

        2) 块元素的宽度不再是100%，由内容决定

        3) 块元素不再支撑其父元素

        4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。

      clear

        清理浮动

        left  不与左浮动元素在同一水平线上

        right 不与右浮动元素在同一水平线上

2. animation

      animation-name 动画名称     animation-timing-fuction：时间曲线函数 animation-duration 动画持续时间

      animation -delay 延迟时间   animation-direction 动画执行方向  animation-iteration-count 动画执行次数

      animation-fill-mode 填充模式，动画结束后保留哪一帧规则  animation-play-state: paused;   动画状态

      animation 速写形式 animation: name duration timing-function delay iteration-count direction fill-mode play-state;

      animation : 动画名 | 持续时间 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 ；

          持续时间： 1S 或者 1000ms （单位可用s和ms）

          过渡方式： 跟transition取值一样

          次数： 3 或 2.1 或者 infinite（无限循环）

          方向： reverse | alternate（偶数次反向播放、奇数次正向播放） | alternate-reverse（alternate反之）

          填充： none | forwards | backwards | both

          forwards ： 当动画完成后，保持最后一个属性值，（在最后一个关键帧中定义）

          是否暂停： paused | running

—简述伸缩盒布局

   伸缩盒容器   伸缩盒子元素

   1) 概念

        伸缩盒容器 div.container 、ul.container

        伸缩盒元素 div、li

        主轴    默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列

        交叉轴  与主轴垂直的轴

    2) 规则

        伸缩盒容器

          display:flex;

            强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。

          flex-direction:row;

            定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴

          flex-wrap:nowrap 

            当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，

          align-items: stretch;

            定义伸缩盒容器中的子元素在交叉轴上的排列方式

          justify-content:space-around;

            定义伸缩盒容器中的子元素在主轴上的排列方式

        伸缩盒元素

          flex-basic:   主轴上的基础长度（基本工资）

          flex-grow:    主轴上剩余空间分配的份数（分红）

          flex-shrink:  主轴上亏损空间的分摊份数（亏损）3

盒子的水平居中

    1） margin： 0 auto；

    2）  .content{

         position: relative;

             width: 400px;

             height: 400px;

            aqua;

        }

        .box{

            position: absolute;

            margin-left: 50%;

            left: -50px;

            width: 100px;

            height: 100px;

            bisque;

           

            

        }

    3）使用伸缩盒子

             display: flex;

            justify-content: center;

            align-items: center;

    4）边框盒子 和内容盒子

       边框盒子 实际宽=内容款+padding+boder

       内容盒子 实际宽=width+padding+boder

    5）css3选择器

     核心选择器 id class 标签选择器 并且 和 普遍*

     层次选择器 子选择器> 后代选择器空格 兄弟选择器 ~当前之后所有 +当前元素之后

     

     属性选择器

     伪类选择器：:nth-child :visited :active :hover :focus

     伪元素选择器::after ::before

    6)选择器优先级

     html 1000   id 100  类 伪类10  元素 伪元素1 当权值相等 后者覆盖前者 ！important

    7）文本在盒子垂直居中

    #div1{

     

    width:200px; 

    height:200px; 

    position: absolute; //父元素需要相对定位 

    top: 50%; 

    left: 50%; 

    margin-top:-100px ; //二分之一的 height，width 

    margin-left: -100px; 

    } 

    //方法二:未知元素的高宽 

    #div1{ 

      width: 200px; 

      height: 200px; 

      #6699FF; 

      margin:auto; 

      position: absolute; //父元素需要相对定位 

      left: 0; 

      top: 0; 

      right: 0; 

      bottom: 0; 

      }