1. a:hover+div {} 兄弟
li:hover img {} 镶嵌
2. input {
outline-style: none; 去除轮廓线(也有其他样式)
outline:none; 去除轮廓线
outline-width: thick;
outline-color: red; 颜色
outline: none;
}
3. float: left; 浮动
4. 一个元素浮动起来,会不在占有原来的位置(脱离文档流),同时发生浮动的盒子会在同一行进行排列。如果说
多个元素同时给左浮动,元素就会从左到右在一行排列。
浮动可以让行内元素不再受设置宽高的约束
5. overflow: hidden; 防止浮动造成的高度塌陷
clear: both; 清除所有浮动
6. 盒子组成:(从内到外)
content 内容区
padding: 100px; 内边距
border 边框
margin: 100px; 外边距
真正大小:border+padding+content
7. margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
margin: 20px;
上下左右外边距全部为20px
margin: 20px 30px; 上下外边距为20px 左右外边距为30px
margin: 10px 30px 20px; 上外边距10px、左右外边距30px、下外边距20px
margin: 10px 20px 30px 40px; 顺时针
8. margin: 0px auto; 左右自适应,相当于居中,只适用于块元素
9. overflow: auto; 防止文本溢出
padding-top: 20px; (同上margin)
padding-left: 20px;
padding-bottom: 20px;
padding-right: 100px;
box-sizing: border-box; 避免影响盒子大小
10. 防止外边距塌陷
.father {
border: 1px solid black;
padding: 10px;
overflow: hidden;
}
11. 去除元素默认的内外边距
* {
padding: 0;
margin: 0;
}