一、今日学习内容1.CSS盒子模型
概念：是一个盒子来封装周围的HTML元素。盒子模型包括：边框、外边距、内边距和盒子内的实际内容。
CSS盒子由内容、内边距、边框、外边距组成的。
1.1边框
语法：border： border-width border-style border-color;
这些属性值也可以单独设置：
（1）border-style：solid/dashed/dotted/none;
（2）border-width：像素值;
（3）border-color：颜色;（也可以单独设置一个方向的边框线）
（4）border-collapse：collapse；（表格的细线边框）
注意：边框会影响盒子大小，解决方法是改变自身盒子宽高
1.2内边距
语法：padding-left/right/top/bottom:像素值；今天还学习了padding的复合写法。分别代表不同的padding方位大小。
注意：盒子如果没有设置宽度，padding不会撑开盒子；内边距会撑大盒子，影响盒子本身大小。
1.3外边距
语法：margin-left/right/top/bottom:像素值；今天还学习了margin的复合写法。分别代表不同的margin方位大小。
外边距典型应用：
（1）外边距可以让盒子水平居中，需要满足条件：盒子需要制定宽度，左右外边距设置auto。
（2）外边距合并问题：相邻块元素垂直外边距的合并问题
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是两个外边距的值相加，而是取两个值中的较大者，这种情况就是相邻块元素垂直外边距的合并。
（3）嵌套块元素的垂直外边距塌陷
如果父元素和子元素同时都有上外边距，此时父元素会塌陷较大的外边距值。
解决方法有1、给父元素添加上边框；2、给父元素添加上内边距；3、给父元素添加overflow：hidden；
（4）清除内外边距 * { margin:0;padding:0;} border-radius：像素值；/border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
3.CSS盒子阴影
语法：box-shadow：h-shadow v-shadow blur speard color inset；
二、今日问题
今日未遇到问题
三、解决方案
无
|
