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

标题: 王涛-20221014-CSS3 [打印本页]

作者: 黑桃K 时间: 2022-10-15 08:56
标题: 王涛-20221014-CSS3

* CSS的盒子模型
* 概念
* 1.CSS盒子模型本质上就是一个盒子来封装周围的HTML元素。盒子模型包括：边框、外边距、内边距和盒子内的实际内容
* 2.每个标签都是一个盒子（可用display转换）
* 边框boder
* 边框：宽度样式颜色
* 1.border-width宽度
* 2.border-style样式：
* 2.1.solid实线
* 2.2.dashed虚线
* 2.3.dotted点线
* 2.4.none取消边框
* 3.border-color颜色
* 4.设置不同位置的边框
* border-top/bottom/left/right/
* 5.表格细线边框border-collapse
* border-collapse:collapse边框重合
* 6.边框会影响盒子的实际大小
* 1.测量盒子大小的时候不量边框
* 2.测量的时候包括了边框，那么设置盒子的宽高时，应该减去边框的宽度*2(边框有上下左右四个部分)
* 内边距（padding）
* 1.padding-left左内边距
* 2.padding-right有内边距
* 3.padding-top上内边距
* 4.padding-bottom下内边距
* 内边距的简写（padding）
* 1.一个值：上下左右
* 2.两个值：上下左右
* 3.三个值：上左右下
* 4.四个值：上右下左顺时针
* 内边距注意点
* 1.如果盒子本身没有指定宽度，padding不会成大盒子大小
* 2.内边距会撑大盒子的大小，如果不想改变盒子的大小，用盒子原来的值减去两倍的内边距的值即可
* 外边距（margin）
* 属性：top、bottom、left、right
* 简写：同内边距
* 外边距典型应用
* 1.外边距可以让块级盒子水平居中，需满足：
* 1.盒子必须指定宽度
* 2.盒子左右的外边距设置auto即可
* 3.如果时行内元素或者行内块元素设置水平居中，使用text-align：center实现（给父级元素添加）
* 2.外边距合并
* 相邻块元素垂直外边距的合并问题
* 当上下相邻的块元素，他们的垂直间距，会互相包含，取最大值显示
* 3.嵌套块元素的垂直外边框塌陷
* 如果父元素和子元素同时都有上外边距，此时父元素会塌陷较大的外边距值
* 1.给父元素添加上边框
* 2.给父级元素添加上内边距
* 3。给父级元素添加overflow：hidden；
* 4.清除内外边距
* 网页中的各个元素基本都有自己所带的内外编剧，使用通配符选择器清楚后，方便后期的格式调整
* CSS圆角边框
* 语法：border-radius：length（像素值）
* 属性值可以为具体的数值，或者百分比，border-radius指的时圆的半径
* 如果想要正圆，先画一个正方形，将border-radius的属性值设置50%
* 可分别设置四个角的圆角边框1.border-top-left-radius 左上角圆角2.border-top-right-radius 右上角圆角3.border-bottom-left-radius 左下角圆角4.border-bottom-right-radius 右下角圆角
* CSS的盒子阴影
* 属性名为：box-shaodow
* 1.h-shadow：必须值，水平阴影位置，允许负值
* 2.v-shadow：必须值，垂直阴影位置，允许负值
* 3.blur：可选，模糊距离
* 4.spread：可选，阴影尺寸
* 5.color：可选，阴影颜色
* 6.inset：可选，将外部阴影改成内部阴影
* 注意
* 1.阴影默认是外阴影（ouset），这个数值不能写在box-shadow属性内，否则阴影无效
* 2.盒子阴影不占空间，不会影响元素的排列

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