HTML易错复习

css语法和选择器
css样式的引入
外部样式：
link:

@import:

内联样式>内部样式>外部样式>浏览器默认效果

选择器：
通配符选择器：*{ 所有的标签
}
后代选择器： div p{ div里所有的p标签
}
div>p{ div里父子关系的p标签
}
群组选择器： h2,h3,h4{ 样式
}
伪类选择器： box:hover{ backgroundcolor:yellow; 鼠标经过变绿色
}
div:before{ 在div盒子前面加上
content:“文字”；
width:20px；
height：20px;
background-color:yellow;
}
div:after{ 在div盒子后面加上
content:“文字”； //内容属性
width:20px；
height：20px;
background-color:yellow;
}
选择符的优先级：
important>行内>id>类/伪类/属性>通配符
#header{color:red!important}

背景：
背景颜色：background-color:
背景图片：backgeoung-image:
背景图片位置：background-position:
背景图片重复：background-repeat:
背景图片定位:background-attachment:scroll/fixed;
简写：
background：red url(1.jpg) no-repeat fixed center;

css浮动
1.body,ul{
margin:0; //body自带外边距
padding:0; //ul自带内边距

 }

ul{
list-style:none; //清除自带圆点
}
2.float:
left;
right;
none;
3.clear: //设置元素哪一侧不允许出现浮动元素
none;
left;
right;
both;
4.clip: //对元素的剪裁
必须是绝对定位的 即设置position为absolute
rect(top right bottom left)
5.overflow: //溢出
visible; //超出内容显示在元素外
auto； //自动添加滚动条
hidden； //剪掉超出内容
scroll； //一直显示滚动条
6.display:
none; //不会被显示
block; //块级元素，元素前后会有换行符，可以设置宽高及内外边距
inline； //内联元素，没有换行符，不能设置宽高

css盒模型
1.IE盒模型和标准盒模型的切换：box-sizing:border-box;
标准盒模型的宽度只有内容部分，是独立的；
IE盒模型：content+padding+border
2.display:block;块级元素
diaplay:inline-block;一行显示的块级元素
元素分类转换：
dispaly:
block;将元素转化为块级元素；
inline;将元素转换为行内元素；
inline-block;一行显示的块级元素；
none；将元素隐藏；
3.标签默认样式初始化：
*{
margin:0;
padding:0;
}

鼠标样式：
手形
十字
文本光标
等待
系统自动给出效果
自定义图标
默认
问号
左右箭头
上下箭头

溢出隐藏
单行文本溢出隐藏：overflow：hidden;
单行文本溢出隐藏显示省略号：white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行文本溢出显示省略号：
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //用来限制一个块元素显示的文本行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
overflow属性：
visible:不剪切内容也不添加滚动条。。。。。。。。。。。。。。。
auto:在需要时剪切内容或添加滚动条
hidden：不显示超过对象尺寸的内容
scroll：总是显示滚动条

透明度
opacity:0-1;
字体样式：
字体：font-family：
字号：font-size:
字的样式：font-style:
字的粗细：font-weight:
字的颜色：font-color:
文本属性：
行高：line-height:
文本修饰：text-decoration:
缩进：text-indent:
字符间距：letter-spacing:
空白间距：word-spacing:
英文大小写：text-transform:capitalize/uppercase/lowercase
文本水平对齐：text-align
文本垂直对齐：vertical-align:middle/top/bottom;
//HTML文本修饰
font标签----用于设置文本的字体样式
b标签----文本加粗
i标签----文本斜体
s标签----添加删除线
u标签-----添加下划线
sup标签----添加上标
sub标签----添加下标
strong标签----文本加粗
big标签----元素中的内容在显示时比周围的文本大一个字号
small标签-----元素中的内容在显示时比周围的文本小一个字号

letter-spacing： 字间距；
word-spacing:单词间距

text-transform:文本转换
text-transform属性用于控制英文字符的大小写，其可用属性值如下：
none：不转换（默认值）。
capitalize：首字母大写。
uppercase：全部字符转换为大写。
lowercase：全部字符转换为小写。