前端学习de第一天

185 阅读3分钟

资深小白学习第一天。。。 通过视频的学习和我亲爱的推荐的几个网站,就把该记得心得默默记录下来,我们在学习中,要带着思维去学习,时时刻刻要想着,怎么学!怎么用!怎么举一反三!(自我勉励,哈哈) 1、HTML语言由标签组成,标签成对存在。 2、UTF-8是识别语言的万国码,目前都使用的它。 3、lang="en"告诉搜索引擎爬虫我们的网站是关于什么内容,en表示英语网站。 4、HTML语言中meta是提供文档的元信息(解释该网站的基础信息;就像描述人的信息一样:名字、身高etc) 5、搜索引擎通过机器人自动查找网页中的meta值来给网站分类。 6、

<div></div>
  <spn></spn>
```这两组标签是目前前端使用最多、最常用的两组标签,他们相当于是一个容器,便于绑定操作、方便规划、分区域化、修改起来会非常方便。
   7、盒子模型的组成:content+padding+border+margin。
   8、盒子模型(框模型)是CSS部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处于一个不可见的盒子中。盒子模型的构想,把所有的元素都想像成盒子,  那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。
   9、盒子模型可以设置的属性:1)、width/height 2)、border边框 3)、padding内边距 4)、margin内边距 5)、overflow属性:规定当盒子的内容溢出盒子框时,所显示的样式,
              hidden:超出的部分不可见。
              scroll:显示滚动条。
              auto:自动,如果有超出的部分,显示滚动条。
   10、如果只指定左外边距或者右外边距margin为auto,就是左右外边距设置为最大居中,垂直方向外边距如果设置为auto,则外边距设置为0.
   11、在网页中,垂直方向的相邻外边距会发生外边距重叠。所谓外边距重叠是指兄弟元素之间的相邻外边距会取外边距的最大值而不是外边距之和。
   发生外边距重叠两个条件:1)必须相邻、2)垂直向上的。
   11、如果父子元素的垂直外边距相邻了,那么子元素的外边距会传递给父元素。
   解决方法:
         1)、加内容,父元素、子元素之间插入一个内容,再设置子元素的margin。
         2)、给父元素设置一个内边距或者一个边框border,但是整个父元素的高度和宽度会增加,所以需要在父元素height/weith中减去多出来的部分。(原理,使其不相邻)。
    以上述原理,做了一个同心矩形的例子。
    

<html lang="en">
    <head>
        <meta charset=utf-8>
        <style type="text/css">
        #circle_bot{
            background-color: #E09;
            width:140px;
            height:140px;
            border: solid 10px transparent;
            /* margin:25px 25 25px 25px; */
            /* border-radius: 50%; */
            }
        #circle_mid{
            background-color: #EAA;
            width:90px;
            height:90px;
           margin: 15px auto;
           border:10px solid transparent;
            /* border-radius: 50%; */
            }
        #circle_top{
            background-color: #Ed9;
            width:40px;
            height:40px;
            margin:15px auto;
            border:10px solid transparent;
            /* border-radius: 50%; */
            }
        </style>
    </head>
<body>
    <div id="circle_bot">
            <div id="circle_mid">
                    <div id="circle_top"></div>
                </div>
    </div>
    
   
</body>
    
</html>