每日一结笔记

                                                css

(一、文本属性)

1.文本水平对齐方式

            水平居中

            text-align: center;

            水平居左

            text-align: left;

            水平居右

            text-align: right;

            文本两端对齐

            text-align: justify;

      2.文本装饰线

            默认值 没有

            text-decoration: none;

            上划线

            text-decoration: overline;

            中划线 删除线

  text-decoration: line-through;

            下划线

            text-decoration: underline;

         3.首行缩进

            text-indent: 30px;

            可以设置负值

            text-indent: -30px;

            em 1em=16px

            text-indent: 3em;

            百分比  相对于元素内容宽进行计算

            400*20% = 80px

            text-indent: 20%;

            text-indent: 80px;

           4.color 字体颜色

            color: peru;

二、单行文本实现居中

 掌握

            水平居中

            text-align: center;

            垂直居中

            行高的值==盒子高度的值

            line-height: 200px;

三、颜色的表现形式

1.颜色的英文单词

            red blue

        透明色:transparent

  2.十六进制

        0~9 a b c d e f

        由#和六位十六进制组成

        #ff ff ff

        如果两位一样可以简写 ff --f

        #f f f

        ps--设置前景色--吸那里点哪里--复制#后面的代码

        英文状态i快捷键,--吸那里点哪里--右击--拷贝颜色的十六进制代码

     3.rgb

        r:red 0-255

        g:green 0-255

        b:blue 0-255

        rgb(255, 255, 255);表示白色

        rgb(0, 0, 0);表示黑色

     4.rgba(r,g,b,a)

        r: red 红色    g: green 绿色    b: blue 蓝色

        a: alpha 透明度 透明度在0-1之间表示，0表示完全透明 1 表示完全不透明

四、表格的折叠边框

  默0认值:边框独立

            border-collapse: separate ;

            边框合并 1px的边框

            border-collapse: collapse

            默认值: 边框独立

            border-collapse:separate;

            边框合并 1px的边框

            border-collapse:separate;

       

        border-spacing 单元格之间的间距

        注意:只有在边框独立border-collapse: separate时才能用

            border-spacing: 100px 200px;

            border-spacing: 10px 20px;

            border-spacing: 10px 10px;

            个值 代表水平方向和垂直方向的间距是一样的

             border-spacing: 10px;

五、单元格的垂直对齐方式

  顶端对齐

          vertical-align: top;

            居中对齐

            vertical-align: middle;

            底部对齐

            vertical-align: bottom;

六、常用复合选择器

  常用复合选择器:

        由两个或多个基础选择器通过不同的方式组合而成的选择器

      基础选择器:

        *  标签  class  id

      后代选择器

        E F{

            选择E元素中所有的后代元素F

        }

        空格隔开

        A B C {

        }

        子代选择器

        群组选择器

        伪类选择器

        相邻选择器

七、子代选择器

  子代选择器

     E>F{

        选择E元素中直系元素F

     }

     大于号隔开

     A>B>C{

     }

八、群组选择器

  把具有相同样式的选择器写在一起,用逗号隔开

        最后一个选择器不用家逗号

   

        这四个标签样式一样

        背景颜色 宽高一样, 但是字体颜色不一样

九、伪类选择器

   用于超链接a标签

        a:link(链接的默认样式)

        a:visited{链接访问过后的样式}

        a:hover{鼠标悬停的样式}

        a:active{鼠标按下的样式}

        :hover{鼠标悬停的样式}

        不仅可以用于a标签,还可以用于别的标签

        hover要求:父子关系才可以用

        也可以用于自己滑入

十、兄弟选择器

### .相邻选择器 兄弟选择器

    语法

    示例:E+F{样式声明} 用加号连接

    描述:[加号] 连接一个或多个选择器

    作用:E元素之后紧跟着的兄弟元素F

    用于兄弟之间的hover

十一、css盒模型

   重要:要求掌握

        css 盒模型本质上是一个盒子, 封装周围的HTML元素,他包括:外间距 边框 内填充和实际内容(即装东西的容器)

        1.content

        内容:宽高

        宽度:width

        单位:px em 百分比(按父元素计算)rem

         max-width:最大宽度

      min-width:最小宽度

      高度：height

      单位：px   em  百分比(按父元素计算) rem

      max-height:最大高度

      min-height:最小高度

十二、内填充

  1.内容宽高  content

      width: 300px;

      height: 300px;

      background-color: tomato;

      2.内填充 内间距  padding

      padding: 50px;

      单独写法

      上内间距

      padding-top: 20px;

      下内间距

      padding-bottom: 20px；

      左内间距

      padding-left: 20px;

      右内间距

      padding-right: 20px;

      1.内容宽高  content

      width: 300px;

      height: 300px;

      background-color: yellowgreen;

      2.内填充 内间距  padding

      复合写法

       一个值  四个内填充

      padding: 20px;

      两个值 上下内填充 左右内填充

      padding: 20px 40px;

      两个值 上内填充 左右内填充 下内填充

      padding: 20px 40px 60px;

      两个值 上内填充 右内填充  下内填充  右内填充  顺时针

      padding: 20px 40px 60px 80px;

      如果某个内填充不写，写0或许0px

      padding: 10px 0 0 10px；

     

需要减去增大的盒模型，否则页面误差太大

   

       1.用以设置的宽高进行内减

          w:296px   -  28px   =268px

          h:195px   -  34px   =161px

     

        2.设置怪异盒模型

            box-sizing: border-box;

            会把设置的padding和边框自动进行内减

            默认是旧版传统盒模型，需要自己计算把padding和边框进行内减

   

十三、外间距

margin

        两个盒子之间的距离

        可以设置负值

单独写法

           

                marign-top:50px;

                margin-bottom: 50px;

                margin-left: 50px;

                margin-right: 50px;  

           

  复合写法

           

                margin: 20px;

                margin: 20px 40px;

                margin: 20px 40px 60px;

                margin: 20px 40px 60px 80px;

             

              值的分配跟内间距一样一样的

十四、margin居中

        auto:自动 浏览器会自动计算

            margin: 0 auto;

      1.块级标签

        2.要设置宽度