CSS总结4

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 

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值