Web初学-2022.10.28-11.5

已于 2022-11-05 12:54:48 修改
阅读量176 收藏 1
点赞数
文章标签： 前端 css html
于 2022-11-04 17:12:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/intmain404/article/details/127626706
版权

第三周笔记

 35.CSS选择器（K44-51）

  1.ID 选择器
        a.css：#elem{}
          html：id=“elem”（快捷div：div+#+tab）
在这里插入图片描述

 <style>
        #div1{ background: red;}
        #div2{ background: blue;}
    </style>
</head>
<body>
    <div id="div1">课程好多好多</div>
    <div id="div2">课程真的好多好多</div>
</body>

          注：1）一个页面内。ID值对应唯一 2）规范：字母/-/_/数字，数字不可在首位
              3）驼峰写法（单词）、下划线写法（search-small-button）、短线写法（search_samll_button）
  2.CLASS选择器
        a.css：.elem{}
          html：class=“elem”（快捷class：X+.+tab）
          注：1）class选择器可以复用
              2）可以添加多个class样式
在这里插入图片描述

 <style>
        #div1{ background: red;}
        #div2{ background: blue;}
        .box{ background: green;}
        .content{ font-size: 30px;}
    </style>
</head>
<body>
    <div id="div1">课程好多好多</div>
    <div id="div2">课程真的好多好多</div>
    <p class="box">课程真的真的好多</p>
    <div class="box content">课程真的真的真的好多</div>
</body>

              3）多个样式时，样式优先级根据CSS决定，而不是class属性中顺序（在< style>中的优先顺序）
              4）标签+类的写法
在这里插入图片描述

  p.box{ background: green;}
        .content{ font-size: 30px;}
    </style>
</head>
<body>
    <div id="div1">课程好多好多</div>
    <div id="div2">课程真的好多好多</div>
    <p class="box">课程真的真的好多</p>
    <div class="box content">课程真的真的真的好多</div>
</body>

  3.标签选择器（TGA选择器 ）
        a.css：div{}
          htnl：< div>
    使用场景：1）去掉某些标签中的默认样式时
              2）复杂的选择器中，如层次选择器
  4.群组选择器
          a.css：div，p，span{}
          注：通过逗号方式，给多个不同的选择器添加统一css样式，来达到代码的复用

        形如：1）
在这里插入图片描述

