css
选择
器:
统配选择器
:
*{
}
标记选择器
:
tagName{
}
类选择器
{
}
class=""
.class{
}
Id选择器
id=""
#id{
}
复合类型的选择器
:
群组选择器
：多个选择器作用同一个样式
b,s{
}
.list,p,#id{
}
后代选择器
:匹配某个元素的所有的后代元素
ul li{
}
<ul>**grandfather**
<li> **father**
<ol> **son**
<li>2222</li>
<li>2222</li>
<li>222</li>
<li>
<ul>
<li>3333</li>
</ul>
</li>
</ol>
</li>
<li>1111</li>
<li>1111</li>
</ul>
.list div a{
}
子代选择器
:匹配某个元素下的直系子元素
.test>li{
border:1px solid red;
}
<ul class="test">grandfather
<li> father
<ol> son
<li>2222</li>
<li>2222</li>
<li>222</li>
<li>
<ul>
<li>3333</li>
</ul>
</li>
</ol>
</li>
<li>1111</li>
<li>1111</li>
</ul>
兄弟选择器
:匹配一个元素元素相邻的元素(平行);
div+p{
color:red;
}
<p></p>
<div></div>
<p>111</p>
<p>111</p>
<p>111</p>
....
<div>
<a></a>
<div>
<a></a>
</div>
</div>
div a
div>a
属性选择器
:
<input type="text" class>
<input type="text" class>
[type="text"]{
}
....
伪类选择器
:捕获客户端一些行为、动作；实现部分css特效（
辅助类选择器
）
跟随在正常选择器后使用
:hover
:捕获鼠标移入元素
选择器
:hover{
}
伪元素
：
常用的css 样式属性
：
单位
:
px（绝对单位 像素）
1024（宽度）*768(高度)
1920 500
百分比
：20%
em
:相对单位（倍率）;
2em;
浏览器识别的最小字体大小
:12px；
浏览器默认字体大小
:16px;
1em =16px;
.box{
font-size:14px;
}
<div class="box">
<div style="font-size:2em|px"></div>
</div>
rem
:根相对（倍率）；
html
(响应式布局)
文本、字体
:
color:
font-size:2em|32px;
font-weight:bold;
font-family:字体; face
font-style:itailc; i
text-decoration:none|underline|linethrowth;
text-align:left|right|center|justify(两端对齐);
text-indent:2em;
边框
:
border
：1px（大小） solid(类型) red;
背景类
:
background
通用类
:
width:
height
line-height:行间距(垂直居中效果)
元素转换
:
display:block; 转换为块（显示）
display:inline;内联（显示）
display:inline-block;内联块（显示）
display:none; 隐藏元素(不占位)
盒模型标准占位
:
box-sizing:content-box;
box-sizing:border-box;
width(包含边框+pr+pl)+mr+ml = x
height(包含边框+pt+pb)+mt+mb = y
浮动布局(PC)
:
解决块级元素布局横向排列。
**float:**left|right|none;
元素一旦浮动就【脱离文档流(不占用body的标准位置)】.
影响
:
1
、浮动的元素会覆盖其他没有浮动的元素。
2
、元素的子元素浮动，会导致父元素高度塌陷(清零)
3
、元素浮动后 会文字环绕效果。
清除浮动
:
1
、
增加挡板元素
.clearFix{
clear:left|right|both;
zoom:1;
}
2
、
为父元素增加代码段
:
(1)
:
overflow:hidden;(溢出隐藏效果保留)
zoom:1;
(2)
:为父元素增加伪元素:(万能清除)
.father::after{
content:" ";
height:0;
display:block;
clear:both;
zoom:1;
}
溢出隐藏
:
overflow:hidden|auto;
overflow-y:auto|hidden;