盒子模型、元素定位、选择器

来源：互联网发布：ubuntu安装numpy 编辑：程序博客网时间：2024/06/05 04:12

盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left（上、右、下、左）

使用方式

（1）margin：30px；表示上下左右边距都为30px；

（2）margin-left：30px；单独设置上下左右外边距；

（3）margin： 10px 20px 30px 40px；分别设置上右下左四个边距分别为10px、20px、30px、40px；

padding：内边距

也有上下左右边距，和margin类似，不再赘述。

border：边框

border-width: 10px;
border-style: dashed;
boeder-color:blue;

也可以这样使用，优化书写

border:10px dashed blue;

outline：轮廓线，用法同border

元素定位

定位方式有：static（静态的）、fixed（固定的）、relative（相对的）、absolute（绝对的）；

s tatic 静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性影响

Fixed

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;

        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
            position:fixed;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
静态定位
</body>

   <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
            left:30px;
            top:20px;
            position:fixed;
        }#div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
静态定位
</body>

从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，位置取决于left、top；

重新定位之后可能出现重叠，通过z-index可以调整其顺序，但是相对定位z-index无效、、、、、、

<styletype="text/css">
    #div1{
        width:200px;
        height:200px;
        background-color:rgba(225,0,0,0.7);

    }#div2{
        width:200px;
        height:200px;
        background-color:greenyellow;
        position:relative;
                 top:20px;
               left:30px;
    }
</style>

<style type="text/css">
    #div1{
        width:200px;
        height:200px;
        background-color:rgba(225,0,0,0.7);

    }#div2{
        width:200px;
        height:200px;
        background-color:greenyellow;
        position:relative;
                 top: 20px;
                 left: 30px;
    }
    #div3{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>

从结果可以看出，相对定位是从原有位置进行位移，并不影响后续元素的位置

3 选择器

所谓选择器，指的是选择是加样式目标的方式

元素选择器

用标签名作为选择器，选中所有相应的元素。

<style type="text/css">
    div{
        font-size:24px;
        background-color:purple;
    }
    p{
        font-size:32px;
        color:aqua;
    }

</style>

id选择器

顾名思义，是根据id来选择元素。其样式定仪形式为：

#idname{....}

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:maroon;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

显示结果

类选择器

根据class属性选择元素，其样式定仪形式为：className{...

}

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
       .even{
            width:200px;
            height:200px;
            background-color:maroon;
        }
       .odd{
            width:200px;
            height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>

X显示结果为

从结果可以看出：.odd{
‘’}

定仪的样式会施加到所有class=“odd”的元素上。比如说上例中的第一个和第三个div。当然也包括class=“odd”的《p》

属性选择器
根据某个属性特性（比如有无、值等）来选择

（1）根据有无属性来选择

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
     [title]{
         width:100px;
         height:50px;
          background-color:red;
         border:1px solid green;
      }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>

</body>
</html>

从结果可以看出，所有具有title属性元素都应用了红色背景颜色的样式。

（2）根据属性的值来选择

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
     [title=div2]{
         width:100px;
         height:50px;
          background-color:red;
         border:1px solid green;
      }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>

</body>
</html>

从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2

“~=“选中属性值包含指定完整单词的元素，类似于word中的全字匹配

^=:选中title属性值以div开头元素

$=:选中title属性值以div结尾的元素

*=:选中title属性值包含div的元素

阅读全文

0 0