登录  /  注册
博主信息
博文 27
粉丝 0
评论 0
访问量 42426
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
常用选择器的用法与padding、margin的常用布局使用_201909101257
xingzhi的博客
原创
845人浏览过

一、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>

运行实例 »

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


批改状态:合格

老师批语:这些基础知识 ,永远是经典永远不过时, 一定要掌握
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学