zoukankan      html  css  js  c++  java
  • 前端开发之CSS篇二

    主要内容:

    一、CSS的继承性和层叠性

    二、盒模型

    三、padding属性

    四、border属性

    五、margin属性

    六、标准文档流

    七、行内元素和块状元素转换

    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
        指的是内容的宽度,而不是整个盒子真实的宽度
        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{*/ /*400px;*/ /*height:400px;*/ /*padding: 0px;*/ /*border: 1px solid yellow;*/ /*}*/ /*盒模型计算方式二*/ /*div{*/ /* 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{
                /* 300px;*/
                /*height: 300px;*/
                /*border: 5px solid blue; <!--边框三要素:粗细(粗细不写不显示)、线性(只写线性样式,默认有上下左右3px的宽度,
        solid默认是黑色)、颜色(如果颜色不写,默认是黑色的)-->
    */

    /*------------ 方式1:按照三要素来写:-------------------*/ /*border- 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- 10px;*/ /*border-right- 3px;*/ /*border-bottom- 20px;*/ /*border-left- 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>
                0;
                height: 0;
                border-right: 30px solid transparent;
                border-bottom: 30px solid rebeccapurple;
                border-left: 30px solid transparent; 
    </style>
    View Code

        练习2参考答案:

    <style> 
               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;)

        <div></div>  、<p></p>、<h1> -- <h6> 、<ol></ol>、<ul></ul>、<table></table>、<form></form> 、<li></li>

        特点:   

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

      2、常用的行内元素(display:inline;)

        <a></a>、<span></span>、<br>、<i>、<em>、<strong>、<label></label>

        特点:   

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

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

        <img> 、<input>

        特点:     

      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

    返回顶部

  • 相关阅读:
    2019.1.3 WLAN 802.11 a/b/g PHY Specification and EDVT Measurement II
    L215 Visual impairment
    2019.1.3 WLAN 802.11 a/b/g PHY Specification and EDVT Measurement I
    L213
    firewall端口放行
    数据库迁移之mysql-redis.txt
    sort
    linux注释多行
    解决Nginx+Tomcat下客户端https请求跳转成http的问题
    监控zookeeper
  • 原文地址:https://www.cnblogs.com/schut/p/9286868.html
Copyright © 2011-2022 走看看