php内外边距,选择器与内外边距使用方法（margin,padding使用）-2019年9月4日

9月3日作业:

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

相邻选择器：就是邻居的意思，从当前选择器后面的邻居，也就是挨得最近的一个。

兄弟选择器：就是同一父元素下面又是同级的元素，兄弟可以有多个，当前选择器之后的所有兄弟元素。

实例

html>

相邻选择器与兄弟选择器

ul{

margin:0;

padding-left:0;

border:1px dashed red;

}

ul li{

list-style-type: none;

width:40px;

height: 40px;

background-color: #ffaa0c;

/* border:1px solid black; */

/* 水平和垂直的居中 */

text-align: center;

line-height: 40px;

border-radius: 50%;

/* 将一个块级元素转化成内联元素 块支持宽高，内联不支持宽高*/

display: inline-block;

box-shadow: 2px 2px 1px #444;

}

/* 相邻选择器,相邻就是邻居的意思，太远就不算邻居了 */

#bg-blue + *{

/* background-color:yellow; */

}

/* 兄弟选择器 */

#bg-blue ~ *{

background-color:yellow;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

运行实例 »

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

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

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。

nth-of-type(n) :匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

实例

html>

nth-child和nth-of-type选择器

ul{

margin:0;

padding-left:0;

border:1px dashed red;

}

ul li{

list-style-type: none;

width:40px;

height: 40px;

background-color: wheat;

text-align: center;

line-height: 40px;

border-radius: 50%;

display: inline-block;

box-shadow: 2px 2px 1px #444;

}

ul :nth-child(2){

background-color: coral;

}

ul li:nth-of-type(4){

background-color: darkgreen;

color:white;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

运行实例 »

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

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

实例

html>

padding 对盒子大小的影响与解决方案

.box1{

width:300px;

height:300px;

background-color:blueviolet;

margin: 0 auto;

box-sizing:border-box;

padding-top: 20px;

}

.box2{

width: 100px;

height: 100px;

background-color: aquamarine;

margin-top: 20px;

}

运行实例 »

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

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

实例

html>

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

/********** 1、同级塌陷 **********/

.boxa {

/*box-sizing: border-box;*/

width: 150px;

height: 150px;

background-color: #cbe0cc;

}

.boxb {

width: 100px;

height: 100px;

background-color:blueviolet;

}

.boxa{

margin-bottom: 50px;

}

.boxb{

margin-top: 30px;

}

/*2、 嵌套传递 */

.box1 {

/*box-sizing: border-box;*/

width: 350px;

height: 350px;

background-color: #cbe0cc;

}

.box2 {

width: 150px;

height: 150px;

margin: 30px auto;

background-color:blueviolet;

}

/*3、自动挤压 */

.box3 {

/*box-sizing: border-box;*/

width: 350px;

height: 350px;

background-color: lightblue;

}

.box3 {

margin: 0 auto;

}

运行实例 »

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

解决方案或应用场景

明明给里面的div设置了margin属性，但是实际上却是外面的div有了margin属性，这个就叫做嵌套传递。

解决方法：有给父元素加一个padding属性，把子元素顶下去。

自动挤压：

应用场景：用于居中

如果给一个元素设置左边边距为自动值的话，那么浏览器就会把尽可能大的空间给到这个元素。同理，如果是右边距是自动值的话，就右边距给到最大。所以如果左右都是auto的话，那么这个元素就会居中了。可以用在想把元素在浏览器居中的时候使用，非常方便。