盒子模型、选择器补充以及float浮动基础讲解

「已注销」

于 2021-12-06 20:01:53 发布

阅读量227

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_45876651/article/details/121754718

版权

本文详细介绍了CSS中的盒子模型问题，包括大盒子与小盒子的兼容解决方案，通过设置overflow属性。此外，讲解了border-radius属性用于创建圆角效果，以及如何使用标签选择器进行元素筛选。还探讨了选择器的后代元素和子元素的区别，并给出实例。最后，阐述了浮动float属性的基础知识，包括其可能导致的盒子塌陷问题及解决办法。

摘要由CSDN通过智能技术生成

补充一：大盒子和小盒子的兼容问题：

问题所在：在大盒子里面套一个小盒子，给小盒子设置内、外边距会影响外面的大盒子一起移动
解决方式：在css中给大盒子加上一个overflow属性（如下）：

voerflow:hidden;/*超出内容截断*/

补充二：border-radius圆角设置

盒子圆角border-radius属性介绍：

border-radius:90px;/*复合属性四个角同时设置半径为90px*/
拓展为：
border-top-left-radius:90px;/*设置左上角半径弧度为90px*/
border-top-right-radius:90px;/*设置右上角半径弧度为90px*/
border-bottom-left:90px;/*设置左下角半径弧度为90px*/
border-bottom-right-radius:90px;/*设置右下角半径弧度为90px*/

注：radius的值可以用px或者%作为单位

补充三：标签选择器筛选

用img标签作示例：

              img[src]{            /*选中img中有src的属性*/
        width: 600px;
        height: 100px;
    }         img[src$=".jfif"]{   /*选中src属性下以.jfif结尾的img*/