1.利用伪元素清除浮动方法
清除浮动的样式,放在外层div的最后,:after上就可以了。
例:
.wrapper::after{
content:"";
clear:both; //如果想clear生效,必须是块级元素;
display:block;
}
2.溢出容器,要打点展示
2.1 单行文本,三件套
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
2.2 多行文本
overflow:hidden;
line-height: height的一半
3.浏览器内核问题
现主流浏览器 对应的内核
IE trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto
4.charset 编码字符集
gb2312 只有简体
gbk 扩展字符集,有繁体中文
utf-8 所有
5.form输入框,选择框
<form action="" method="GET">
//输入框内容
<p>username:<input type="text" name="username"></p>
//输入用户名,类型为text文本,namu为输入框名字
<p>password:<input type="password" name="password"></p>
//输入用户名,类型为password密码文本,namu为输入框名字
选择框内容
语文<input type="radio" name="radio1">
数学<input type="radio" name="radio1">
英语<input type="radio" name="radio1">
//类型为radio单选框,name一致就可以把它们串联起来;
提交按钮
<input type="submit">
//可以在地址栏查看提交内容
</form>
6.css的3种引用
1> 行间样式 行间内插入style属性
2>页面级css body内创建一个style标签
3>外部css文件 head内<meta>下面<link>一个文件
7.css选择器
1.ID选择器 # 一一对应
2.class选择器 . 多对多
3.标签选择器 标签名 所有名字相同的
4.通配符选择器 * 全局
8.css 权重
256进制
!important Infinity
行间样式 1000
ID 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
9.伪类(浏览器查找是 自右向左的)
1.父子选择器 div span{};
2.直接子元素选择器 div > span{};
3.并列选择器 div.class{}同时用多个条件
4.分组选择器 div,strong,span{}
10.元素的分类
1.行级元素
内容决定元素所占位置,不可以通过css改变宽高
例:span strong em a del
2.块级元素
独占一行,可以通过css改变宽高
div p ul li ol form address
3.行级块元素
内容决定大小,可以改变宽高
img
11.position属性
position有3种属性
absolute: 绝对定位
层模型,相对于最近的有定位的父级定位,如果没有,那么相对于文档定位。
relative: 相对定位
保留原来位置进行定位 相对于原来位子定位
fixed: 固定定位
固定在屏幕上的位置
12.居中写法
div{
position:absolute;
left:50%;
top:50%;
margin-left:-50px; //减去一半
margin-top:-50px; //减去一半
}