CSS基础
2019-02-17 本文已影响0人
woochen123
1.样式表
1.1 行内样式表
<input type="text" style="color:#ccc;font-size:25px">
1.2内部样式表
<head>
<style>
div {
color:blue;
font-size:13px;
}
</style>
<head>
1.3 外部样式表
//style.css
div {
color:black;
}
2.选择器
2.1基本选择器
1.标签选择器（元素选择器）
2.类名选择器（上面点声明，下面class调用）
3.多类名选择器
4.id选择器（#声明，id调用）使用较少
5.通配符选择器(适应所有标签) 一般不用
注意事项:
1.选择器命名推荐使用中横线，不使用下划线(first-span);
2.推荐使用英文加字母(a1);
2.2 复合选择器
1.后代选择器
2.子代选择器
3.交集选择器
4.并集选择器
2.3 伪类选择器
:hover
a:hover {
color:red;
}
3.布局模式
- 块级元素
独占一行，有宽高 例如：div
- 行内元素
同占一行，宽高无效(包裹) 例如：span
- 行内块元素
同占一行，有宽高 例如：标签加上float属性
例如<img /> <input /> <td /> - 元素块转化
各元素块之间可以相互进行转化，以使用其他的特性
4.三大特性
- 层叠性(就近原则)
- 继承性(子类可以继承父类的部分属性，如font-，text-，line-，color)
- 优先级
1.继承和*的权重(0,0,0,0);类选择器权重(0,0,1,0);标签权重(0,0,0,1);id选择器权重（0,1,0,0);行内属性权重(1,0,0,0);!important权重(无限大)
2.权重可以叠加
5 浮动
让多个块元素在一行显示(设置该属性的元素会漂浮在其他元素的上方)
5.1 使用浮动
1.浮动不占位置(实际影响的是后面的盒子)
2.浮动不会超越父级的padding值
3.元素添加浮动后可以让其拥有行内块元素属性
5.2 清除浮动
因为浮动会使元素不再占用位置，有时需要让元素仍然占用空间，所以需要清除浮动。
1.额外标签法(在父级的最后加上一个标签，并加上clear属性)
2.在父级加上overflow:hidden
3.伪元素清除法
4.双伪元素清除法
6.定位(position)
由定位类型和外偏移组成
6.1 定位类型
6.1.1 相对定位
1.以自己为中心
2.会占位置
div {
positon:relative
top:10px;
left:10px;
}
6.1.2 绝对定位
- 以最近的并且有定位的父级为中心(直到浏览器为中心)
- 不会占位置
div {
positon:absolute;
bottom:10px;
right:10px;
}
6.1.3 固定定位
- 以浏览器为中心
- 不会占位置
6.2 边偏移
div {
position:absolute;
left:0;
top:0;
}
6.3 定位层级
div {
z-index:0;
}
1.默认层级是0，后面的会在前面的上面
2.只有定位的元素才有层级属性
7 显示与隐藏
div {
display:none;//隐藏元素(不占位置，类似gone)
display:block;//显示元素(转化为块元素)
visibility:hidden;//隐藏元素(占位置，类似unvisible)
visibility:visible;//显示元素
overflow:auto;//文本超出时滚动
outline:none;//取消外边框
overflow:hidden;//超出部分隐藏
text-flow:ellipsis;//超出部分为省略号
white-space:nowrap;//超出部分文本不自动换行
}
textarea{
resize:none;//防止拖拽
}
8 部分标签特性
8.1 内边距和边框
border,padding会使设置了宽高的容器撑大
