菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈玉-20221014-CSS3 [打印本页]

作者: polaris123 时间: 2022-10-14 23:27
标题: 陈玉-20221014-CSS3
一、今日学习内容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

二、今日问题
今日未遇到问题
三、解决方案

无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)