css之调节样式

   接着上一篇博客    

 

 

      6、选择器优先级：

              01、选择器相同，引入方式不同：优先级遵循 就近原则

              02、选择器不同：优先级是：行内选择器（内联样式）>id选择器>类选择器>标签选择器

              ps:如果想要打破优先级，可以加一个 ！importent   但是不推荐使用，因为会使代码混乱。到万不得已时，再用。

        7、CSS学习流程：

                                   02、如何调节标签样式？

                                          1、长、宽只能给块儿级标签设置

                                          2、字体属性

                                                 01.文字字体：font-family:

                                                 02.字体大小：font-size: 14px;    (px表示的是像素)

                                                 03.字重（粗细） ：font-weight:normal;     表示默认值，标准粗细

                                                                                                  bold;         表示粗体

                                                                                                  bolder;      表示更粗

                                                                                                  lighter;      表示更细

                                                  04.文本颜色 的四种书写方式                                                  

                           color: yellow;
                           color: #ffffff;                这里表示的是 十六进制值        这是白色
                           color: rgb(255,103,0);         这里的（255,103,0）表示的是rgb的值         
                           color: rgba(255,103,0,0.4);    这里的0.4表示透明度           这是橘色

                                          2、文字属性

                                                01、文字对齐：text-align:justify;       表示两端对齐

                                                                                         :left;           表示左对齐（默认值）

                                                                                         :right;         表示右对齐

                                                                                         :center;      表示居中对齐

                                                02、文字装饰：text-decoration:none;             表示默认。定义标准的文本

                                                                                                  :underline;      表示定义文本下的一条线

                                                                                                  :overline;        表示定义文本上的一条线

                                                                                                  :line-through;  表示定义传过文本下的一条线

  ps: 常用的是 为a标签去掉默认的自下划线   a { text-decoration:none; }

                                                03、首行缩进：text-indent: 32px;                  表示首行缩进32像素

                                          3、背景属性：(默认背景图片平铺排满整个页面)

                                                01、background-color:red;                        设计背景颜色

                                                02、background-imge:url('图片路径')；    设计背景图片

                                                03、background-repeat:repeat-x;              表示背景图片只在水平方向上平铺

                                                04、background-repeat:repeat-y;              表示背景图片只在垂直方向上平铺

                                                05、background-repeat:on-repeat;              表示背景图片不平铺

                                                06、background-position:200px 100px;     表示对于背景，第一个参数调节左右 ，第二个调节上下

ps：支持简写：background:#336699  url('背景图片路径')  no-repeat  200px  100px;

                                          4、 边框属性：

                                                01、border-width:20px;       表示边框宽度   

                                                02、border-style:solid;        表示实线边框

                                                                          :dashed;    表示矩形虚线边框

                                                                          :dotted;      表示点状虚线边框   

                                                                          :none;        表示无边框

                                                03、border-color:red;          表示边框颜色

ps：支持简写：border:2px  soild red;    

                                                 04、border-top-style:dotted;   边框的上边框的样式

                                                 05、border-top-color: red;                 上边框的颜色

                                                 06、border-right-style:solid;               右边框的样式                         

                          07、border-bottom-style:dotted; 下边框的样式

                          08、border-left-style:none;      左边框的样式

                          09、border-radius:50%;           表示样式是圆形，半径是边长或边高的一半

                                          5、 display属性：用于控制HTML元素的显示效果。

                                                 01、display:inline   表示按行内元素显示。此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响

<div style="height: 50px;width: 50px;display: inline">
    sadiasd
</div>

                                                  02、display:block   表示默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分         

<div style="height: 50px;width: 50px;display:block">   

    sadiasdwewcdh
</div>

 

注意：在这里不写display:block  结果是一样的

                                                  03、display:inline-block   表示使元素(标签)同时具有行内元素和块级元素的特点。 （是指可以设置宽度，在长度上没有剩余的部分，不用margin）

                                                                                           inline-block能够让一个标签即有快二级标签可以设置长宽的特点，又有行内标签在一行展示的特点

     

                                                 04、display:none        表示HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

                                                                                       可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从                                                                                          页面布局中消失。   

                                                05、visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 

                                          6、  盒子模型

快递盒
快递盒与快递盒之间的距离                             标签与标签之间的距离                         外边距(margin)
快递盒盒子的厚度                                            标签的边框                                           边框(border)
快递盒里面的物体到里面盒子的距离               标签内部文本内容到边框的距离          内边距/内填充(padding)
快递盒内容的物体大小                                     标签内部的文本内容                            内容(content)

                                               01、margin:参数  用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 

