VS code-HTML与CSS基础学习与运用Week03

    div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
            
            box-sizing: border-box;

            /* 方法一：手动内减 */

            /* 要求：300*300
            现在：360*360
            多出：60 */

            /* 方法二：自动内减 */

            /* 只要设置一个属性，浏览器会自动计算多出了多少，
            自动在内容中减去 */
        }

三、边框（border）

作用：设置边框粗细、样式、颜色效果

作用	属性名	属性值
粗细	border-width	数字 + px
*样式	border-style	实：solid；虚：dashed；点：dotted（必写）
颜色	border-color	颜色取值

连写：border：10px solid red；

快捷键：bd + tab

四、内边距（padding）

作用：设置边框与内容区域之间的距离

属性名：padding

常用取值：

一个值	上右下左
两个值	上下，左右
三个值	上，左右，下
四个值	上，右，下，左

五、外边距（margin）

方向	属性	效果
水平方向	margin-left	让当前盒子左移
水平方向	margin-right	让右侧盒子右移
垂直方向	margin-top	让当前盒子下移
垂直方向	margin-bottom	让下方盒子下移

外边距的常用取值与内边距相似！！！

清除默认内外边距：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要清除这些默认值，后续自己设置。

body，p，ul，h系列，dl，dt，hr，input

* {
    margin：0；
    padding：0；
}

六、外边距折叠现象：

正常情况下左右margin互不影响！！！

①上下合并

1.场景：垂直布局的块级元素，上下的margin会合并；

2.结果：最终两者的距离为margin的最大值；

3.解决方案：尽量避免即可。比如只给其中的一个盒子设置margin。

②塌陷现象

1.场景：相互嵌套的块级元素，子元素的margin-top会作用在父元素上；

2.结果：导致父元素一起往下移动；

3.解决方法：给父元素设置border-top或padding-top或写内容来分割父子元素的margin-top

给父元素设置overflow：hidden；

转换子元素为行内块；

设置浮动

七、行内元素的margin和padding无效情况

