首页 > 其他分享> 文章详细

CSS总结4

2021-10-31 13:32:38 阅读：142 来源： 互联网

标签：总结盒子 solid margin 边框 padding border CSS

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

标签：总结,盒子,solid,margin,边框,padding,border,CSS
来源： https://blog.csdn.net/qq_61109509/article/details/121025724