前端开发之CSS篇二

主要内容：

一、CSS的继承性和层叠性

二、盒模型

三、padding属性

1️⃣ CSS的继承性和层叠性

　　1、继承：给父级设置一些属性，子级继承了父级的该属性，这就是css中的继承。

　　有一些属性是可以继承下来的：如color、font-*、text-*、line-*文本元素，而像一些盒子元素，定位的元素（浮动、绝对定位、固定定位）不能继承。

　　示例：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css继承性</title>
    <style type="text/css">
        .father{
            color: #6f42c1;
            font-size: 18px;
            background-color: #5bc0de;
        }
        .son{
            color: #1c7430;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="father" id="cc">
        <div class="son">
            <p>你好，明天！</p>
        </div>
        <p>我是一个孤独的段落</p>
    </div>

</body>
</html>

　　2、层叠性

　　我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果

我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？

也就是不同的选择器它们的优先级是怎样的呢？

　　是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。

　　敲黑板，划重点了！！！　

 CSS选择器优先级
        内联样式的权重为 1000
        id选择器的权重为 100
        类选择器的权重为 10
        元素选择器的权重为 1
        权重计算永不进位

　　简而言之就是：内联样式的优先级最高，其次是id选择器，接着是类选择器，最后是标签选择器。

　　示例：　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css继承性</title>
        <style type="text/css">

　　　　　/*   第一种情况 --- 非继承（直接选中）   */
        /***  1.1 直接选中时（非继承）时比较方法，分权重不同时和相同时***/
            /*选择器 数目 选择器 数目 选择器 数目  权重合计*/
            /*  ID   2    类    0   标签   1   权重201*/
            #box1 #box2 p{
                color:green;
                font-size: 10px;
            }
            /*ID 1 类 1 标签 0      权重110*/
            #box2 .wrap3{
                color:royalblue;
                font-size: 15px;
            }
            /*ID 1 类 0 标签 3       权重103*/
            div div #box3 p{
                color:pink;
                font-size: 20px;
            }
            /*ID 0 类 3 标签 4       权重034*/
            div .wrap1 div .wrap2 div .wrap3 {
                color:blueviolet;
                font-size: 30px;
            }

            /* 1.2 当两者的权重相同时，后者覆盖前者，只显示后者的样式*/
              /*ID 1 类 1 标签 1       权重111*/
            #box1 .wrap2 p{
                color:red;
            }
              /*ID 1 类 1 标签 1       权重111*/
            #box2 .wrap3 p{
                color:gold;
            }

　　　　　/* 第二种情况----继承 */　
        /***当两个均为继承时的比较方法，权重直接为0，此时遵循“就近原则”（谁描述得更接近属性，就显示谁的属性）***/
            /*以下两个实际权重均为0，所以遵循“就近原则”，#box1 .wrap2 .wrap3更接近被描述的元素，所以发挥作用*/
            #box1 #box2 {
                color:blue;
            }
            /*ID 1 类 2 标签 0  此时为继承，所示实际权重为0 */
            #box1 .wrap2 .wrap3 {
                color:palegreen;
            }
            .spe1{
                color:royalblue;
            }
            .spe2{
                color:lightpink !important;
            }

            ul{
                font-size: 30px !important;
            }
            li{
                font-size: 10px;
                color:burlywood;
            }

        </style>
    </head>
    <body>
        <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
             <div id="box3" class="wrap3">
                 <p>我是一只小小鸟</p>
            </div>
        </div>

        <div>
            <!--以下两句效果完全相同，说明类名顺序无关-->
            <p class="spe1 spe2">我是小小段落1</p>
            <p class="spe2 spe1">我是小小段落2</p>
        </div>
        <div class="list">
            <!--!import 对继承无效-->
            <ul>
                <li>我是无序的list</li>
            </ul>
        </div>
    </div>
    </body>
</html>

　　总结：