<style>
        div{ background: red;}
        #text{ background: red;}
        .title{ background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>

          变：2）

 div,#text,.title{ background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>

  5.通配选择器
        a.*{}
          注：尽量不要使用，会给所有标签添加样式
    使用场景：1）去掉所有标签的默认样式时
  6.层次选择器
        a.后代 M N 指定M条件下N的集合
        b.父子 M>N 后代中的第一代
        c.兄弟 M~N 当前M标签下所有兄弟N标签
        d.相邻 M+N 当前M相邻的N标签
  7.属性选择器
在这里插入图片描述

        a.M[attr]{}
               1）=：完全匹配
               2）*=：部分匹配
               3）^=：起始匹配
               4）$=：结束匹配
               5）[][][]：组合匹配
        形如：

        div[classX=][id]{ background:red} /*X为 *^$等符号*/

  8.伪类选择器
          注：CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上时，用伪类添加
        a.M伪类{}
               1）：link       访问前的样式（只能添加给a标签）
               2）：visited    访问后的样式（只能添加给a标签）
               3）：hover      鼠标移入时的样式（可以添加给所有的标签）
               4）：active     鼠标按下时的样式（可以添加给所有的标签）
          注：若四个伪类标签都生效，注意顺序：L V H A
              一般网站都只设置：a{}a：hover{}

        形如：
在这里插入图片描述
     鼠标上置：
在这里插入图片描述

<style>
        div{ width: 200px;height: 200px;background: red;}
        div:hover{ background: blue;}
    </style>
</head>
<body>
    <div></div>
</body>

          注：标签：a：X{ Y：}    X可选上述4标签之一    Y为a标签属性
               5）：after、：before  通过伪类方式给元素添加一个文本内容，使用content属性
        形如：（后“world”由伪标签提供）
在这里插入图片描述

  div::after{content: "world";}/*
    </style>
</head>
<body>
    <div>hello</div>
</body>

        妙用：
在这里插入图片描述

 div::after{content: "world"; color: blue;}

          注：不使用伪标签则需在< div>中用< span>包裹
               6）：checked、：disabled   针对表单元素
        形如：
在这里插入图片描述

  :checked{ width:100px;height:100px;}
    </style>
</head>
<body>
    <!-- <div>hello</div> -->
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>

               7）：focus（获取光标时，如输入框）
        形如：
在这里插入图片描述

:focus{background: red;}
    </style>
</head>
<body>
    <input type="text">

        b.结构性伪类选择器
               1）：nth-of-type（）、：nth-child（）
        形如：
在这里插入图片描述

<style>
     li:nth-of-type(3){background: blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

          注：角标从1开始，1表示第一项，2表示第二项 | n值，表示从0到无穷大（可进行单双 2n、2n+1操作）
               2）：first-of-type、：first-child
               3）：last-of-type、：last-child
        形如：
在这里插入图片描述

<style>
     li:nth-of-type(3){background: blue;}
     li:first-of-type{background: green;}
     li:last-of-type{ background: black;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

               4）：only-of-type、：only-child    仅一行时生效
          注：child：一大子类中的所有成员都包括，但属族不同，无法显示

 36.CSS样式继承（K52）

  1.文字相关的样式可以被继承
  2.布局相关的样式不能被继承（默认不可继承，但可以设置继承属性 inher值）
        形如：
在这里插入图片描述

 <style>
        div{ width:300px; height: 300px;border: 1px red solid; color: blue;font-size: 30px;}
        p{border: inherit;} 
   </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

 37.CSS优先级（K53-55）

  1.相同样式优先级
    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式情况
  2.内部样式与外部样式
    内外部样式优先级相同，若都设置相同样式，后写的引入方式优先级高
  3.单一样式优先级
    style行间 > id（#X） > class（.X） > tag（如div） > * > 继承
  4.！important（不能针对继承的属性进行优先级提升）
    提升样式优先级，非规范方式，不建议使用
        形如：
在这里插入图片描述

   #elem{ color: red !important;}
   </style>
</head>
<body>
    <div>
        <div id="elem" style="color:blue">这是一个块</div>

  5.标签+类与单类
    标签+类 > 单类 （如div.box > .box）
  6.群组优先级
    群组选择器与单一选择器的优先级相同，靠后写的优先级高
  7.层次优先级
        a.权重比较（非直加）
               1） ul li .box p input{}   1+1+10+1+1
               2） .hello span #elem{}    10+1+100
        b.约分比较
               1）ul li .box p input{}    约后：li p input{}
               2）.hello span #elem{}     约后：#elem{}

 38.CSS盒子模型（K56-61）

        形如：
在这里插入图片描述
  1.组成：content ->  padding ->   border ->     margin
           物品       填充物       包装盒   盒子与盒子间的间距
        a.content：内容区域  width和height组成的
        b.padding：内边距（内填充） number：30px
                padding-left   padding-right   padding-top   padding-bottom
        c.margin：外边距（外填充）
                margin-left   margin-right   margin-top   margin-bottom
          注：1.背景颜色会填充到margin下的区域 2.文字会在content区域 3.padding不能出现负值，margin可以
在这里插入图片描述

 <style>
        #box{ width: 200px; height: 200px;background: blue; border: 10px green solid;
             padding: 30px;
             margin: 10px;
            }
        #box2{ width: 200px; height: 200px; background: yellowgreen;}   
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>

  2.box-sizing（盒尺寸，可以改变盒子模型的展示形态）
   box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为conten-box（默认值）| border-box
        a.默认值：content-box：width、height -> content
        b.border-box：width、height -> content padding border
    使用场景：1.不用再去计算一些值 2.解决一些百分比的问题
  3.盒子模型的一些问题
        a.margin叠加问题
   当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的、
在这里插入图片描述

<title>Document</title>
    <style>
        #box1{ width: 200px; height: 200px; background: red; margin-bottom: 30px;}
        #box2{ width: 200px; height: 200px; background: blue;margin-top: 30px;} 
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

          即两个box上下输入30px，只输出一个30px 会取上下值中较大的

       解决方法：1.BFC规范 2.想办法只给一个元素添加间距
        b.margin传递
   margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
       解决方法：1.BFC规范 2.给父容器加边框 3.margin换成padding
        形如：
在这里插入图片描述

    <style>
        #box1{ width: 200px; height: 200px; background: red;}
        #box2{ width: 100px; height: 100px; background:blue ; margin-top:100px ;} 
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></div>
    </div>
</body>

        变：
在这里插入图片描述

  <style>
 /* #box1{ width: 200px; height: 200px; background: red;border: 1px black solid;}
        #box2{ width: 100px; height: 100px; background:blue ; margin-top:100px ;} */
        #box1{ width: 200px; height: 100px; background: red; padding-top: 100px;}
        #box2{ width: 100px; height: 100px; background: blue;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></div>
    </div>
</body>

        c.margin自适应居中、不设置content的现象
        形如：
在这里插入图片描述

  <style>
        #box{ width:400px; height: 100px; background: blue;margin:0 auto;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>

        扩展：1.margin左右自适应是可以的，但是上下自适应是不行的。
              2.width、height不设置的时候，对盒子模型的影响，会自动去计算计算器容器的大小，节省代码
在这里插入图片描述

<style>
        #box1{ width: 300px; height: 300px; background: red;}
        #box2{ width: 100%; height: 100px; background: blue;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    <div>    
</body>

在这里插入图片描述

 <style>
        #box1{ width: 300px; height: 300px; background: red;}
        #box2{ height: 100px; background: blue; color: white; padding-left: 30px;border-left: 10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">这是一些内容</div>
    <div>    
</body>

  4.嵌套盒子的练习
在这里插入图片描述

 <style>
        #box1{ width: 350px;height: 350px; border: 1px black dashed;padding: 27px;}
        #box2{ border: 5px #d7effe solid;padding: 20px;}
        #box3{ background: #ffa0df; padding: 41px;}
        #box4{ border: 1px white dashed; padding: 3px;}
        #box5{ border: 1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background: #96ff83; border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

 39.标签分类（K62-64）

  1.按类型
        a.block：块 div、p、ul、li、h1…
在这里插入图片描述

 <style>
        #box1,#box2{ width: 100px; height: 100px; background: red;}
    </style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
</body>

         1)独占一行
         2)支持所有样式
         3)不写宽时，与父元素的宽相同
         4)所占区域是一个矩形
        b.inline：内联 span、a、em、strong、img…
