Blogger Information
Blog 27
fans 0
comment 0
visits 43573
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用选择器的用法与padding、margin的常用布局使用_201909101257
xingzhi的博客
Original
889 people have browsed it

一、html中常用选择器的用法

以下列演示代码为例

1、标签选择器,定义五个按钮基本样式

2、id选择器,id具有唯一性,定义page 1样式

3、class选择器,定义含有class=''的页面样式

4、属性选择器,定义同一类属性的元素样式

5、群组选择器,可同时定义多个选择器的属性

6、相邻选择器,可定义当前元素下一个元素的样式

7、兄弟选择器,可定义平行等级的所有元素

8、伪类,子元素选择器

注:

  • 相邻选择器:相邻选择器使用了加号(+),可选择紧接在另一元素后的元素,且二者有相同父元素。

  • 兄弟选择器:兄弟选择器使用了加号(~),可选择紧接在另一元素后的所有同级的指定元素,强调所有的。

nth-child()和nth-of-type()的使用:

  • 关注点不同,如果关注位置用:nth-child();

  • 既关注位置又关注类型用:nth-of-type();

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html中常用选择器的用法</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 标签选择器,定义五个按钮基本样式 */
    
    ul li {
        list-style: none;
        height: 30px;
        width: 80px;
        text-align: center;
        border: 1px solid #0f0f0f;
        border-radius: 15px;
        line-height: 30px;
        display: inline-block;
    }
    /* id选择器,id具有唯一性,定义page 1样式 */
    
    #page {
        background: #a5a5a5;
    }
    /* class选择器,定义含有class=''的页面样式 */
    
    .page-border {
        border: 3px solid #7fcff9;
    }
    /* 属性选择器,定义同一类属性的元素样式*/
    
    li[id='page-bg'] {
        background: #eb9759;
    }
    /* 群组选择器,可同时定义多个选择器的属性 */
    
    #page,
    .page-border {
        box-shadow: 10px 10px 5px #888888;
    }
    /* 相邻选择器,可定义当前元素下一个元素的样式 */
    
    .page-next+* {
        background: #1550e7;
    }
    /* 兄弟选择器,可定义平行等级的所有元素 */
    
    .page-next~* {
        border: 3px dotted #e715b3;
    }
    /* 相邻兄弟选择器:相邻兄弟选择器使用了加号(+),可选择紧接在另一元素后的元素,且二者有相同父元素。 */
    /* 兄弟选择器:兄弟选择器使用了加号(~),可选择紧接在另一元素后的所有同级的指定元素,强调所有的。 */
    /* 伪类,子元素选择器 */
    
    ul :first-child {
        color: #ff2400;
    }
    
    ul :last-child {
        color: #ff2400;
    }
    
    ul :nth-child(6) {
        color: #ff2400;
    }
    /* 伪类,类型选择器 */
    
    ul li:first-of-type {
        font-size: 20px;
        font-weight: 600;
    }
    
    ul li:nth-of-type(5) {
        font-size: 20px;
        font-weight: 600;
    }
    /* 关注点不同,如果关注位置用:nth-child(); */
    /* 既关注位置又关注类型用:nth-of-type(); */
</style>

<body>
    <h2>邻选择器与兄弟选择器</h2>
    <ul>
        <li id="page" class="page-border">page 1</li>
        <li class="page-border">page 2</li>
        <li id="page-bg">page 3</li>
        <li id="page-bg">page 4</li>
        <li class="page-next">page 5</li>
        <li>page 6</li>
        <li>page 7</li>
        <li>page 8</li>
    </ul>
</body>
</html>

运行实例 »

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

二、padding对盒子大小的影响

容器中为盒子设置内边距padding,内部元素有可能将盒子可能会改变原有盒子的大小,且需要计算宽度;

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>padding对盒子大小的影响</title>
</head>
<style>
    .box {
        width: 600px;
        background: #b58585;
    }
    
    .box img {
        padding: 50px;
        width: 500px;
    }
    
    .box2 {
        width: 600px;
        box-sizing: border-box;
        padding: 50px;
        background: #f8ff81;
    }
</style>

<body>
    <!-- 将图片显示在内容区中间 -->
    <div class="box">
        <img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="">
    </div>
    <!-- box-sizing -->
    <div class="box2">
        <img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="">
    </div>
    <!-- 容器中为盒子设置内边距padding,内部元素有可能将盒子可能会改变原有盒子的大小,且需要计算宽度; -->
</body>

</html>

运行实例 »

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

三、margin中的同级塌陷, 嵌套传递与自动挤压

1、垂直方向同级塌陷

当两个盒子在垂直方向上设置margin值时,会出现一个塌陷现象,垂直之间塌陷的原则是以两盒子最大的外边距为准。

2、嵌套传递

两个块级元素,如果成父子关系,那么子元素的margin值会向父元素传递

嵌套传递解决办法:在父元素上,将子元素的外边距 改为父元素的内边距

3、外边距的自动挤压

margin: auto;将该元素自动挤压局中

margin-left: auto;  元素设置左外边距auto,浏览器会自动把左边尽可能大的空间占用掉

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin中的同级塌陷, 嵌套传递与自动挤压</title>
</head>
<style>
    /* 统计塌陷 */
    
    .box1,
    .box2 {
        width: 200px;
        height: 200px;
    }
    
    .box1 {
        background: #43b6ff;
        margin-bottom: 50px;
    }
    
    .box2 {
        background: #6243ff;
        margin-top: 60px;
    }
    /* 嵌套传递 */
    
    .box3 {
        width: 500px;
        height: 500px;
        background: #312e3f;
        padding-top: 100px;
        box-sizing: border-box;
    }
    
    .box4 {
        width: 300px;
        height: 300px;
        background: #bfac40;
        /* margin-top: 100px; */
    }
    /* 外边距的自动挤压 */
    
    .box5 {
        width: 200px;
        height: 200px;
        background: #43b6ff;
        margin: auto;
        /* 将该元素自动挤压局中 */
        /* margin-left: auto;  元素设置左外边距auto,浏览器会自动把左边尽可能大的空间占用掉 */
    }
</style>

<body>
    <!-- 垂直方向同级塌陷 -->
    <!-- 当两个盒子在垂直方向上设置margin值时,会出现一个塌陷现象,垂直之间塌陷的原则是以两盒子最大的外边距为准。 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 嵌套传递 -->
    <!-- 两个块级元素,如果成父子关系,那么子元素的margin值会向父元素传递 -->
    <!-- 嵌套传递解决办法:在父元素上,将子元素的外边距 改为父元素的内边距 -->
    <div class="box3">
        <div class="box4"></div>
    </div>
    <!-- 外边距的自动挤压 -->
    <div class="box5">
    </div>
</body>

</html>

运行实例 »

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


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