当我们给行内元素设置padding和margin时，水平方向都有效，垂直方向都无效！！！

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;

            /* border-top: 1px solid #000;
            padding-top: 1px; */

            /* overflow: hidden; */

            float: left;
        }
        .son {
            /* display: inline-block; */
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <!-- 我是文本 -->
        <div class="son"></div>
    </div>
</body>

结构伪类选择器

1.作用：根据元素在HTML中的结构关系查找元素

2.优势：减少对HTML中类的依赖，有利于保持代码整洁

3.场景：常用于查找某父级选择器中的子元素

选择器	说明
E:first-child {}	匹配父元素中第一个并且为E元素的子元素
E:last-child {}	匹配父元素中最后一个并且为E元素的子元素
E:nth-child(n) {}	匹配父元素中第n个并且为E元素的子元素
E:nth-last-child(n) {}	匹配父元素中倒数第n个并且为E元素的子元素

<style>
        /* 找到第一个子元素，并且为li标签 */
        li:first-child {
            background-color: blue;
        }
        /* 找到最后一个子元素，并且为li标签 */
        li:last-child {
            background-color: aqua;
        }
        /* 找到第3个子元素，并且为li标签 */
        li:nth-child(3) {
            background-color: pink;
        }
        /* 找到倒数第3个子元素，并且为li标签 */
        li:nth-last-child(3) {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <ul>
        <!-- <div>私生子</div> -->
        <!-- 若这个地方第一个为div标签，则会无法选中父元素的第一个标签。 -->
        <!-- 因为此时父元素的第一个标签不是li，而li的第一个为li，出现错误 -->
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>

注意：在下列代码中，我们在ul标签的第一个li子元素上方加入一个div子元素。若此时我们选择父元素的第一个li标签，如：li:first-child {}，因为父元素的第一个标签不是li标签，故会出现没有选择的情况——因为选择器的选择需要双重选定，即既是第一个元素，有又要是li标签。其他部分同理。

<ul>
    <div></div>
    <li></li>
    <li></li>
    <li></li>
</ul>

拓展：（n）的填写

含n的乘式必须写在后面！！！

功能	公式
偶数	2n，even
奇数	2n-1，2n+1，odd
找到前五个	-n+5
找到从第五个开始往后的数	n+5

 <style>
        /* 找到第偶数个li */
        li:nth-child(2n) {
            background-color: blue;
        }
        li:nth-child(even) {
            background-color: blue;
        }
        /* 找到第奇数个li */
        li:nth-child(2n-1) {
            background-color: pink;
        }
        li:nth-child(2n+1) {
            background-color: pink;
        }
        /* 找到前五个 */
        li:nth-child(-n+5) {
            background-color: orange;
        }
        /* 找到第五个往后*/
        li:nth-child(n+5) {
            background-color: red;
        }
        
    </style>
</head>
<body>
    <ul>
        <!-- <div>私生子</div> -->
        <!-- 若这个地方第一个为div标签，则会无法选中父元素的第一个标签。 -->
        <!-- 因为此时父元素的第一个标签不是li，而li的第一个为li，出现错误 -->
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

标准流

定义：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应以何种方式排列元素；

常见排版规则：

1.块级元素：从上往下，垂直布局，独占一行；

2.行内元素（行内块元素）：从左往右，水平布局，空间不够自动折行

浮动

1.作用：让垂直布局的盒子变成水平布局；

2.代码：float

属性名	效果
left	左浮动
right	右浮动

<style>
     img {
            width: 300px;
            float: left;
            margin-right: 20px;
        } 
<body>
    <img src="./v2-f168c85305a497a54cbdf62da8c49ff0_r.jpg" alt="星空图">
    如果不受外力的作用，所有物体在引力的作用下趋向于向中心聚集。最集中的结果是球体。
    虽然恒星表面是固体，但由于固体也可以变形，固体粒子可以移动，这使得它们有可能转变成球体。
    星星内部的能量的活动使星星变的形状不规则。然而，高山上的岩石受到恒星的引力，
    从高处滚落下来。河流把沉积物从高处带到低洼的海洋（河流也被恒星吸引），
    这些都是集中化的例子。它们都使星星由不规则变成球形。
</body>

3.特点：-->>无法通过text-align / margin: auto; 让其水平居中

①浮动的元素会脱离标准流，在标准流中不占位置；

②浮动的元素（级别更高）会覆盖标准流中的元素；

③下一个浮动找上一个浮动，浮动之间为并列关系，不会覆盖；

④浮动元素会受上一个元素边界的影响；

⑤浮动元素有特殊的显示效果：一行可显示多个；可以设置宽高。

    <style>
        div {
            width: 300px;
            height: 300px;
        }
        div:first-child {
            background-color: pink;
            float: left;
        }
        div:last-child {
            background-color: orange;
            float: right;
        }

    </style>
<body>
    
    <div>我是左护法</div>
    <div>我是右护法</div>
</body>

*拓展内容二：易错点

翻译以下代码：

<ul>
    <li>
        <a herf=""></a>
        <a herf=""></a>
        <a herf=""></a>
    </li>
</ul>

① li：first-child a {} ===》找到li的第一个中的子元素的a标签

② li a：first-child {} ===》找到li中a标签的第一个子元素

*拓展内容三：nth-of-type

选择器：E:nth-of-type(n) {}

仅在父元素的同类型（E）子元素范围内，匹配第n个

区别：①nth-child {} 直接在所有孩子中找第几个子元素；

②nth-of-tyoe(n) {} 先找对应的类型，再从中找第几个。

伪元素

1.定义：一般页面中的非主体内容可以使用伪元素

2.区别：①元素：HTML的标签；

②伪元素：由CSS模拟出的标签效果。

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：1.必须设置content属性伪元素才能生效！！

2.伪元素默认是行内元素

运用与实操

一、新浪导航的设计

我们若想要得到上述图片的导航，首先应从结构分析开始。

我们可以看到，该导航为一个大的块元素，即block，其中嵌套着四个相同的小的块元素。同时，因为是导航，所以小的块元素的标签应该为a标签。并且在大的块元素的上方有边框。这样我们就把这个导航的结构分析清楚了。

接下来就是开始编码。通常情况下，我们编写代码遵循从上到下，从左到右，从外到内的格式，以防出错。

首先，在一个项目开始之前，我们一般会先将浏览器默认设置的margin和padding去掉。接着，我们开始搭建一个大的块元素，并根据图示给他设置相应的颜色、宽高。

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 800px;
            height: 40px;
            border-bottom:1px solid #edeef0;
            background-color: wheat;
            border-top: 3px solid orange;

        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">新浪导航</a><a href="">新浪导航新浪导航新浪导航</a><a href="">新浪导航</a><a href="">新浪导航</a>
    </div>
</body>

接着我们给里面的a标签转换成块级元素以设置属性。就变成了我们想要的新浪导航了。

     .box a {
            width: 80px;
            height: 40px;
            /* background-color: pink; */
            display: inline-block;
            /* 水平居中 */
            text-align: center;
            /* 去掉下划线 */
            text-decoration: none;
            color: #4c4c4c;
            /* 垂直居中 */
            line-height: 40px;
            font-size: 12px;
            
        }
        .box a:hover {
            background-color:aquamarine;
            color: blueviolet;
        }

但是我们可以拓展一下，如果我们想要的四个小块级元素内容并不相同，例如其中一个内容为“新浪导航新浪导航新浪导航”，结果会是怎样？

为什么会出现这样的结果？其实很简单。不难发现，我们在代码中规定了小块级元素的宽度，所以超出它的宽度会自动向下填充。所以我们只需要去掉它的设定宽度，然后设定一个padding值即可。

 padding: 0px 20px;
 /* width: 80px; */

二、网页新闻列表案例

当我们要创建一个这样背景为纯白的项目时，我们可以先给他设定一个比较鲜艳的背景颜色，最后项目完成时再将这个背景颜色去掉，方便我们辨认块和编写代码。

与案例一相同，我们从分析结构开始。

由该图我们可以发现，这是一个大的块级元素包裹着一个无序列表，并且每个li标签里都带着一个可跳转的a标签。

接下来开始编码。

<head>
    <title>Document</title>
    <style>
        /* 去除默认的边距*/
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 400px;
            /* background-color: pink; */
            border: 1px solid #cccccc;
            padding: 41px 30px;
            box-sizing: border-box;
        }
        .box h1 {
            height: 41px;
            /* background-color: pink; */
            border-bottom: 1px solid #ccc;
            /* 自动内减 */
            box-sizing: border-box;
            font-size: 30px;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <h1>最新文章/New Articles</h1>
        <ul>
            <li><a href=""></a>北京招聘网页设计，平面设计</li>
            <li><a href=""></a>体验JavaScript的魅力</li>
            <li><a href=""></a>jQuery时代来临</li>
            <li><a href=""></a>网页设计师的梦想</li>
            <li><a href=""></a>jQuery中的链式编程是什么</li>
        </ul>
    </div>
</body>
</html>

这样大概框架就构建好了。

与我们想要的结果看，该图多了小圆点，少了边框线。由之前的学习可知，圆点可以用text-decorate：none去掉；那我们该如何处理边框线呢？不妨将里面的小块级元素设置宽高，并让文本水平、垂直居中，然后设定下边框。这样就得到了结果。

        {
            line-height: 1;
        }
        .box ul {
            list-style: none;
        }
        .box ul li {
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 30px;
            line-height: 50px;
        }
        .box li a {
            text-decoration: none;
            font-size: 18px;
            color: #666;
        }

三、浮点的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 40px;
            background-color: #333;
        }
        .nav {
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background-color: pink;
        }
        .banner {
            width: 1226px;
            height: 460px;
            background-color: yellow;
            margin: 0 auto;
            
        }
        .left {
            float: left;
            height: 460px;
            width: 234px;
            background-color: orange;
        }
        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 网页的头部 -->
    <div class="header"></div>
    <!-- 网页的导航 -->
    <div class="nav"></div>
    <!-- 网页的轮播图 -->
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1226px;
            height: 614px;
            background-color: pink;
            margin: 100px auto;
            
        }
        .left {
            float: left;
            width: 234px;
            height: 614px;
            background-color: #80008080;
        }
        .right {
            float: right;
            width: 978px;
            height: 614px;
           background-color: yellow;
        }
        .item {
            width: 234px;
            height: 300px;
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: skyblue;
        }
        /* 找到第四个和第八个元素 */
        .item:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>
</html>