在这里插入图片描述

<style>
        #content1,#content2{ width: 100px; height: 100px; background: red;}
    </style>
</head>
<body>
    <span id="content1">内联1</span>
    <span id="content2">内联2</span>
</body>

         1)挨在一起的
         2)有些样式不支持，如：width、height、margin、padding
         3)不写宽的时候，宽度由内容决定
         4)所占的区域不一定是矩形
         5)内联标签之间会有空隙，原因：换行（写代码时）
              注：布局一般用块标签，修饰文本一般用内联标签  若特别想消除空隙：

 <style>
        body{ font-size: 0;}
        #content1,#content2{ width: 100px; height: 100px; background: red;font-size: 16px;}
    </style>

        c.inline-block：内联块 input、select…
在这里插入图片描述
在这里插入图片描述

         1)挨在一起，但是支持宽高
         2)具有块和内联很多特性
  2.按内容
在这里插入图片描述
  3.按显示
        a.替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
           img、input …
        b.非替换元素：将内容直接告诉浏览器，将其显示出来
           div、h1、p …

 40.显示框类型（K65）

  1.display

        a.block
在这里插入图片描述

<style>
        div{ width: 100px;height: 100px; background: red;display:inline;}
        span{ width: 100px; height: 100px; background: red; display: block;}
    </style>
