简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 常用选择器与布局原理尤其是padding,和margin运用
Blogger Information
Blog 8
fans 0
comment 0
visits 6596
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
常用选择器与布局原理尤其是padding,和margin运用
Laravel框架学些
Original
625 people have browsed it

  1. 实例演示相邻选择器与兄弟选择器,并分析异同

     1.1此选择器能够匹配紧跟在E元素之后的F元素 

    E元素+F元素{}


  2. 实例{css}

    ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    border: 1px solid black;
    /* 水平和垂直的居中 */
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    /* 把块元素转化内联 */
    display: inline-block;
    box-shadow: 2px 2px 1px #888
}

#bg-blue {
    background-color: lightblue
}

.bg-green {
    background-color: lightgreen;
}


/* 属性选择器 */

li[id] {
    border: 2px solid red;
}


/* 群组选择器 */

#bg-blue,
.bg-green {
    border: 2px solid blue;
}


/* 相邻选择器 */

#bg-blue+* {
    background-color: yellow;
}

    运行实例 »

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

    2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

实例{html}

<!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>Document</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>

</html>

运行实例 »

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

运行图片：

5.png


   1.2 兄弟选择器

   ‘~’选择器 跟相邻选择器比‘+’（相邻）选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的

如 以上CSS 改成这样#bg-blue~* {

background-color: yellow;

}

效果如下：

2.png

2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同

2.1 nth-child()伪类用于根据数字匹配元素，该数字表示元素在其兄弟元素中的位置

2.2 nth-of-type()伪类，如nth-child()一样，是用于根据一个元素匹配一个元素。然而，它里面的数字表示元素的位置仅在其兄弟姐妹中具有相同元素类型的位置。

实例

ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed red;
}

ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    border: 1px solid black;
    /* 水平和垂直的居中 */
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    /* 把块元素转化内联 */
    display: inline-block;
    box-shadow: 2px 2px 1px #888
}


/* 伪类：子元素选择器 */


/* 关注点是位置 */

ul :first-child {
    background-color: coral;
}

ul :last-child {
    background-color: coral;
}

ul :nth-child(6) {
    background-color: green;
}
/* 关注点是类型，可以改字体颜色 */
ul li:nth-of-type(5) {
    background-color: darkgreen;
    color: red;
}

运行实例 »

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

实例

<!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>Document</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>

</html>

运行实例 »

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

运行图片：

1.png




3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing

   3.1宽度分离


实例

.wrap {
    width: 300px;
}

.box2 {
    padding: 50px;
    background-color: lightgreen;
    border: 1px solid black;
}

运行实例 »

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

实例

<!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>Document</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <div class="wrap">
        <div class="box2"><img src="static/img/girl.jpg" alt="美女" width="200">
        </div>
    </div>
</body>

</html>

运行实例 »

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

运行结果：

1.png

3.2  box-sizing

属于CSS3 知识 以前没有用过


实例

<!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>Document</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <div class="box2"><img src="static/img/girl.jpg" alt="美女" width="200" >
    </div>

</body>

</html>

运行实例 »

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

实例

.box2 {
    width: 300px;
    box-sizing: border-box;
    padding: 50px;
    background-color: pink;
    border: 1px solid black;
}

运行实例 »

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

运行结果：

2.png




4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景

4.1同级塌陷

实例

.box1 {
    height: 100px;
    width: 100px;
    background-color: lightblue;
}

.box2 {
    height: 100px;
    width: 100px;
    background-color: yellow;
}

.box1 {
    margin-bottom: 50px;
}

.box2 {
    margin-top: 30px;
}

运行实例 »

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

实例

<!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>捉摸不定的外边距</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

运行实例 »

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

运行结果

4.png

同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值，但是

浮动元素和绝对定位元素永远不会塌陷。

4.2 嵌套传递


实例

/* 嵌套传递  */

.box1 {
    height: 200px;
    width: 200px;
    background-color: lightblue;
}

.box2 {
    height: 100px;
    width: 100px;
    background-color: yellow;
}

.box2 {
    margin-top: 50px;
}

运行实例 »

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

实例

<!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>捉摸不定的外边距</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>

</html>

运行实例 »

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

运行结果：

6.png

解决方案原本设置的margin 换成padding 就可以啦 

4.3 自动挤压


实例

.box1 {
    height: 200px;
    width: 200px;
    background-color: lightblue;
}

.box1 {
    margin-left: 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>捉摸不定的外边距</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <div class="box1"></div>

</body>

</html>

运行实例 »

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

运行图片：

7.png


通过对相邻选择器，兄弟选择器,nth-child()，nth-of-type()，box-sizing，padding，margin的学习，以后多注意实战和CSS3知识。




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！