[前端web笔记05]css03

(学习前端的小菜鸟,争取每天记录笔记)

第五天,选择器特性 边框 边距 盒子阴影 塌陷问题 圆角

相同的属性命令有变化,取最近的

<!-- 继承性 -->

在自己本身未加属性的情况下,会继承父级的属性,但是权重会为零

<!-- 权重 -->

在加过属性的不同命令中,按权重计算哪个生效,

(0.0.0.0) 优先度为 行内元素 >id >类class >标签> 自己的属性> 继承>

权重高的才会生效,权重低的会被覆盖,(行内样式.id.class.标签) 通配符 浏览器默认 继承 */

!important,权重无限大

<!-- 边框 -->

border-top: 2px red solid;

实线 solid实线

虚线 dashed虚线

点线 dotted点线

<!-- 内边距 -->

padding:20px 代表盒子内边距向内 四个方向 收缩20px

不同的方向:上top 右 right 下bottom 左left

<!-- 外边距 -->

margin:20px 代表盒子外边距向外 四个方向 撑大20px

auto可以让左右填充满 例: margin:0 auto;

外边距上下使用margin,外边距不会相加,会取最大值

外边距左右不会取最大值,会相加

<!-- 塌陷问题 -->

overfloe:hidden（也可以用作溢出隐藏）

当块级元素嵌套关系时,给子元素设margin-top,会带着父元素一起下降,这时候可以给父元素设置 overfloe:hidden

<!-- 盒子阴影 -->

box-shadow: 13px 15px 17px 2px rgb(0 0 0 / 50%);

box-shadow: x位置 y位置 模糊度 阴影尺寸 阴影颜色

<!-- 圆角 -->

border-radius: 20px;

border-radius: 20px;是倒圆角, 20就是半径