硬件转行之路——自学Web前端开发（四）

2021.8.20
一个半硬半软工程师的学习之路
距离上一篇的学习笔记，已经有12天了，很是无奈
迫于无奈，遇到无良老板，被迫踏上了又一次找工作之旅
（…此处省略万字）
提醒还在找工作的同学们，放平心态，偶尔遇到**也是人生的经验，该翻篇就翻篇。
同时还是欢迎各爱好者或志同道合的朋友共同探讨问题：826470121

在此感谢【尚硅谷】 的教学课程

CSS

样式的继承

	样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
	继承是发生在祖先和后代之间的
	继承的设计是为了开发方便，利用继承可以将一些通用的样式统一设置到共同的祖先元素上
	这样只需一次即可让所有元素具有该样式
注意：并不是所有的样式都会被继承：
	比如 背景相关的，布局相关等这些样式都不会被继承
	

选择器的权重

	样式的冲突
	-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
	-发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
	可以在某一个样式的后边添加！important，则此时选择样式会获取最高的优先级，设置超过内联样式
	注意：在开发中这个玩意一定要慎用！
	选择器的权重
		内联样式     1，0，0，0
		id选择器     0，1，0，0
		类和伪类选择器 0，0，1，0
		元素选择器    0，0，0，1
		通配选择器    0，0，0，0
		继承的样式    没有优先级
	比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
	选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
	如果优先级计算后相同，此时则优先级优先使用靠下的样式

长度单位

	长度单位
		像素
		-屏幕（显示器）实际上是由一个一个的小点点构成的
		-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
		-所以同样的200px像素在不同的设备下显示效果不一样
		百分比
		-也可以将属性值设置为相对于父元素属性的百分比
		-设置百分比可以使子元素跟随父元素的改变而改变
		em
		-em是相对与元素的字体大小来计算的
		-1em =1 font-size
		-em会根据字体大小的改变而改变
		rem
		-rem是相对于根元素（html）的字体大小来计算的
        .box1{
            width:10px;
            height:10px;
            background-color: orange;
        }
        .box2{
            width:50%;
            height:50%;
            background-color: skyblue;
        }

        .box3{
            font-size:20px;
            width:10em;
            height:10em;
            background-color: springgreen;
        }

颜色单位

	颜色单位：
		在CSS中可以直接使用颜色名来设置各种颜色
			比如：red、orange、yellow、blue、green ... ... 
			但是在CSS中直接使用颜色名是非常的不方便
		RGB值：
			-RGB通过三种颜色的不同浓度来调配出不同的颜色
			-R red,G green,B blue
			-每一种颜色的范围在0-255（0%-100%）之间
			-语法：RGB（红色、绿色、蓝色）
		RGBA：
			-就是在rgb的基础上增加了一个a标识不透明度
			-需要四个值，前三个和rgb一样，第四个表示不透明度
				1表示完全不透明 0表示完全透明 .5表示半透明
			
		十六进制的rgb值：
			-语法：#红色绿色蓝色
			-颜色浓度通过00-ff
			-如果颜色两位两位重复可以进行简写
				#aabbcc --> ##abc
		
		HSL值和HSLA值
			H 色相（0-360）
			S 饱和度 颜色的浓度 0-100%
			L 亮度 颜色的亮度 0-100%

            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgba(0, 0, 255,.8);
            background-color: #ff0000;
            background-color: #fffeaa91;
            background-color: rgb(46, 226, 166);
            background-color: hsla(300, 88%, 53%,0.658);

文档流

文档流（normal flow）
- 网页是一个多层的结构，一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户来讲只能看到最顶上一层
- 这些层中，最底下的一层成为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
-对于我们来说元素主要由两个状态
在文档流中
不在文档流中（脱离文档流）
-元素在文档流中的特点
-块元素
-块元素会在页面中独占一行（自上向下垂直排列）
-默认宽度是父元素的全部（会把父元素盛满）
-默认高度是被内容（子元素）撑开的

