作业相关内容-优快云博客

该文介绍了HTML和CSS的基础知识，包括元素显示模式如块元素和行内元素，表格和表单标签的使用，以及CSS的选择器、盒子模型、浮动和定位。还提到了CSS中的伪类选择器，如:hover，以及如何处理文本溢出和元素浮动后的影响。文章强调了margin塌陷问题和解决方案，以及如何利用transform开启3D空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../image/77/iconfont.js"></script>
  <script src="../image/font_4159592_34ldkqiwhpx/iconfont.js"></script>
  <style>
    body{height: 4000px;
    }

      .icon1 {
        float: left;
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      .icon2 {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      .box2{height: 300px;
        width:900px;
        background-color: aliceblue;
      }
      .box5 li{
        list-style: none;
        float:left;
        margin-right: 20px;
      }
      .box3{float: right;}
      .box6 li {
        display: flex;
            width: 100px;

            list-style: none;
            background-color: aqua;
        }
        .box7{
            position: relative;
            width: 900px;
            height: 250px;
            background-color: pink;
            background: url(../image/12.png);
        }
        .box8{display: flex;}
        .icon {
            width: 50px;
            height: 50px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;}
            .box9{position: absolute;
            bottom: 125px;}
            .box10{position:absolute;
            bottom: 125px;
            left: 710px;}

</style>

</head>
<body>


      <div class="box2">
        <ul class="box5">
          <svg class="icon1" aria-hidden="true">
            <use xlink:href="#icon-icon-xiaomiguishu"></use>
          </svg>
          <div class="box4"></div>

          <li>Xiaomi手机</li>
          <li>Redmi手机</li>
          <li>电视</li>
          <li>笔记本</li>
          <li>平板</li>
          <li>家用</li>

<li>路由器</li>
          <li>服务中心</li>
          <li>社区</li>
          <form action="https://www.baidu.com/s" class="box3">
          <input type="text" name="wd" id="" placeholder="显示器">
          <button><svg class="icon2" aria-hidden="true">
            <use xlink:href="#icon-chakuaidi"></use>
          </svg></button>
        </form>
        <br />
        </ul>
        <div class="box8">

        <ul class="box6">
          <li>手机</li>
          <li>电视</li>
          <li>家电</li>
          <li>笔记本平板 </li>
          <li>出行穿搭</li>
          <li>耳机音箱</li>
          <li>健康儿童</li>
          <li>生活箱包</li>
          <li>智能路由器</li>
          <li>电源配件</li>
        </ul>
        <div class="box7">
          <div class="box9">
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangyou2"></use>
        </svg></div>
        <div class="box10">
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangzuo2"></use>
          </svg></div>
        </div>

        </div>





</body>
</html>

笔记

元素显示模式：块元素、行内元素（<span>）、行内块元素
表格标签：
表单标签：
<form action="#" >
input type="" value="" (单选框、多选框必须有) name
select option
</form>
默认选中 checked（多选框） selected
h5标签
css：层叠样式表
基本样式：
选择器{
属性名：属性值；
}
引入方式
外部样式 <link>
内部样式 style
行内样式 style="color:pink;"
选择器：
基本选择器：标签选择器、类选择器(.box1)、id选择器(#box2)、通配符选择器
div class="box1" id="box2"
包含选择器:子代选择器（> 亲生儿子）、后代选择器（后代所有）
font-size font-weight font-style
逗号选择器：div，
p，
span{}
属性选择器：
input[type="password"]
^ $ *
/* :hover 鼠标悬停 */
cursor 鼠标样式
结构伪类选择器：
父元素子元素:nth-child(n) :父元素第n个子元素
even：偶数
odd：奇数
盒子模型
包括：边框，外边距，内边距和实际内容
内边框
用padding设置内边距
padding-left
padding-right
padding-bottom
padding-top
padding的复合写法
一个值：上下左右
两个值:上下左右
三个值:上左右下
四个值:上右下左顺时针

外边框
用margin设置外边距
margin-left
margin-right
margin-bottom
margin-top
margin的复合写法(同padding)
外边距margin注意事项:
1、子元素的margin是参考父元索的padding计算的
2、上左margin影响自身的位置，下右影响兄弟元素的位置
3、行内元素上下margin设置后无效果
4、margin-left:auto距离左边能多远多远块级元素:左右margin设置auto则块级元素水平居中
5、margin可以为负值

margin塌陷问题:父元素里，给第一个子元素设置margin-top值，给最后一个子元素设置margin-botom值，都会被父元素抢走
解决方法:
1.给父元素加边框
2.给父元素加padding
3.overflow: hidden 溢出之后隐藏-------偏方

margin合并问题:存在于上下外边距之间
尽量规避，解决的副作用太大

文本溢出解决方法：加上overflow: auto;

解决patting/border影响盒子大小问题
加上box-sizing: border-box;

元素浮动后的特点
脱离文档流
无论元素类型，只要浮动，就按照浮动规则来:默认宽高都是被内容撑开的(尽可能小)，而且可以设置宽高
和其他元素共用一行 (一个天上，一个地上)
不存在外边距塌陷
没有行内块元素的空白问题

浮动后的影响:
父亲的高度塌陷(脱离文档流)
父亲的兄弟，顶上去
子元素有浮动，其后边兄弟有影响，对其前边的兄弟没有影响对兄弟元素的影响: 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟无影响。对父元素的影响:不能撑起父元案的高度，导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

解决影响:
1、给父亲加height 未解决对兄弟元素的影响
2、直接让父亲也浮动问题更加严重
3、父亲的兄弟直接文字环绕overflow: hidden 问题更大，子元素兄弟直接连数字直接丢失
4、接近完美:clear: left==========消除左浮动影响 :不能为行内元索自身不能浮动

开启3d空间:给父元素添加transform-style:preserve-3d
perspective:;不能给负数有透视效果-------近大远小景深景深默认值为none

透视点的位置
设置透视点位置:观察者的位置
perspective-origin:100px200px;人蹲下200px，然后向右边移动100px般情况下不需要更改