<!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般情况下不需要更改