【青训营】- 第1天CSS基础&UI设计2-一一网

强化学习目标：我要充分理解、深刻理解/深入理解布局。

1. `margin`和`padding`

margin 外边距
padding 内边距、内填充

css内嵌在<head></head>标签中，格式如下：

补充：overflow

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
    <style type="text/css">
        .box1 {
            width: 300px;
            height: 300px;
            background-color: #e8f3ff;
            /* overflow: hidden 溢出部分隐藏 */
            /* overflow: scroll 溢出部分滚动显示 */
            /* overflow: auto 溢出就滚动显示，没有溢出就不滚动 */
            overflow: auto;
        }
    
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #1e80ff;
            overflow: hidden;
        }
    </style>
</head>
复制代码

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
<body>
</html>
复制代码

效果1
1632063951(1).jpg

margin 外边距

margin: 50px; 上下左右
margin: 50px 30px; 上下50 左右30
margin: 50px 30px 20px 上50 左右30 下10
margin: 50px 30px 20px 5px; 上右下左

与父级元素边框的距离
与同级元素边框的距离
默认情况下，块级元素垂直方向上外边距重叠，取最大值
默认情况下，块级元素与内联元素垂直方向上的外边距重叠，取最大值
默认情况下，内联元素水平方向上的外边距叠加
无论哪个元素，加上水平浮动以后，水平和垂直方向上的内边距和外边距都叠加

.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <a class="a1">a1</a>
    <a class="a2">a2</a>
</body>
</html>
复制代码

效果2

.css

*,.a {
    //可能会漏掉一些标签，如a
    margin: 0;
    padding: 0;
}
.box1,.box2 {
    width: 100px;
    height: 100px;
}
.box1 {
    background-color: tan;
}
.box2 {
    background-color: thistle;
}
.a1 {
    background-color: teal;
}
.a2 {
    background-color: tomato;
}
复制代码

探索margin值对显示效果的影响

只改变box1、box2的margin值的效果

.box1{
    background-color: tan;
    margin: 50px;
}
复制代码

.box1{
    background-color: tan;
    margin: 50px 30px 20px 0px;
}
复制代码

.box1 {
    background-color: tan;
    margin: 50px;
}
.box2 {
    background-color: thistle;
    margin: 50px;
}
复制代码

.box1 {
    background-color: tan;
    margin: 50px;
}
.box2 {
    background-color: thistle;
    margin: 100px;
}
复制代码

.box1 {
    background-color: tan;
    margin: 100px;
}
.box2 {
    background-color: thistle;
    margin: 50px;
}
复制代码


效果1	效果2	效果3

默认情况下，块级元素垂直方向上内边距重叠，取最大值。

.box1 {
    background-color: tan;
    margin: 50px;
}
.box2 {
    background-color: thistle;
    margin: 50px;
}
.a1 {
    background-color: teal;
    margin: 50px;
}
.a2 {
    background-color: tomato;
    margin: 50px;
}
复制代码

添加代码：

div, a{
    float: left;
}
复制代码

当给子集设置外边距时，如果该子集前有其他元素节点，那么外边距正常使用
当子集前没有其他节点，默认状态下，上外边距会传递给父类
如果非要让子集的margin-top是相对父级的，给父级或者本身一个浮动属性

给box1添加子标签box3：

<div class="box1">
    <div class="box3">box3</div>
</div>
复制代码

设置margin

.box3{
    width: 50px;
    height: 50px;
    background-color: thistle;
    margin:50px;
}

复制代码

设置margin-top

.box3{
    width: 50px;
    height: 50px;
    background-color: thistle;
    margin-top:50px;
}
复制代码

修改margin-top

.box3{
    width: 50px;
    height: 50px;
    background-color: thistle;
    margin-top:100px;
}
复制代码

	box3设置margin
	box3设置margin-top
	box3修改margin-top

`padding`内边距

padding 内边距、内填充，也有四个值，使用同margin。

内边距指内容与自身边距的距离
内边距会向设置内边距的方向上填充整个标签

给a1设置padding

.a1{
    background-color: teal;
    margin:50x;
    padding:30px;
}
复制代码

设置内边距以后，可能需要改变原始宽高
当宽高设置已经满足要求，后加的padding导致标签变大，解决办法，
a. 修改原始大小的值
b. 标签保持原始大小

修改a1

.a1{
    display:block;
    background-color: teal;
    width:100px;
    height:100px;
    margin:50x;
    padding:30px;
    box-sizing:border-box;
}
复制代码

	a1设置padding

a1添加属性

2. 伪类选择器

p:nth-child(n) 表示在父级标签中找到第n个标签名为p的子标签
p:nth-of-type(n) 表示前面那个标签名p的所有标签的第n个标签

1632066487(1).jpg

a*4自动生成4个a标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- a标签都设置成深蓝色 -->
    <!-- p标签都设置成浅粉色 -->
    <style type="text/css">
         p {
             color: #1e80ff;
         }
        a {
            color: thistle;
        }    
        /* p:nth-child(n) 表示在父级标签中找到第n个标签名为p的子标签 */
        /* 注意：是所有子标签 */
        /* nth-of-type 表示前面那个标签名的所有标签的*/

        /* p:nth-child(1) 同p: first-child */
        /* a:nth-child(7) 同a: last-child */
        /* a:nth-child(4) 同a: a:nth-of-type(1) */

        /* 第一个p标签和第一个a标签设置成红色 p1、a1 */
        p:nth-child(1) { 
            color: red;
        }
        a:nth-child(4) {
            color: red;
        }
        
        /* 最后一个p标签和最后第一个a标签设置成黄色 p3、a4 */
        p:nth-child(3) { 
            color: yellow;
        }
        a:nth-child(7) { 
            color: yellow;
        }
    </style>
</head>

复制代码

<body>
<!-- nth-of-type first-child last-child -->
<p>p1(red)</p>
<p>p1</p>
<p>p2</p>

<a>a1(red)</a>
<a>a2</a>
<a>a3</a>
<a>a4</a>

</body>
</html>
复制代码

常见错误：

/* error：这中写法找不到a1 */
/*
a:nth-child(1) {
    color: red;
}
*/
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

阅读

ISS RealSecure Server Sensor SSL远程拒绝服务攻击漏洞

WordPress Disqus Comment System插件跨站请求伪造漏洞

QQ闪照破解-可以保持到手机

ExtAnalysis：浏览器扩展分析和扫描框架

Yahoo即时通讯签名内容漏洞

umask命令 – 设定权限掩码

【青训营】- 第1天CSS基础&UI设计2

1. `margin`和`padding`

margin 外边距

探索margin值对显示效果的影响

`padding`内边距

2. 伪类选择器

ISS RealSecure Server Sensor SSL远程拒绝服务攻击漏洞

WordPress Disqus Comment System插件跨站请求伪造漏洞

QQ闪照破解-可以保持到手机

ExtAnalysis：浏览器扩展分析和扫描框架

Yahoo即时通讯签名内容漏洞

umask命令 – 设定权限掩码

【青训营】- 第1天CSS基础&UI设计2

1. margin和padding

margin 外边距

探索margin值对显示效果的影响

padding内边距

2. 伪类选择器

1. `margin`和`padding`

`padding`内边距