0704作业：盒子模型和CSS常用选择器 - 作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型和CSS选择器</title>

    <style>
        *{padding: 0}
        ul,li{list-style:none}
        body{
            font-size:12px;
        }

        span{
            font-size:12px;
            line-height: 22px;
        }

        #bigbox{
            width:240px;
            height:240px;
            border:1px dotted #aaa;
            margin:20px 0px 20px 20px;
            background-color:lightblue;
        }
        #smallbox{
            border:5px solid #666;
            width: 100px;
            height: 100px;
            margin: 20px;

            background-color: floralwhite;
            padding: 45px;

        }

        #smallbox span{
            font-size:20px;
            line-height: 80px;
            display:block;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            text-align:center;

        }

        #cssbox{
            margin-left: 40px;
        }
        #cssbox ul li{
            margin-left: 10px;
            display:inline-block;
            width: 60px;
            height:60px;
            text-align:center;
            line-height:60px;
            box-shadow:2px 2px 3px 2px #aaaaaa;
            border-radius:50%;
            border:1px solid #666;
        }
        #cssbox .sel_all li{

            background-color:red;
        }
        #cssbox .sel_even li:nth-of-type(2n){

            background-color:red;
        }
        #cssbox .sel_odd li:nth-of-type(2n-1){

            background-color:red;
        }

        #cssbox .sel_odd li:nth-of-type(2n-1){

            background-color:red;
        }
        #cssbox .sel_id li[id]{

            background-color:red;
        }
        #cssbox .sel_class li[class]{

            background-color:red;
        }
        #cssbox .sel_adj li:nth-of-type(3) + li{

            background-color:red;
        }
        #cssbox .sel_pseudo :nth-child(3){

            background-color:red;
        }

    </style>
</head>
<body>
<div id="bigbox">
    <div id="smallbox">
        <span>smallbox</span>

    </div>
</div>



<p>
    <span>smallbox:外边距margin为蓝色区域上右下左均为20px, 深灰色为边框border=5px,<br/>
        浅灰色为内边距padding=45px,绿色区域为内容宽度width=100px和高度height=100px。<br/>
        smallbox实际撑宽为边框border+margin左和右+padding左和右+盒子的宽度：
        5+5+20+20+45+45+100=240px<br/>
        smallbox实际撑高为边框border+margin上和下+padding上和下+盒子的高度：
        5+5+20+20+45+45+100=240px<br/>
    </span>

</p>
<br/><br/><br/><br/><br/>


<div id="cssbox">
    <h5>选择所有圆</h5>
    <ul class="sel_all">
        <li>1</li>
        <li>2(id)</li>
        <li>3(class)</li>
        <li>4(id)</li>
        <li>5(class)</li>
        <li>6</li>
    </ul>
    <h5>选择偶数圆</h5>
    <ul class="sel_even">
        <li>1</li>
        <li >2(id)</li>
        <li>3(class)</li>
        <li>4(id)</li>
        <li>5(class)</li>
        <li>6</li>
    </ul>
    <h5>选择奇数圆</h5>
    <ul class="sel_odd">
        <li>1</li>
        <li>2(id)</li>
        <li>3(class)</li>
        <li>4(id)</li>
        <li>5(class)</li>
        <li>6</li>
    </ul>
    <h5>选择有id的圆</h5>
    <ul class="sel_id">
        <li>1</li>
        <li id="liid2">2(id)</li>
        <li class="liclass">3(class)</li>
        <li id="liid4">4(id)</li>
        <li class="liclass">5(class)</li>
        <li>6</li>
    </ul>
    <h5>选择有class的圆</h5>
    <ul class="sel_class">
        <li>1</li>
        <li id="liid2">2(id)</li>
        <li class="liclass">3(class)</li>
        <li id="liid4">4(id)</li>
        <li class="liclass">5(class)</li>
        <li>6</li>
    </ul>
    <h5>选择3圆后相邻的圆</h5>
    <ul class="sel_adj">
        <li>1</li>
        <li id="liid2">2(id)</li>
        <li class="liclass">3(class)</li>
        <li id="liid4">4(id)</li>
        <li class="liclass">5(class)</li>
        <li>6</li>
    </ul>
    <h5>用伪类选择框</h5>
    <ul class="sel_pseudo">
        <li>1</li>
        <li id="liid2">2(id)</li>
        <div style="width: 60px; text-align:center;height: 60px; margin-left: 10px; display:inline-block">
            框3
        </div>
        <li class="liclass">3(class)</li>
        <li id="liid4">4(id)</li>
        <li class="liclass">5(class)</li>
        <li>6</li>
    </ul>
</div>


<br/><br/><br/><br/><br/>
<div style="height: 400px"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：盒子模型主要注意是合有外边距和内边距，有两者的存在会对原有盒子的撑宽撑高有影响。css选择器注意优选级排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

Correction status：qualified

Teacher's comments：以后不要一上来就是粘贴代码, 起码要写上个作业标题呀, 以后你自己都看不明白

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例