HTML、CSS
html
<h1~h6>
<p></p> 文本级元素，中间不能放块级元素(div p table form li)
<a href="http://www.baidu.com">百度</a>
<img width="" height="" src=""/> 文本级元素，但是可以设置宽和高
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th> 或者<td>
</tr>
</table>
[图片上传失败...(image-43b3ba-1586177956872)]
<ul> <!-- 使用最多 -->
<li></li>
</ul>
<ol>
<li></li>
</ol>
<div></div>
<form>
Username: <input type="text" name="username"><br>
Passsword: <input type="password"/>
Gender: <input type="radio" name="gender"> 男 <!-- 单选框 -->
<input type="radio" name="gender"> 女
Interests: <input type="checkbox" name="interest"> <!-- 复选框 -->
<input type="checkbox" name="interest">
学历: <select multiple>
<option></option>
</select>
头像: <input type="file"/>
描述： <textarea rows="" cols="" >
<input type="submit" value="提交"/> <!-- 完全可以使用button来代替 -->
<input type="reset" value="重置"/>
</form>
CSS
三原色
#ffffff; 还有一种简写形式 #fff;
#eeeeee; #eee;
CSS选择器
id选择器 #id
类选择器 .cls
标签选择器 div span p
通配符选择器 *{margin: 0; padding: 0;}
父子选择器
ul > li {
}
<ul>
<li></li>
<li></li>
</ul>
后代选择器(使用的最多)
div li {
}
<div>
<ul>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ul>
</div>
交集选择器(使用)
p#box {
}
p.box {
}
<p id="box">
</p>
<p class="box">
</p>
并集选择器
p#box > p.box { /** 这不是并集选择器,只是为了对比写法，他是一个父子选择器 */
}
<p id="box">
<p class="box">
</p>
</p>
p#box,p.box {
}
<p id="box">
</p>
<p class="box">
</p>
CSS3的选择器
ul > li:first-child { /* 选中是id为a的li */
}
ul > li:nth-child(1) { /* 选中是id为a的li */
}
ul > li:nth-child(3) { /* 选中是id为c的li */
}
ul > li:last-child { /* 选中是id为d的li */
}
ul > li:nth-child(2n) { /* 选中是id为b、d的li */
}
ul > li:nth-child(2n + 1) { /* 选中是id为a、c的li */
}
<ul>
<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
<li id="d"></li>
</ui>
a标签的伪选择器
爱恨法则 love hate
a:link 正常连接情况下
a:vistied 已经访问过
a:hover 当鼠标滑过的时候
a:active 当鼠标点击但没有松开的时候
行内元素和块级元素
div li ul ol table form p h 块级元素，独占一行
a span b i u input select textarea button img 行内元素, 除了img可以设置宽高，其他元素宽高依据内容而定。
a标签中可以放块级元素，在写的时候一定要转成块级元素。
display: block;
display: inline; 如果将一个div使用该属性, 该div就成为了一个行内元素。
dispaly: inline-block; 即具有块级元素的部分特征(可以设置宽高, 没有独占一行)，又具有行内元素的特征，可以并排摆放。
单行文本的垂直显示
将文字的行高和盒子的高度设置为一致的。
背景
background-color: #ffffff;
background-image: url(图片路径);
background-position: （left center right）（top center bottom)； 或者可以写坐标
background-repeat: no-repeat; /* repeat-x repeat-y */
CSS三大特性
层叠性
.box {
height: 200px;
width: 200px;
}
div.box {
background-color: red;
}
<div class="box">
</div>
继承性
color a标签不能继承color属性
font-
text-
line-
div.box{
font-size: 30px;
line-height: 50px;
}
<div class="box">
<span>文字</span>
</div>
权重
id,class,tag
div{ /* 0,0,1*/
color: pink !important;
}
div#box .box1 div.box2 { /* 1,2,2 */
color: red;
}
#box #box1 div{ /* 2,0,1 */
color: green;
}
div.box .box1 #box2 { /* 1,2,1 */
color: black;
}
#box #box1 #box2 { /* 3,0,0 */
color: red;
}
#box #box1 div#box2 { /* 3,0,1 */
color: yellow;
}
<div class="box" id="box">
<div class="box1" id="box1">
<div class="box2" id="box2">
文字
</div>
</div>
</div>
盒子模型
border
borde: 1px solid red;
padding
padding-top: 10px;
padding: 1个值 2个值 3个值 4个值
margin
margin-bottom: 10px;
盒子模型的坑
1.上下的盒子的外边距会有重叠问题。解决方式，只给上盒子设置margin-bottom或者只给下盒子设置margin-top;
2.父子盒子情况下，如果子盒子设置了margin-top，会整体将父子盒子都会向下偏移。
a) 给父盒子设置上的border，border-top: 1px solid transparent;
b)给父盒子设置上的overflow： hidden;
c) 给父盒子设置 padding-top: 10px;
浮动
浮动的元素脱离了标准的文档流。(position: absolute;)
float: left 、right;
清除浮动
对于一个盒子，如果他的子元素都设置了浮动，那么而父盒子并没有设置高度，那么父盒子会有高度塌陷的问题。清除浮动目的是让父盒子自动的适应子盒子的最大高度。
overflow: hidden;
w3c提供的一种方式：内墙法。
.inner-box {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.clearfix {
clear: both;
}
<div class="outer-box">
<div class="inner-bot"></div>
<div class="clearfix"></div>
</div>
- 其他比较优秀的处理方式。
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
定位
相对定位
相对于盒子之前的位置来定位，但是重新定位的盒子之前的位置并不会让出来，只是在盒子的展示上发生了变化。相对定位两种用法：
微调元素；
子绝父相。
绝对定位
绝对定位的盒子脱标了，它的定位如果没有给它祖先元素设置 relative, 那么他是相对于浏览器来定位，这种情况实际工程价值不大。
CSS3的样式
渐变
background-image: linear-grediant(to bottom, red, green)
状态的转换
transform: rotate(35deg); /** 旋转 */
transform: translate(0, 5px); /** 移动, 在y轴方向向下移动5px */
transform: scale(1.2); /* 将盒子放大1.2倍*/
阴影
box-shadow: 5px 5px 5px red;
