前端速记

选择器

选择器{
    样式
}

• 标签选择器

h1{
    color:red;
}

• 类选择器

.box1{
    color:red;
}

• id选择器

#d1{
    color:red;
}

• 属性选择器

选择器	匹配规则	示例
[属性]	选中包含某个属性的元素	[disabled]
[属性="值"]	选中属性值 完全匹配 的元素	[type="text"]
[属性~="值"]	选中属性值 包含某个单词 的元素	[class~="btn"]
[属性|="值"]	选中属性值等于 值 或 值- 开头的元素	[lang|="en"]
[属性^="值"]	选中属性值 以某个值开头 的元素	[href^="https"]
[属性$="值"]	选中属性值 以某个值结尾 的元素	[src$=".jpg"]
[属性*="值"]	选中属性值 包含某个值 的元素	[title*="关键字"]

• 伪类选择器

伪类	作用	示例
:hover	选中鼠标悬停的元素	button:hover { color: red; }
:focus	选中获得焦点的元素	input:focus { border: 2px solid blue; }
:active	选中鼠标按下的元素	a:active { color: green; }
:nth-child(n)	选中第 n 个子元素	li:nth-child(2) { color: green; }
:checked	选中已勾选的表单项	input:checked { background: red; }
:disabled	选中禁用的表单	input:disabled { background: gray; }
:not(选择器)	选中不匹配选择器的元素	div:not(.active) { opacity: 0.5; }

Display和浮动

Display方式

• block:块元素
• inline：行内元素
• inline-block:行内块元素
• none：不显示，但是代码中保存

浮动操作

.div1{
    float:left;
}
.div2{
    float:right;
}

清除浮动

clear:both; //两侧不允许浮动，直接新开一行
clear:left；//左侧不允许浮动
clear:right;//右侧不允许浮动

防止边框塌陷

• 固定父div大小，防止浮动跑出 不推荐使用
• 在所有浮动构件之后，加入空的div,然后设置clear:both，直接会在最后面新开一行，撑开父级边框
• 在父div中设置overflow:hidden，自动撑开