盒子模型、选择器补充以及float浮动基础讲解
补充一：大盒子和小盒子的兼容问题：
问题所在：在大盒子里面套一个小盒子，给小盒子设置内、外边距会影响外面的大盒子一起移动
解决方式：在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*/
width: 500px;
height: 100px;
} img[alt^="图"]{ /*选中alt属性下以图作为开头的img*/
width: 500px;
height: 100px;
}
img[alt$="中"]{ /*选中alt属性下以中结尾的img*/
width: 500px;
height: 100px;
}
img[alt*="加"] { /*选中alt属性中有加的img*/
width: 500px;
height: 100px;
}
复制代码
补充四：选择器的后代元素和子元素
选自器后面用>表示子元素，用空格表示后代元素。例如:ul>li , ul li
要设置同样的样式可以在两个选择器中间用逗号隔开例如：#box1,#box2
用ul无序列表示例，为元素加一个红色边框：
1. .a>li{ /* ！！ .a子集li */
border: 1px solid red;
}
2. .a li{ /* ！！ .a后代li*/
border: 1px solid red;
}
3. .a>li:nth-child(2){ /* ！！.a下第一个li下的li 同级 */
border: 1px solid red;
}
3. .a>li li:first-child{ /* ！！.a下第一个li的子集第一个li */
border: 1px solid red;
}
4. .a li:first-child li{ /* ！！.a下第一个li的所有子集li */
border: 1px solid red;
}
4. .a>li:not(:first-child){ /* ！！.a子集下第一个li下所有同级*/
border: 1px solid red;
}
复制代码
浮动float属性基础
为盒子设置一个float属性，会使盒子脱离标准布局流，它的弊端有：
1.给父盒子造成了盒子塌陷 2.使用display : inline-block;会产生一条缝隙复制代码
解决盒子塌陷的方法：
1.给父盒子添加属性overflow:hidden
2.是给父盒子固定的高度，但是子盒子变多会溢出
3.父盒子里面添加一个div，设置clear: both清除两边的浮动! 但是会多出一个div元素，显得多余
4.为父盒子添加一个伪类:after{content=''; display:block; clear:both;}复制代码 float的常用值有： left right； 清除浮动为clear: left right both（both用来清除左右浮动）
使用ul无序列表举例：
li{
float: left;/*向左浮动*/
}复制代码在网页中得到的结果如下图：
同理改成float：right； 得到的结果就会向右排成一排但是顺序与左边完全相反，如下图：
作者：Eɴᴅᴇᴅ
链接：https://juejin.cn/post/7034068766262722567