盒子模型续集（接上周打卡后半部分）

1.清楚默认样式:

使用通配符选择器，清楚有默认样式标签的内外边距。

2.清除列表的项目符号： 

选中li标签，令line-style=none

 3.元素溢出overflow：

当标签的内容超出标签的范围时，出现元素溢出现象：

3种处理方法：

控制属性overflow=hiden使溢出内容隐藏；

控制属性overflow=scroll使溢出内容滚动（无论元素是否溢出都有滚动条）

控制属性overflow=auto使溢出内容滚动（当元素溢出时有滚动条）

4.外边距问题-合并和塌陷：

 合并问题：垂直排列的两同类盒子，如果上下都有margin，会合并。

塌陷问题：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动。

解决办法：

取消子级margin，父级设置padding再设置box-sizing=border-box.避免盒子撑大；

父级设置overflow=none;

父级设置border-top.

5.行内元素垂直内外边距的问题：

行内元素的垂直内外边距不能改变行内元素的垂直位置；

行内元素的垂直位置要依靠行高的改变来实现。

6.圆角效果：

作用:设置元素的外边框为圆角。

属性名: border-radius（实质是调节圆角的半径）

属性值:数字+px /百分比

提示:属性值是圆角半径

注：border-radius的多值写法：从左上角顺时针赋值，没有取值的角与对角取值相同。

正圆形状：给正方形盒子设置圆角属性为盒高的一半/50%

胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半。

盒子阴影效果：

作用:给元素设置阴影效果

属性名: box-shadow

属性值: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

X轴偏移量和Y轴偏移量必须书写

默认是外阴影，内阴影需要添加 inset

7.盒子模型综合案例1（产品卡片）：

代码：

 效果：

 8.盒子模型综合案例2（新闻列表）：

代码：

 效果：

 ps:每条新闻前的图片为背景图片，分两层来写，li标签一层，a标签一层。

文字与背景图使用pading-left拉开距离。