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