简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML 盒子用到margin,padding,border,熟悉基本选择器等总结-20190704
Blogger Information
Blog 3
fans 0
comment 0
visits 2154
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 盒子用到margin,padding,border,熟悉基本选择器等总结-20190704
skycheng
Original
477 people have browsed it

1. 写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width:300px;
            height:300px;
            background-color: #f21919;
            border-top: 2px dashed black;
            border-right: 2px dashed black;
            border-bottom: 2px dashed black;
            border-left: 2px dashed black;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            padding-left: 5px

            /*这是一个宽高:300px border为2px黑色虚线的盒子,padding为5px*/

        }

    </style>
    <title>盒子选择器的用法</title>
</head>
<body>
<div class="box">我是一个盒子</div>
</body>
</html>

运行实例 »

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

 2. 模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        ul{
        /*演示基本选择器*/
            border: 1px dashed #f21919;
            margin: 0 autopx;
            padding-left: 0px;
        }
        /* 层级选择器: 选择 ul 的后代元素*/
    ul li{
        list-style:none;
        width:40px;
        height:40px;
        bachkground-color:wheat;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        display:inline-block;
        margin-left: 10px;
        box-shadow: 2px 2px 1px #21e207;
    }
        /* id选择器 */
        #bg-blue
        {
            background-color: yellow;
        }
        /* 类选择器 */
        .bg-reb
        {
            background-color: aqua;
        }
        /* 属性选择器 */
        li[id=bg-blue]{
            border: 2px solid #f21919;
        }
        /* 兄弟选择器 */
        #bg-blue~*{
            background-color: yellow;
        }
        /* 伪类: 子元素选择器 */
        ul :first-child {
            background-color: coral;
        }
        ul :last-child {
            /* 因优先级问题,需要把前面的兄弟选择器注释掉 */
            background-color: coral;
        }
        /*:nth-last-child(n): 倒数第n个*/
        ul :nth-last-child(3) {
            background-color: coral;
        }

        div :nth-child(2) {
            background-color: lightgreen;
        }
        div:first-of-type  :nth-child(3){
            background-color: -lightblue;
        }
        p:nth-of-type(2) {
            background-color: yellow;
        }
        p:only-of-type {
            background-color: pink;
        }
</style>
    <title>盒子选择器的用法</title>
</head>
<body>
<!--演示基本选择器-->
<ul>
    <li class="bg-red">临</li>
    <li id="bg-blue">兵</li>
    <li class="bg-reb">斗</li>
    <li class="bg-red">者</li>
    <li>皆</li>
    <li>阵</li>
    <li>列</li>
    <li>在</li>
    <li>前</li>
</ul>
    <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
<div>
    <p>小明</p>
    <li>小华</li>
    <p>小花</p>
</div>

<div>
    <p>小新</p>
    <li>小强</li>
</div>
</body>
</html>

运行实例 »

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

 3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上
答:标签选择器可以在html中统一加上样式,伪类中的子元素选择器与类型选择器的功能几乎是一样的,这二种伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置

Correction status：qualified

Teacher's comments：盒模型是布局的基础, 尽管现在有了许多的变种,例如弹性盒子, 伸缩盒子等,但本质上并未改变
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！