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

标题: 赵强-20221014-CSS03 [打印本页]

作者: BlueFlame 时间: 2022-10-14 23:46
标题: 赵强-20221014-CSS03
一、今日所学内容
（1）CSS的盒子模型
   概念：CSS盒子模型本质上就是一个盒子来封装周围的html元素。盒子模型包括：边框、外边框、内边距、和盒子内的实际内容
   边框（border）：
border可以设置盒子的边框
语法：
      border：border-width border-style border-coleor；
边框的样式也可以单独设置
      border-style
     属性值：
   solid代表实线边框（最常用）
   dashed代表虚线边框
   dotted代表点线边框
   none可以取消边框
边框的宽度可以设置
      border-width：像素值；
边框的颜色可以单独设置
      border-color：颜色；
设置不同位置的边框
      上边框：border-top
      右边框：border-right
      下边框：border-bottom
         左边框：border-left
边框会影响盒子的实际大小
   内边距（padding）
属性                            说明
         padding-left                左内边距
         padding-right             右内边距
         padding-top                上内边距
         padding-bottom          下内边距
   内边距的简写（复合）
         内边距简写属性
         上下左右内边距都是10px
         padding: 10px;
         上下内边距是10px,左右内边距是50px
         padding:10px 50px
         上内边距20px 左右内边距为40px,下内边距是60px
         padding: 20px 40px 60px;
         上右下左的顺序（即顺时针方向赋值）上：20px 右：15px 下：30px 左：10px
         padding: 20px 15px 30px 10px
      注意：盒子本身没有宽度，padding不会撑开盒子大小
            盒子居内边距会撑开大盒子，如果想添加了内边距之后不改变盒子的整体大小，那么用盒子的大小减去内边距的值即可

      外边距（margin）
      /* 设置上外边距 */
         margin-top: 20px;
         /* 设置左外边距 */
         margin-left: 100px;
         /* 设置下外边距 */
         margin-bottom: 100px;
         /* 设置右外边距 */
         margin-right: 100px;
      外边距的典型应用
外边距可以让块级盒子水平居中，但是需要满足一下条件
      1.盒子必须指定宽度
      2.盒子左右的外边距设置为auto
如果是行内元素或者行内块元素设置水平居中，使用text-align：center；来实现即可（给父元素添加该属性）

外边距合并的问题
      相邻块元素垂直外边距的合并问题
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素也有上外边距，则他们之间的垂直间距不是两个外边距的值相加，而是他们两个中的最大值
嵌套块元素的垂直外边距塌陷
      如果父元素和子元素同时都有上外边距，此时父元素会塌陷加大的边距值
解决办法：
   1.给父元素添加上边外距
        2.给父元素添加上内边距
   3.给父元素添加overflow: hidden;
清除内外边距
         网页中的各个元素基本上都有自己所自带的内外边距，使用通配符选择器进行清除后，方便后期的样式调整
（2）CSS的圆角边框
   语法：border：radius：length（像素值）；
参数值（属性值）可以为具体的数值或者百分比，border-radius指的是圆的半径
如果想画一个正圆,先画一个正方形,将border-radius的属性值设置为50%即可
可以分别设置四个角的圆角边框,可以使用如下属性
         /* 左上角圆角边框 */
         border-top-left-radius: 10px;
         /* 右上角圆角边框 */
         border-top-right-radius: 20px;
         /* 左下角圆角边框 */
         border-bottom-left-radius: 30px;
         /* 右下角圆角边框 */
         border-bottom-right-radius: 40px;
（3）盒子的阴影
属性名:box-shadow
属性值:
值                                  说明
         h-shadow                      必须值,水平阴影的位置,允许负值
         v-shadow                      必须值,垂直阴影的位置,允许负值
         blur                               可选模糊距离
         spread                            可选模糊的尺寸
         color                               可选模糊阴影的颜色
         inset                               可选将外部阴影改为内部阴影

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