　　　　① 当添加css样式的元素，是被直接选中（紧贴添加css样式的那个元素）时，就数数（依次统计

　　id选择器，class选择器和标签选择器的数目），其中id选择器的权重最大（100/个），其次是class选择

　　器（10/个），最后是标签选择器（1/个），谁的权重大就显示谁的属性；权重一样大时，后来者居上。

　　　　② 当添加css样式的元素，是被继承（非直接选中）时，此时权重不起作用，均为0，此时，

　　按照“就近原则”，遵循谁描述得接近元素，就显示谁的属性；当都描述的一样近时，又开始计算

　　权重（计算方法同①），谁大就显示谁。

　　　　注意：

　　　　还有一种不讲道理的!import方式来强制让样式生效,但不影响继承来的权重，而只对直接选中的
情况有影响，但是不推荐使用。因为大量使用!import的代码是无法维护的。



2️⃣  盒模型

　　1、何谓盒模型？

 在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。

　　　2、盒模型重要的属性

 重要的属性：width,height,padding,border,margin
    width:指的是内容的宽度，而不是整个盒子真实的宽度
    height：指的是内容的高度，而不是整个盒子的真实的高度。

　　　3、盒模型的计算方式

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style type="text/css">
　　　　　/* 影响盒模型的几个元素：width、height、padding、border,由此盒模型的计算有以下几种方式：*/

        /*比如做一个402px*402px的盒子*/
        /*盒模型计算方式一*/
        /*div{*/
            /*width:400px;*/
            /*height:400px;*/
            /*padding: 0px;*/
            /*border: 1px solid yellow;*/
        /*}*/
        /*盒模型计算方式二*/
        /*div{*/
            /*width: 200px;*/
            /*height: 200px;*/
            /*padding: 100px;*/
            /*border: 1px solid blue;*/
        /*}*/
        /*盒模型计算方式三*/
        div{
            width: 0px;
            height: 0px;
            padding: 200px;
            border: 1px solid gold;
        }
        /*要保证盒子的真实宽度，加width时就应该减padding，减width时就应该加padding，
　　注意，padding指的是上右下左四个方向上的内间距，因此padding数值的改变会同时影响width和height的数值。*/
    </style>
</head>
<body>
    <div>
        这是一个盒模型
    </div>
</body>
</html>

3️⃣ padding属性

　　1、何谓padding属性？　

就是内边距，padding的区域是有背景颜色的，并且背景颜色和内容区颜色一样，
        也就是说background-color这个属性将填充所有的border以内的区域。

        就是边框到内容之间的距离。

  padding有四个方向，所以我们能描述4个方向的padding。
        方法有两种：1、写小属性 2、写综合属性，用空格隔开

　　2、如何设置padding的属性？

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style type="text/css">

    div{
        width: 200px;
        height: 200px;
　/* ---- 第一种最简单的设置方法：上右下左的内边距设置为相同的数值-------------  */

       /* padding: 20px; */  
        background-color: #5bc0de;
        border: 5px solid yellowgreen;

/*-------- 第二种设置方法：单独设置，上下左右每一个内边距的属性的值 ------------- */
     /*padding小属性设置方法*/
        /*padding-top: 20px;*/
        /*padding-right: 20px;*/
        /*padding-bottom: 20px;*/
        /*padding-left: 20px;*/

/*---------第三种设置方法：综合设置，按照上右下左的设置顺序，依次设置相关值（推荐）-------------*/
    /*padding综合属性设置方法*/
        /*设置四个值时：上 右 下 左（顺时针方向）*/
        /*padding: 20px 30px 10px 30px;*/

        /*设置三个值时：上 左右 下 */
        /*padding: 20px 40px 10px;*/

        /*设置两个值时：上下 左右 */
        /*padding: 20px 50px;*/

        /*设置一个值时*/
        /*padding: 20px; 等同于padding: 20px 20px 20px 20px;*/

    }

     /*做站的时候，要清除默认的样式（padding,margin等）*/
         /*通用选择器效率较低，建议使用并集选择器将页面应用的标签全部初始化*/
    *｛
         margin:0;
         padding:0;
      ｝
    </style>
