该文介绍了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般情况下不需要更改
6237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
