HTML/CSS总结

  选择器

                *选择所有的标签

                标签选择器：直接通过标签名选择

                类名选择器:直接通过类名选择标签 类名前面一定需要加点  .+class名字

                后代选择器：被包裹的都称为后代 div p 使用空格隔开 一般不能超过四级

            

        清除样式 

             *{

                 margin: 0px;

                 padding:0px;

                 list-style: none;

             }

        div绝对水平居中 

             margin-left:auto;

             margin-right: auto;

         浮动可以让标签变成水平排列 float:left水平靠左 float:right水平靠右

         一个标签浮动，同级(同一个父级)标签必须浮动

        

            在标准流中(不浮动)，父级可以检测到子级的高度

            如果父级不够宽的时候，子级会自动落下来

            子级浮动，父级检测不到高度。浮动塌陷

                解决：

                1、给父级增加高度

                2、给父级加overflow:hidden;

           

         取类名相当于人名，可以有多个 类名需要使用英文开始，不能和标签名一样 

            img{

                /* 图片的值，只需要设置一个方向即可，另外一个值，计算机自动计算 */

                width: 20px;

标签分类：

           第一种：单双标签

            双标签:<标签></标签>

            单标签:<标签>或<标签 /> 

           第二种：行内标签和快级标签

            行内标签：和其他标签并排排列 span b u i a

                    行内标签设置宽高无效，上下外边距无效，左右有效

                    上下内边距有效，不占位。左右有效且占位

            块级标签：独占一行ul li h1-h6 p div

            行内块：在一行排列，设置宽高有效 img input td tr table

            标准流：行内标签水平，块级标签垂直。

            做网站的时候，首先需要考虑的是标准流。再次是浮动。

            浮动以后，脱离标准流，变成行内块

          

 

 外边距塌陷         

            

            标准流中：

            1、左右外边距可以叠加,上下外边距的值取决于最大的

            2、父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。

            解决方法：

            1、不要使用margin-top 给父级增加padding-top

            2、给父级增加overflow:hidden

   浮动以后的值上下左右都可以叠加

         

        多个类名中间使用空格 

        <a href="" class="left my" >

css书写方式

    第一种：内联 

    第二种：外链 不需要加style标签对(做项目的时候)

    第三种：行内样式(不推荐使用)

  <!-- logo一般要放在h1里面 -->

  <h1>

 

    div{

        /* 文字颜色 */

        color:red;

        /* 文字大小 */

        font-size: 20px;

        /* 行高 */

        line-height: 30px;

        /* 字体 */

        font-family: "楷体";

        /* 文字居中 */

        text-align: center;

        /* 盒子模型 margin padding border width height */

        /* 浮动 ，让标签水平排列 */

    }

固定定位的标签 position: fixed 不会随着窗口的滚动而滚动

        参照物是当前的窗口 left  top bottom right

        左右只能存在一个，上下只能存在一个

        固定定位，脱离标准流，变成行内块

      

相对定位 position: relative相对自身位移，一般用来做微调 

  top left right bottom参照物是自身

  占位:占的是原来的位置

       

绝对定位 position: absolute一般实现的效果是一个标签放置在另一个标签的上面

子级绝对定位，父级相对定位。可以把子级固定在父级的任何位置 left top right bottom

绝对定位：不占位

绝对定位以后，标签变成行内块

    

        /* 文字垂直居中，设置行高等于当前标签的高度 */

        line-height: 40px;

        /* 增加圆角，值越大圆角越明显 值是50%的时候就是圆形*/

        border-radius: 50%;

        /* 旋转 deg度数单位  正值顺时针，负值逆时针 */

        transform: rotate(30deg);

  display

            inline把标签转化为行内标签

            inline-block把标签转化为行内块

            block 把标签转化为块级标签

            none隐藏标签

            转化完了以后，只是为了工作方便。原来标签的语义没有变化

css层叠性和继承性

     

  选择器权重 *<标签名1g<类名1kg 

 选择器权重可以叠加

 层叠性：

        css同样的样式，权重一样的话后写的生效

        权重不一样，取决于权重高的

继承性：

        与文字有关的样式，都可以继承

        如果一个标签没有某一个与文字有关的样式(一定要考虑到内置的一些样式)，会向上寻找，直到找到该样式，

css3样式

        /* linear-gradient(to 方向,色值,色值) */

        /* background: linear-gradient(to top,red,#ffff00,blue); */

        background: lime;

        /* 投影 

            第一个值水平方向 正值右边 负值左边

            第二个值垂直方向

            第三个值虚实程度

            第四个值影子大小

            第五个值影子颜色 可以书写成透明色

        *

html5常用标签 用法和div一模一样，只是语义更重了 

        <header>头部</header>

        <nav>导航</nav>

        <main>主要内容</main>

        <section>大区域内容</section>

        <aside>侧边栏</aside>

        <footer>底部</footer>

        <article>文章</article>

转化模块

         转换模块，对于行内标签没有效果 占得是原来的位置 

        /同样的样式后写的生效 

         旋转 

        transform: rotate(30deg);

        缩放 0-1缩小 大于1的时候放大

        transform: scale(0.3);

        位移，第一个值代表水平方向，第二个值垂直方向 

        transform: translate(100px,100px);

         可以书写多个值，使用空格隔开 

        transform: scale(0.3) rotate(12deg) translate(100px ,100px);

        旋转以后，整个坐标系也跟着改变 

        transform: translate(100px,100px) rotate(90deg);

        transform: rotate(90deg) translate(100px,100px) ;

 过度模块

        /* 过渡模块，中间变化过程可见 all代表所有的可以专门设置一个样式 */

        /* 第一个值代表样式 第二个值动画持续时间 第三个值延迟时间(可选) */

        /* transition: all 2s 2s; */

        transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s;

        }

        /* 选择器:hover鼠标移入以后才生效 */

 

 动画模块

 /* 使用动画  动画名字 动画持续时间  次数(可以书写具体的次数) infinite无穷  linear平缓过渡*/

                animation:circle 2s infinite linear;

                /* transform-origin: x y; 旋转中心点 第一个值代表水平 left center right，第二个值代表垂直top center bottom*/

            }

            /* 定义动画 

                @keyframes 动画名字{

                    书写各个状态的样式条

                    状态就是百分比来划分

                }

            */

            /* :nth-of-type(n)可以选择到具体的某一个 */

            /* 定位以后的标签，如果叠加的话，后写的在上面

                定义以后的标签，可以通过z-index调整图层顺序

                默认值0值越大越靠上。可以是负值但是不建议

            */   

            

           

            /* 加此样式，才可以进入三维坐标 */

            transform-style: preserve-3d;