1，鼠标经过换图片
=
一，css特性一
1，层叠性 1）就近原则，哪个原则离结构进，就执行哪个样式
2）里面样式不冲突的不会重叠
2，继承性 行高可以跟单位也可以不跟单位
继承的权重为0，若该元素没有被直接选中，不管父元素权重多高，子元素权重均是0
3，优先级 1）选择性相同，则执行层叠性
2）选择器不同，根据选择器权重执行
a链接给浏览器固定样式：蓝色，想改变把a单独拿出来改
4，权重叠加： 如果是复合选择器，会有权重叠加，需要jisuan
二，盒子模型
3，盒子模型边距
4，1）边框简写 （没有顺序）border: 5px solid pink;
2）边框分开写法 border-top: 1px solid pink;/只设置上边框
3）
div{
border-top: 1px solid #000;
border-left: solid #000;
border-right: 2px solid pink;
border-bottom: 1px solid #000;
}
假如只换一条边，可用层叠性（下面覆盖上面）
div{
border:2px solid pink; }
border-top: 1px solid #000;
5，表格细线边框 （css）里面改border-collapse: collapse;
th{
height: 30px;
}
table,
td,th{
border:2px solid pink;
/* 合并相邻边框 */
border-collapse: collapse;
font-size: 14px;
/* 字体居中 */
text-align: center;
}
6,border边框会影响盒子实际大小
1），测量盒子大小的时候，不量边框
2），如果测量的时候包含了边框，则需要width/heigh减去边框数（注意两边）
7，盒子模型内边距（padding）
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
8，盒子模型内边距复合属性
注：padding会影响实际盒子大小
padding： 20px;
- 用width/height减去多余边框大小（注意两边） ,padding好处：给盒子宽度不合理，因为字数不同，最后留的间距不一样，用padding撑开
- a属于行内元素，想要高转换为行内块元素
- padding不会撑开盒子情况：盒子本身没有指定width/height情况
9，盒子模型外边距margin
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
- margin复合属性与padding是一样的
- 外边距让盒子水平居中：必须满足 1）盒子必须指定宽度 2）盒子左右外边距都设为auto
三种写法
margin-left: auto;margin-right: auto;
margin: auto;
margin: 0 auto;
注：以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父亲添加text-align:center即可
10，嵌套块元素垂直外边距合并与塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法
- 可以为父元素定义（上）边框
- 可以为父元素定义（上）内边框
- 可以为父元素添加overflow:hidden
/* border: 1px solid red; */
/* border: 1px solid transparent; */
padding: 1px;
overflow: hidden;
11,清除内外边距
/* 这也是我们css第一行代码 */
*{
padding: 0;
margin: 0;
}
注： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了
12，若图片超过了盒子宽度
<style>
.box img {
设置宽度为100%
width: 100%
}
</style>
<body>
<div class="box">
<img src="imges/img.jpg" alt="">
</div>
<body>
13，去掉li前的小圆点
li{
/* 去掉li前面的小圆点 */
list-style: none;
}
三，圆角边框
语法 border-radius: length;
圆形 border-radius: 50%;
圆角矩形 将值设置为高度的一半
可以跟四个值 border-radius: 10px 20px 30px 40px;(从左上角顺时针)
跟两个值 对角相等
四，盒子阴影
语法 box-shadow: h-shadow v-shadow blur spread color inset;
blur是虚实，spread是大小
div {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
/* rgba(0,0,0,.3)为半透明 */
}
五，文字阴影
语法 text-shadow: h-shadow v-shadow blur color
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
