zoukankan      html  css  js  c++  java
  • CSS:CSS难点解析

    CSS难点解析

     

     

     

     

     

     

    一、CSS的盒子模型:用“盒子模型”封装了“html的元素”,这就是CSS的原理。

     

     

     

    1、盒子模型示意图:

     

     

    2、盒子模型一共有4部分:content;padding;border;margin

     

      2.1、content(内容):content区域是蓝色部分;这个区域封装了html的元素;这个区域能被看见;

     

      2.2、padding(内边距):padding区域是“content”和“border”之间的部分;复合属性;这个区域为透明区域,不能被看见;

     

      2.3、border(边框):border不能看作一条线,它是一个区域;border设定了content的最大范围(content区域不能超过border区域);这个区域能被看见;

     

      2.4、margin(外边框):margin区域是"border"到“盒子模型”边界的距离;复合属性;这个区域不能被看见;

     

      2.5、width和height:仅仅设置的是"content"区域大小;

     

      2.6、盒子模型的高度和宽度

        2.6.1、盒子模型的高度= content.height   +   padding-top  +  padding-bottom  +  border  +   margin-top  +  margin-bottom; 

        2.6.2、盒子模型的宽度= content.width   +   padding-left  +  padding-right  +  border  +   margin-left  +  margin-right; 

     

     

     

    3、margin和padding的区别:

     

      3.1、margin(外边距):设定了“两个同层级且相邻的两个盒子”之间的距离;margin用于设定一个盒子模型和另一个盒子模型的位置关系;

     

      3.2、padding(内边距):在本盒子模型中,content和border之间的距离为padding;padding主要设定content相对于border的位置关系;

     

     

     

     

     

     

     

     

    二、CSS 选择器的组合

     

     

     

    1、选择器的组合方式概述:selector1  selector2selector1 > selector2selector1 + selector2selector1 ~ selector2

     

     

     

    2、子层级选择器(selector1  selector2):当“selector1” 包含“selector2”时,“selector1”中所有的“selector2”都被选择; 

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    div p {
        color: green;
    }
    
    </style>
    </head>
    <body>
    
    <div>
        <p>直接子层级的P1</p>
        <ul>
            <li><p>间接子层级的P2</p></li>
        </ul>
    </div>
    
    <p>div直接相邻的P3</p>
    
    <p>div简介相邻的P4</p>
    
    <h1>我是间隔符</h1>
    
    <p>div简介相邻的P5</p>
    
    </body>
    </html>

     

     

     

     

     

    3、直接子层级选择器(selector1 > selector2):当“selector1” 包含“selector2”时,“selector1”中直接子层级的“selector2”被选择;

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    div > p {
        color: green;
    }
    
    </style>
    </head>
    <body>
    
    <div>
        <p>直接子层级的P1</p>
        <ul>
            <li><p>间接子层级的P2</p></li>
        </ul>
    </div>
    
    <p>div直接相邻的P3</p>
    
    <p>div简介相邻的P4</p>
    
    <h1>我是间隔符</h1>
    
    <p>div简介相邻的P5</p>
    
    </body>
    </html>

     

     

     

     

    4、同层级相邻选择器(selector1 + selector2):当“selector1” 与“selector2”同层级并且相邻时,第一个“selector2”被选择;

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    div + p {
        color: green;
    }
    
    </style>
    </head>
    <body>
    
    <div>
        <p>直接子层级的P1</p>
        <ul>
            <li><p>间接子层级的P2</p></li>
        </ul>
    </div>
    
    <p>div直接相邻的P3</p>
    
    <p>div简介相邻的P4</p>
    
    <h1>我是间隔符</h1>
    
    <p>div简介相邻的P5</p>
    
    </body>
    </html>

     

     

     

     

    5、同层级后续选择器:当“selector1” 与“selector2”同层级并且“selector2”在"selector1"后面,所有的“selector2”都被选择;

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    div ~ p {
        color: green;
    }
    
    </style>
    </head>
    <body>
    
    <div>
        <p>直接子层级的P1</p>
        <ul>
            <li><p>间接子层级的P2</p></li>
        </ul>
    </div>
    
    <p>div直接相邻的P3</p>
    
    <p>div简介相邻的P4</p>
    
    <h1>我是间隔符</h1>
    
    <p>div简介相邻的P5</p>
    
    </body>
    </html>

     

     

     

     

     

     

    三、属性CLASS(html标签的属性class)

    1、class的语法:<element   class="classname1  classname2  classname3  classnameN  ">

     (菜鸟教程:https://www.runoob.com/tags/att-global-class.html)

     

    2、class解释:

      2.1、class定义类element元素的类名

      2.2、html 常常通过classname引入CSS文件中的

      2.3、class可以同时拥有多个值,这些值组成一个集合来表示element的样式;相同的属性值以最后一个classnameN为主;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>class多值测试页面</title>
    <style type="text/css">
    .min
    {
        color:blue;
        text-align:center;
    }
    .middle
    {
        background-color:yellow;
    }
    .max {
        color:red;
        background-color:black;
    }
    </style>
    </head>
    <body>
    
    
    <h1 class="min middle">class为多值min max组合</h1>
    <h4 class="min max middle">class为多值min middle max,这些类的color属性重合,以最后的max类为主</h4>
    
    </body>
    </html>

    结果如下:

     

     

    四、

    本文由lnlidawei(https://www.cnblogs.com/lnlidawei)原创或整理,转载请注明出处。
  • 相关阅读:
    Powershell数据处理
    Powershell About Active Directory Group Membership of a domain user
    Powershell About Active Directory Server
    Oracle Schema Objects——Tables——TableStorage
    Oracle Schema Objects——Tables——TableType
    English Grammar
    Oracle Database Documentation
    Oracle Schema Objects——Tables——Oracle Data Types
    Oracle Schema Objects——Tables——Overview of Tables
    What is Grammar?
  • 原文地址:https://www.cnblogs.com/lnlidawei/p/15547182.html
Copyright © 2011-2022 走看看