</head>
<body>
    <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
</body>

        b.inline
        原：
在这里插入图片描述

<style>
        div{ width: 100px;height: 100px; background: red;}
    </style>
</head>
<body>
    <div>块1</div>
    <div>块2</div>
</body>

        变：
在这里插入图片描述

   div{ width: 100px;height: 100px; background: red;display:inline;}

        c.inline-block
在这里插入图片描述

 <style>
        div{ width: 100px;height: 100px; background: red;display:inline-block;}
        span{ width: 100px; height: 100px; background: red; display: inline-block;}
    </style>

        d.none（不占空间的隐藏）
        注：display：none与visibility：hidden区别：visibility：hidden为占空间的隐藏
在这里插入图片描述

 #box1,#box2{ width: 100px;height: 100px; background: red;}
        #box1{ display: none;}
    </style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>

 41.标签嵌套规范（K66）

  1. a. ul、li     b. dl、dt、dd     c. table、tr、td
  2.块标签可以嵌套内联标签

    <div>
        <span></span>
        <a href="#"></a>
    </div>

  3.块标签不一定能嵌套块标签
        可：

    <div>
        <div></div>
    </div>

        不可：

     <p>
        <div></div>
    </p>

 4.内联标签不可嵌套块标签（a标签是个例外）

 42.溢出隐藏（K67）

 1.overflow
        a.visible：默认
        b.hidden
        原：
在这里插入图片描述

 <style>
        div{ width: 300px; height: 200px; border: 1px black solid;}
    </style>
</head>
<body>
    <div>
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
    </div>
</body>

        变：

在这里插入图片描述

   div{ width: 300px; height: 200px; border: 1px black solid; overflow: hidden;}

        c.scroll
在这里插入图片描述

    div{ width: 300px; height: 200px; border: 1px black solid; overflow: scroll;}

        d.auto

div{ width: 300px; height: 200px; border: 1px black solid; overflow: auto;}

        注：自适应，多则有滚动条，少则无滚动条

        e.x轴、y轴
         写法：overflow-x：、overflow-y：

 43.透明度与手势（K68）

 1.opacity:0（透明）~1（不透明） 0.5半透明