</head>
<body>
    <div>
        padding属性
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>

4️⃣ border属性

　　1、何谓border属性？　

即边框，边框三要素：粗细（粗细不写不显示），线性（只写线性样式时，默认有上下左右3px的宽度，solid默认是黑色），颜色（如果颜色不写，默认是黑色的）
    对于边框属性的描述，可按照粗细、线性和颜色三要素来写，也可按照上右下左。

　　2、border属性的设置方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style type="text/css">
        div{
            /*width: 300px;*/
            /*height: 300px;*/
            /*border: 5px solid blue; <!--边框三要素：粗细（粗细不写不显示）、线性（只写线性样式，默认有上下左右3px的宽度，
　　　　solid默认是黑色）、颜色（如果颜色不写，默认是黑色的）-->*/


        /*------------ 方式1：按照三要素来写：-------------------*/
            /*border-width: 5px;*/

            /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/
            /*border-style: solid dashed double dotted;*/
            /*也可用三个表示，即“上 左右 下”*/
            /*border-style: dotted solid double;*/
            /*也可用两个表示，即“上下 左右 ”*/
            /*border-style: dotted solid;*/

            /*<!--依次对应“上右下左”四个方向（按顺时针顺序）-->*/
            /*border-color:red green blue yellowgreen;*/
            /*也可用三个表示，即“上 左右 下”*/
            /*border-color: olive red blueviolet;*/
            /*也可用两个表示，即“上下 左右 ”*/
            /*border-color: blueviolet yellowgreen;*/

        /*------------- 方式2：按照方向来写 ---------------------------*/
            /*以左右边距为例演示，其余设置类似*/
            /*border-top-width: 10px;*/
            /*border-right-width: 3px;*/
            /*border-bottom-width: 20px;*/
            /*border-left-width: 5px;*/

        /*取消设置的属性*/
            /*border:none;*/
            border-top:none;     
    </style>
</head>

<body>
        <div>
    <!--<p>我是一个大大边框</p>-->
    </div>
</body>
</html>

　　3、小练习

　　　　（1）利用width、height和boder属性画一个正三角形出来。

　　　　（2）利用width、height和boder属性画一个方向向右的正三角形出来。

　　　　练习1参考答案：　　　

<style>
            width:0;
            height: 0;
            border-right: 30px solid transparent;
            border-bottom: 30px solid rebeccapurple;
            border-left: 30px solid transparent; 
</style>

View Code

　　　　练习2参考答案：

<style> 
           width:0;
            height: 0;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
            border-left: 50px solid dodgerblue;
</style>

  /*总结：方向向朝哪边，哪边就缺省，相对方向取任一颜色，其余方向选择transparent（透明）*/

View Code

5️⃣ margin属性

　　1、何谓margin属性？　

指的是外边距，即距离，是盒子边框外边缘与浏览器页面边缘的距离。
    注意：margin属性未设置时，默认网页与浏览器页面边缘有8px的间距，当设置margin属性的值后，除了上边缘原来的8px会塌入到设置的值中外,右下左方向都会会加上默认的8px,也就是说，如果不初始化网页页面，页面另外三边的外边距会比上方多8px。（这是个坑，一定要注意）

　　2、margin属性的设置方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin属性</title>
    <style type="text/css">
        /*使用“*通用选择器”对页面内边距和外边距进行初始化*/
        *{
            padding:0;
            margin: 0;
        }
        div{
            width:300px;
            height: 300px;
            background-color:blueviolet;
            border: 5px solid #b1dfbb;
            /*------- 方法1：上右下左的外边距设置为相同的数值 -------*/
            /*margin: 30px;*/

            /*------- 方法2：上右下左的外边距单独设置为不同的数值 -------*/
            margin-top:30px;
　　　　 margin-right: 15px;
            margin-left: 10px;
            margin-bottom:200px;
        }
        p{
            border: 2px solid greenyellow;
        }

    </style>
</head>
<body>
    <div>
        测试margin属性
    </div>
     <p>盒子之外</p>
</body>
</html>

6️⃣ 标准文档流

　　1、什么是标准文档流？　

 宏观来讲，我们的web页面和ps等设计软件有本质的不同。
    web网页的制作是个“流”，从上而下，像“织毛衣”，
    而设计软件，想在哪里画，就在哪里画。

　　2、标准文档流

　　（1）空白折叠现象（文字间多个空格仍然只会显示一个空格，代码换行也会显示一个空格）。

　　（2）高矮不齐，底边对齐（例如文字的大小即使不同，但它们的底边是对齐的）。

　　（3）自动换行，一行写不下，就换行。

　　3、示例如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>margin属性</title>
        <style type="text/css">
            span{
            font-size: 50px;
            color:cornflowerblue;
        }
        </style>
    </head>
    <body>
        <div>
            文档文档           文档文档<span>文档</span>文档文档文档文档文档文档
            &nbsp;&nbsp;&nbsp;文档文档文档文档文档文档
            <img src="fav.ico" alt=""><img src="fav.ico" alt=""><img src="fav.ico" alt="">
            <img src="fav.ico" alt="">
            <img src="fav.ico" alt="">
        </div>
    </body>
    </html>

View Code

7️⃣ 行内元素和块状元素转换

　　HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

　　1、常用的块状元素（display:block;）

　　　　特点：　　　

  　　 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
       2、元素的高度、宽度、行高以及顶和底边距都可设置。
       3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　2、常用的行内元素（display:inline;）

　　　　特点：　　　

 1、和其他元素都在一行上；
 2、元素的高度、宽度及顶部和底部边距不可设置；
 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

　　3、常用的行内块状元素（display:inline-block;）

　　　　特点：　　　　　

  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置

　　4、通过display属性对块级元素、行内元素、行内块元素进行转换

　　　　（1）display属性

 1、控制HTML元素的显示和隐藏
 2、块级元素与行内元素的转换

　　　　（2）display属性的值：

  block（块级元素）
        默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

    inline（行内）
        行内元素
        只要设置了display: inline，那么元素的width、height、margin-top、margin-bottom和 float属性都不会有什么影响。

    inline-block（行内块级）
        行内块元素
    同时具有行内元素和块级元素的特点。

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

　　　　（3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块状元素与行内元素的转换</title>
    <style type="text/css">
        .box1{
            /*将块状元素转换为行内元素*/
            display: inline;
            width: 300px;
            height: 30px;
            border: 1px solid cornflowerblue;
        }
        .box2{
            /*将块状元素转换为行内块状元素*/
            display: inline-block;
            width: 200px;
            height: 80px;
            border: 1px solid rosybrown;
            background-color: #5bc0de;
        }
        span{
            /*将行内元素转换为块状元素*/
            display: block;
            background-color: #b1dfbb;
            width: 100px;
            height: 30px;
             /*隐藏当前的标签  不会占据当前位置*/
            /*display: none; */
            /* 隐藏当前的标签  仍会占用当前位置*/
            visibility: hidden;

        }
        img{
            width: 300px;
            height: 300px;
            /*隐藏当前的标签*/
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div class="box1">块状元素1</div>
    <div class="box1">块状元素2</div>
    <div class="box2">块状元素3</div>
    <span>congcong</span>
    <span>congcong</span>
    <img src="fav.ico">
    <img src="fav.ico">
</body>
</html>

View Code

返回顶部

posted @ 2018-07-10 01:14 暮光微凉阅读(243) 评论(0) 编辑收藏举报

刷新页面返回顶部

暮光微凉

前端开发之CSS篇二

公告