-行内元素
-行内元素不会独占页面的一行，只占自身的大小
-行内元素在页面中从左向右水平排列，如果一行之中不能容纳下所有的行内元素
则元素会换到第二行继续自左向右排列（书写习惯一致）
-行内元素的默认宽度和高度都是被内容撑开

盒模型

内容区（content)，元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width 设置内容区的宽度
height 设置内容区的高度
边框（border），边框属于盒子边缘，边框里边属于盒子内部，除了边框都是盒子的外部，要设置边框，至少需要设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width: 1em;
border-color: red;
border-style: solid;

盒子模型_边框

	边框
	-内容区（content）
	-内边距（padding）
	-外框（border）
	-外边距（margin）

	border-width:10px
		默认值，一般都是3个像素
		border-width 可以用来指定四个方向的边框宽度
		 	值的情况
		 		四个值：上 右 下 左
		 		三个值：上 左右 下
		 		两个值：上 下 左右
		 		一个值：上下左右
		 除了borde-width还有一组border-xxx-width
		 	xxx可以是 top right bottom left
		 	用来单独指定某一个边的宽度
		 
	border-color用来指定边框的颜色，同样可以分别指定四个边的边框
		规则和border-width一样
	border-color也可以省略不写，如果省略了则自动使用color的颜色值
	border-color:orange;

	border-style 指定边框的样式
		solid 实线
		dotted 点状虚线
		dashed 虚线
		double 双线
		border-style:solid;

	border简写属性，通过该属性可以设置边框的所有样式，并且没有顺序要求
	除了border以外还有border xxx
			border-top
			border-right
			border-bottom
			border-left

盒子模型_内边距

                内边距（padding）
                    -内容区和边框之间的距离是内边距
                    -一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left
                    -内边距的设置会影响到盒子的大小
                    -背景颜色会延伸到内边距上
                一个盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
                    所以在计算盒子大小时，需要将这三个区域加到一起计算
                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width 一样

盒子模型_外边距

                外边距（margin）
                    -外边距不会影响盒子可见框的大小
                    -但是外边距会影响盒子的位置
                    -一共由四个方向的外边距
                        margin-top
                            -上外边距，设置一个正值，元素会向下移动
                        margin-right
                            -默认情况下设置margin-right不会产生任何效果
                        margin-bottom
                            - 下外边距，设置一个正值，其下边的元素会向下移动
                        margin-left
                            -左外边距，设置一个正值，元素会向右移动
                        

                        - margin也可以设置负值，如果是负值则元素会向相反的方向移动
                    -元素在页面中是按照自左向右的顺序排列的
                        所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                        而设置下和右外边距会移动其他元素
                    
                    -margin的简写属性
                        margin 可以同时设置四个方向的外边距，用法和padding一样
                    
                    margin会实际影响盒子的占用空间

盒子模型_水平布局

                元素水平方向的布局:
                    元素在其父元素中水平方向的位置由以下几个属性共同决定
                        margin-left
                        border-left
                        padding-left
                        width
                        padding-right
                        border-rignt
                        margin-right
                    
                    一个元素在其父元素中，水平布局必须要满足以下的等式
                        margin-left+border-left+padding-left+width+padding-right+border-rignt+margin-right 
                        =其父元素内容区的宽度（必须满足）                                  

                        0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                        0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

                        100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
                            -以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
                                -调整的情况：
                                    -如果这7个值中没有为 auto 的情况，则浏览器会自动挑中margin-right值，以使等式满足
                            -这七个值中有三个值可以设置为auto
                                width
                                margin-left
                                margin-right
                                - 如果某个值为auto，则会自动调整为auto的那个值以使
                            -如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距调整为0
                            -如果将三个值都设置为auto，则外边距都是0，宽度最大
                            -如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
                            -所以我们经常利用这个特点来使一个元素在其父元素中水平居中
                                示例：
                                    width:xxpx;
                                    margin:0 auto;

