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

标题: 张锐杰-20221014-CSS03 [打印本页]

作者: 张锐杰 时间: 2022-10-15 11:38
标题: 张锐杰-20221014-CSS03
CSS的盒子模型
概念
      CSS盒子模型本质上就是一个盒子来封装周围的HTML元素。盒子模型包括：边框、外边距、内边距和盒子内的实际内容。
      一个标签就是一个盒子，不仅仅是div标签，所有的标签都是盒子。

边框（border）
      border可以设置盒子的边框
      语法为：
         border： border-width border-style border-color;

      边框的样式也可以单独设置
         border-style
            属性值
                  solid  代表实线边框（最常用）
                  dashed  代表虚线边框
                  dotted  代表点线边框
                  none  可以取消边框

      边框的宽度可以单独设置
         border-width：像素值;

      边框颜色可以单独设置
         border-color：颜色;

      设置不同位置的边框
         上边框：border-top
         左边框：border-left
         下边框：border-bottom
         有边框：border-right

      表格的细线边框
         border-collapse
            属性值为：collapse
            collapse代表合并/塌陷的意思，目的是将相邻的边框合并在一起，边框重叠。

      边框会影响盒子的实际大小
         解决边框影响盒子大小的方法
            1、测量盒子大小的时候不量边框
            2、测量的时候包括了边框，那么设置盒子的宽高时，应该减去边框的宽度*2(边框有上下左右四个部分)

内边距（padding）
      属性
      内边距的简写（复合写法）
      注意点
         如果盒子本身没有指定宽度，则padding不会撑开盒子大小
         内边距会撑大盒子，如果想添加了内边距之后不改变盒子的整体大小，那么用盒子原来的大小减去内边距的值即可

外边距（margin）
      属性
      外边距的复合写法
      外边距的典型应用
         外边距可以让块级盒子水平居中
            需要满足以下条件
                  1、盒子必须指定宽度
                  2、盒子左右的外边距设置为auto即可

            如果是行内元素或者行内块元素设置水平居中，使用text-algin：center；来实现即可（给父元素添加该属性）。

         外边距合并的问题
            相邻块元素垂直外边距的合并问题
                  当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是两个外边距的值相加，而是取两个值中的较大者，这种情况就是相邻块元素垂直外边距的合并。

         嵌套块元素的垂直外边距塌陷
            如果父元素和子元素同时都有上外边距，此时父元素会塌陷较大的外边距值。
            解决办法
                  1、给父元素添加上边框
                  2、给父元素添加上内边距
                  3、给父元素添加overflow：hidden；

         清除内外边距
            网页中的各个元素基本上都有自己所自带的内外边距，使用通配符选择器进行清除后，方便后期的样式调整。

CSS的圆角边框
语法：border-radius:length（像素值）;
      属性值可以为具体的数值或者百分比，border-radius指的是圆的半径
      如果想要画一个正圆，先画一个正方形，将border-radius的属性值设置为50%即可
      可以分别设置四个角的圆角边框，可以使用如下属性
         border-top-left-radius  左上角圆角
         border-top-right-radius  右上角圆角
         border-bottom-left-radius  左下角圆角
         border-bottom-right-radius  右下角圆角

CSS的盒子阴影
属性名为 box-shadow
属性值
注意：
      1、阴影默认的就是外阴影（outset），但是这个属性值不能写在box-shadow属性内，否则阴影无效
      2、盒子阴影不会占用空间，也就是不会影响盒子的排列

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