body {
    margin: 0;  /*取消body标签自带的8px的外边距*/
}

  margin-top:5px;                表示：距离顶部 5px
  margin-right:10px;             表示：距离右边 10px
  margin-bottom:15px;            表示：距离底部 15px
  margin-left:20px;              表示：距离左边 20px

ps:支持简写：如下

margin: 20px;                    表示：上下左右
margin: 20px 40px;               表示：第一个是上下，第二个是左右
margin: 20px 40px 60px;          表示：上   左右   下
margin: 20px 40px 60px 80px;     表示：上  右 下 左  顺时针
margin: 0 auto;                  表示：水平居中

                                               02、padding:参数   用于控制内容与边框之间的距离； 

padding-top: 5px;        表示：距离顶部 5px

padding-right: 10px;    表示：距离右边 10px

padding-bottom: 15px;  表示：距离底部 15px

padding-left: 20px;   表示：距离左边 20px

ps:支持简写：如下

padding: 20px;                    表示：上下左右
padding: 20px 40px;               表示：第一个是上下，第二个是左右
padding: 20px 40px 60px;          表示：上   左右   下
padding: 20px 40px 60px 80px;     表示：上  右 下 左  顺时针
padding: 0 auto;                  表示：水平居中

         8、float（浮动）

              01、什么是浮动？

                     浮动元素会生成一个块儿级框，而不论它本身是何种元素

                     浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念
                     浮动多用于页面的前期布局(!!!!!!!)

             02、浮动的特点：

                    第一、浮动的框可以向左或者向右移动，直到它的外边缘 碰到包含框或者另一个浮动框的边框为止

                    第二、由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样

            03、浮动框的三种取值

                  float:left;    表示向左浮动

                 float:right;   表示向右浮动

                 float:none;  表示默认值，不浮动

            04、浮动带来的父标签塌陷问题

                   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d2 {
            border: 3px solid black;

        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
<div id="d2" class="wewewrerer">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

结果：

 

 

            05、解决：浮动带来的父标签塌陷问题的三种方式：

                   1、固定高度(需要知道浮动元素的高度和宽度)

.c3 {
    height: 100px;
    width: 100px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;

        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
        .c3 {
            height: 100px;
            width: 100px;
            background-color: orange;
        }

    </style>
</head>
<body>
<div id="d1" class="yyyyyyyy">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3">
        sadkjajsdasjd
    </div>
</div>
</body>
</html>

 

 ps:浏览器默认是优先展示文本内容的

                   2、伪元素清除法

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d2 {
            border: 3px solid black;

        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
           .clearfix:after {
            content: " ";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d2" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

 

                   3、overflow:hidden

 

         9、clear (清除)：clear属性规定元素的哪一侧不允许其他浮动元素。clear属性只会对自身起作用，而不会影响其他元素。     

                                    专门用来清除浮动所带来的负面影响 父标签塌陷的问题        

     clear: both;   表示在左右两册都不允许浮动元素

     clear: left;   表示在左侧不允许浮动元素

     clear: right;  表示在右侧不允许浮动元素

     clear: none;   表示默认值，允许浮动元素出现在两侧

              

        10、overflow （溢出属性）             

      overflow: auto;    表示如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

      overflow: hidden;  表示 内容会被修剪，并且其余内容是不可见的

      overflow: scroll;  表示 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

      overflow: visible; 表示默认值。内容更不会被修剪，会呈现在元素框之外。
      
overflow  表示 水平和垂直均设置

overflow-x  表示 设置水平方向

overflow-y  表示 设置垂直方向

  11、position （定位）   所有的标签默认情况下都是静态的(static) 无法做位置的修改。如果你想要修改标签位置 你需要先将静态改为可以修改的状态

 01、相对定位 relative
        相当于标签原有的位置做偏移

02、绝对定位 absolute
       相当于已经定位过的(static>>>relative)父标签做偏移
       eg: 小米购物车

03、固定定位 fixed
       相当于浏览器窗口固定在某个位置始终不变
      eg: 回到顶部

04、哪些状态是脱离正常文档流的
       验证这个标签原来所占用的位置还在不在

不脱离
相对定位

脱离
浮动
绝对定位
固定定位

        12、 z-index（控制z轴的距离）

设置对象的层叠顺序。

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0。如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

      13、opacity(透明度)

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

透明度方法一、

rgba中的透明度(只能改变颜色)

透明度方法二、

opacity透明度（既可以改颜色也可以改文本）

<style>
    .c1 {
        background-color: rgba(128,128,128,0.4);
    }
    .c2 {
        background-color: rgb(128,128,128);
        opacity: 0.4;
    }
</style>