盒子模型_垂直布局

        .outer{
  
            background-color: #bfa;
           
            /* 
                默认情况下父元素的高度被内容撑开
            */


        }
        .inner{
            width:100px;
            background-color: yellow;
            height:200px;
            margin-bottom: 100px;
        }

        .box1{
            width:200px;
            height: 200px;
            background-color: #bfa;
            /* 
                子元素是在父元素的内容中排列的。
                    如果子元素的大小超过了父元素，则子元素会从父元素中溢出
                    使用 overflow属性设置父元素如何处理溢出的子元素
                    可选值：
                        visible 默认值， 子元素会从父元素中溢出，在父元素外部的位置显示；
                        hidden 溢出内容将会被裁剪
                        scroll 生成两个滚动条，来查看完整的内容
                        auto 根据需要生成滚动条
            */          
             overflow: auto; 

        }

外边距的折叠

            垂直外边距的重叠（折叠）
               -相邻的垂直方向外边距会发生重叠现象
               -兄弟元素
                   -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
                   -特殊情况：
                       如果相邻的外边距一正一负，则取两者的和
                       如果相邻的外边距都是负值，则取两者中绝对值较大的

                   -兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

               -父子元素
                   -父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
                   -父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒模型

        .s1{
           background-color: yellow;
           /* 
               行内元素的盒模型
                   -行内元素不支持设置宽度和高度
                   -行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
                   -行内元素可以设置border，垂直方向的border不会影响页面的布局
                   -行内元素可以设置margin，垂直方向的margin不会影响布局
           */
           /* width:100px;
           height:100px; */

           margin:100px;
       }

       .box1{
           width: 200px;
           height: 200px;
           background-color: #bfa;
       }
       a{
           /* 
               display 用来设置元素显示的类型
                   可选值：
                       inline 将元素设置为行内元素
                       block  将元素设置为块元素
                       inline-block 将元素设置为行内块元素
                           行内块，既可以设置宽度和高度有不会独占一行
                       none 元素不在页面中显示
               
               visibility 用来设置元素的显示状态
                   可选值：
                       visible 默认值，元素在页面中正常显示
                       hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置

           */
           display: block;

           visibility: visible;
           width:100px;
           height:100px;
           background-color: orange;
       }

默认样式

        /* 
           重置样式表，专门用来对浏览器的样式进行重置的
               reset.css 直接去除了浏览器的默认样式
               normalize.css 对默认样式进行了统一
               
           默认样式
               - 通常情况下，浏览器都会为元素设置一些默认样式
               - 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式
                   通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）                    
       */
       
       body{
           margin: 0;
       }

       p{
           margin: 0;
       }

       ul{
           margin:0;
           padding: 0;
           /* 去除项目符号 */
           list-style: none;
       }
   
       /* *{
           margin: 0;
           padding: 0;
       } */
       
       .box1{
           width:100px;
           height: 100px;
           border:1px solid black;
       }

练习1——图片列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片列表</title>
    <!-- 重置body样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        /* 设置body的背景颜色 */
        body{
            background-color: antiquewhite;
        }
        .img-list{
            /* 设置外部ul的样式 */
            
            /* 设置ul的宽度 */
            width: 190px;
            /* 设置ul的高度 */
            height: 470px;
            /* 裁剪溢出的内容 */
            overflow: hidden;
            /* 使ul在页面中居中（实际示例中不需要这么写） */
            margin: 50px auto;

            background-color: #F4F4F4;
        }

        /* 设置li的位置 */
        .img-list li:not(:last-child){
            margin-bottom: 10px;
        }
        /* 设置图片的大小 */
        .img-list img{
            width:100%;
        }

    </style>
</head>
<body>
    <ul class="img-list">
        <li>
            <a href="javascript:;">
                <img src="./img/01/1.jpg" alt="">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./img/01/2.jpg" alt="">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./img/01/3.jpg" alt="">
            </a>
        </li>
    </ul>

</body>
</html>

显示效果:(图片随意找)