在这里插入图片描述

 <style>
        div{ width: 100px; height: 100px; background: red; opacity: 0.5;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
</body>

         注：占空间、所有的子内容也会半透明
 2.rgba
在这里插入图片描述

 <style>
        #div1{ width: 100px; height: 100px; background: red; opacity: 0.5;}
         #div2{ width: 100px; height: 100px; background: rgba(255,0,0,0);}/*最后一个1表示透明，0表示不透明 */
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这又是一个块</div>
</body>

         注：可以让指定样式透明，而不影响其他样式
 3.cursor（手势）
        a.default（默认）
在这里插入图片描述

  #div2{ width: 100px; height: 100px; background: rgba(255,0,0,0);
                cursor:pointer;
        }

        b.自定义鼠标样式. 准备图片： .cur 、.ico

 44.最大最小宽高（K69）

  • min-width
  • max-width
  • min-height
  • max-height

  •     注：强化对百分比单位的理解   %单位：换算 -> 以父容器的大小进行换算的

     45.CSS默认样式（K70）

     1.无默认样式body、h1…h6、p、ul、…
     2.有默认样式；div、span、…

            body -> margin： 8px
            h1   -> margin： 上下 21.440px
                    font-weight：bold
            p    -> margin： 上下 16px
            ul   -> margin： 上下 16px
                    padding：左40px
                    默认点：list-style： none
            a    ->text-decoration：underline

     46.CSS reset（K71）

     1.简单的css reset：
            a.*{margin:0padding:0;}        body、p、h1、ul
                优点：不用考虑哪些标签有默认的margin和padding
                缺点：稍微影响性能
            b.ul{list-style:none;}
            c.{text-decoration:none;color:#666;}（text…为下划线，color为默认颜色）
            d.img{display:block;}
                问题现象：图片跟容器底部有空隙。（内联的对齐方式按基线对齐，而非底线）

            ul{ list-style: none;}
        a{ text-decoration: none; color: #999;}
        a:hover{ text-decoration: underline; color: red;}
        img{display: block;}

                注：写具体页面或一个布局效果时1.写结构 2.css重置样式 3.写具体样式

     47.float浮动（K78-83）

     1.文档流
          文档流是文档中可显示对象在排列时所占用的位置
     2.float特性
          加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
     3.float取值

  • left
  • right
  • none（默认）

  •       例题：
    在这里插入图片描述

     <style>
        body{ border: 1px black solid}
        #box1{ width: 100px; height: 100px; background-color: blue;}
        #box2{ width: 200px; height: 200px; background-color: red;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

          变：
    在这里插入图片描述

            #box1{ width: 100px; height: 100px; background-color: blue; float: left;}

          变：
    在这里插入图片描述

       #box1{ width: 100px; height: 100px; background-color: blue; float: right;}

          变：
    在这里插入图片描述

          #box1{ width: 100px; height: 100px; background-color: blue; float: left;}
        #box2{ width: 200px; height: 200px; background-color: red;float: left;}

     4.float注意点
          只会影响后面的元素
          例题：
    在这里插入图片描述

    <style>
        body{ border: 1px black solid}
        #box1{ width: 50px; height: 50px; background-color: blue;}
        #box2{ width: 100px; height: 100px; background-color: red;}
        #box3{ width: 150px; height: 150px; background: green;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

          变：
    在这里插入图片描述

           #box2{ width: 100px; height: 100px; background-color: red; float: left;}

          内容默认提升半层
    在这里插入图片描述

        <div id="box3">缄默德克萨斯缄默德克萨斯缄默德克萨斯缄默德克萨斯</div>

          默认宽根据内容决定
          原：
    在这里插入图片描述

      #box4{ background: orange;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">缄默德克萨斯缄默德克萨斯缄默德克萨斯缄默德克萨斯</div>
    <div id="box4">“德克萨斯剑术”</div>

          现：
    在这里插入图片描述

         #box4{ background: orange;float: left;}

          换行排列
          原：
    在这里插入图片描述

    ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px;border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

          现：
    在这里插入图片描述

      li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box; float: left;}

    在这里插入图片描述

        li:nth-of-type(1){height: 120px;}

          主要给块元素添加，但也可以给内联元素添加

          原：
    在这里插入图片描述

     ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px;border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box; float: left;}
        li:nth-of-type(1){height: 120px;}
        li:nth-of-type(2){height: 80px;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>斥罪斥罪斥罪</span><span>小狼小狼小狼</span>

          现：
    在这里插入图片描述

        span:last-of-type{ float: right;}

     5.利用clear属性清除float浮动
                固定宽高：  不推荐，不能把高度固定死，不适合做自适应的效果
                父元素浮动：不推荐，父容器浮动也会影响到后面的元素
                overflow：  hidden（BFC规范）如果与子元素想要溢出，那么会受到影响
                display：   inline-block（BFC规范）不推荐，父容器会影响到后面的元素
                设置空标签：不推荐，会多添加一个标签
                after伪类： 推荐，是空标签的加强版，目前各大公司的做法
            a.上下排列：clear属性，表示清除浮动时的，left、right、both
    在这里插入图片描述

    <style>
        #box1{ width: 100px; height: 100px; background: red;float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

            b.嵌套排列
    在这里插入图片描述

     #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 100px; background: red;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>

    在这里插入图片描述

           #box2{ width: 100px; height: 100px; background: red; float: left;}

          解决：1）
    在这里插入图片描述

      <div id="box1">
        <div id="box2"></div>
        <div>这是一个空标签</div>
    </div>

    在这里插入图片描述

          .clear{ clear: both;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>

          解决：2）

      #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 100px; background: red; float: left;}
        .clear:after{ content:''; clear: both; display: block;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>

     6.详见视频

码上奉先
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2022年Java 工程师面试题
weixin_42572320的博客
03-03 2271
第 1 页 共 485 页 目录 1、什么是 Mybatis？............................................................................... 33 2、Mybaits 的优点：............................................................................... 33 3、MyBatis 框架的缺点：.............................
Java Web开发从0到1
会挖坑的小石头的博客
03-15 1067
.
【粉丝福利社】 Node.js从入门到精通（软件开发视频大讲堂）（文末送书-完结）
时光隧道
04-18 1万+
Node.js 是一个开源和跨平台的运行时环境，它允许开发者使用 JavaScript 来编写服务器端的脚本。它基于 Google Chrome 的 V8 JavaScript 引擎，能够在没有浏览器的情况下运行 JavaScript 代码。Node.js 的设计目标是提供一种高效且可扩展的网络应用程序解决方案。它使用事件驱动、非阻塞I/O模型，使其轻量且高效，特别适合处理大量并发连接的数据密集型实时应用。异步和事件驱动：所有API都是异步的，即非阻塞的。
JavaScript基础语法笔记，ECMAScript基础，每部分都有经典案例以及解析。会持续更新（2022.0310）
随便写写
02-10 1241
JavaScript基础语法笔记，适合小白学习，每部分都有经典案例以及解析，会持续更新（2022.0310）！
Java基础知识面试题（2022版）
拉格朗日的学习笔记
04-08 2万+
序列号 内容 链接 1 Java基础知识面试题（2022版） 待续… 2 Java集合容器面试题（2022版） 待续… 3 Java异常面试题（2022版） 待续… 4 并发编程面试题 （2022版） 待续… 5 JVM面试题（2022版） 待续… 6 Spring面试题（2022版） 待续… 7 Spring MVC面试题（2022版） 待续… 8 Spring Boot面试题（2022版） 待续… 9 Spring Cloud面试题（2022版） 待续… ....
2022年火爆了Java基础面试题（大合集）
m0_67698950的博客
03-12 513
「何为编程」 编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 为了使计算机能够理解人的意图，人类就必须要将需解决的问题的思路、方法、和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算机之间交流的过程就是编程。 「什么是Java」 Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。...
【粉丝福利社】PHP从入门到精通（第6版）（软件开发视频大讲堂）（文末送书-完结）
热门推荐
时光隧道
03-18 3万+
PHP（全称为Hypertext Preprocessor）是一种开源的服务器端脚本语言。它被设计用于开发动态的互联网应用程序，例如网站和Web应用程序。PHP可以嵌入到HTML中，可以与数据库进行交互，并且可以生成动态的网页内容。PHP的语法简单易懂，学习和使用也比较容易。它广泛应用于Web开发领域，并且是最流行的服务器端脚本语言之一。
Java面试题全集（上）
maijia0754的博客
01-02 1040
Java面试题全集（上）
Python编译软件pycharm-community-2022.2.3.zip
04-30
PyCharm是一款专为Python开发者设计的集成开发环境（IDE）。它提供了强大的代码编辑、调试、测试、项目管理和...总的来说，PyCharm是一款功能丰富、用户友好的Python IDE，适合从初学者到专业开发者等各类人群使用。
pandas_etl-2022.8.17.1-py3-none-any.whl
03-12
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了...
pandas_etl-2022.8.17.1.tar.gz
03-12
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了...
mkl-2022.2.1-py2.py3-none-win32.whl
05-22
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了...
mkl-2022.2.0-py2.py3-none-win32.whl
05-22
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 284
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 1059
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 366
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
pycharm-community-2022.2.1
09-28
PyCharm Community 2022.2.1是JetBrains公司开发的一款Python集成开发环境（IDE）。它是一个免费的版本，主要面向Python开发者，提供了丰富的功能和工具，帮助开发者提高开发效率。 在PyCharm Community 2022.2.1中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值