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

标题: 梁洁-20221014-css第三天 [打印本页]

作者: 梁杰，你好 时间: 2022-10-15 17:21
标题: 梁洁-20221014-css第三天
一、学习内容
1、cass的盒子模型
概念：盒子就是用来封装周围html元素的，盒子的模型有边框、内边距、外边距、内容
2、边框border
1）、border的属性值有border-width 边框的宽度 border-style  边框的样式 border-color 边框的颜色
border-style：默认值是none 表示没有边框  solid  实线边框 dashed 虚线边框    dotted  圆点边框
2）、边框的控制：
border-left  左边框 border-ringh他有边框 border-top  上边框 border-bottom  下边框
3）、表格的细线边框
border-collapse：collapse collapse的意思是塌陷。
4）、边框会影响盒子的实际大小的解决办法：
测量距离的时候不测量边框。
设置盒子的宽和高的时候都减去边框宽度的2倍
3、内边距padding
1）、内边距的属性：
padding-left：像素值  左内边距 padding-right右内边距 padding-top  上内边距  padding-bottom  下内边距
1）、内边距的复合写法
padding 只有一个值得时候  表示所有的内边距都是一样的
padding 两个值得时候第一个值代表上下第二个代表左右
padding  三个值得时候第一个代表上    第二个代表左右第三个下
padding四个值得时候第一个上第二个右  第三个下  第四个代表左
2）、注意：
没有高度的盒子是不会被撑开的
内边距会撑开盒子，如果想要盒子不变，需要盒子的宽高减去内边距宽度。
4、外边距margin
外边距的属性：
margin-left  左外边距  margin-right 右外边距 margin-top 上外边距    margin-bottm  下外边距
外边距的复合写法：
margin一个值得话上下左右都是一个值
margin两个值的话第一个值是上下外边距    第二个是左右
margin 三个值得话第一个是上边距第二个是左右边距  第三个是下外边距
marigin  四个值得的话  顺序是上右左下

外边距的典型应用
水平居中  margin：0 auto；
外边距的塌陷问题
父类盒子和子类盒子同事设置外边距，外边距会出现合并，只显示最大的那个值。
解决塌陷：
给父类设置边框
父类设置设置内边距
overflow：hidden
清除外边距
*{ margin：0  ；  padding ：0}  清除默认的内外边距
css圆角边框
border-radius ：像素值也可以是百分比  要画一个正圆的话，需要先设置一个正方形盒子
四个角分别控制
border-top-left-radius：左上角圆的控制
border -top-right-radius ：右上角控制
border-bottom-left-rardius：左下角控制
border-bottom-right-radius：右下角控制
box-shadow阴影控制
h-shadow  横向阴影控制
v-shadow 纵向控制
blur 模糊距离
spread  阴影尺寸
color  阴影颜色
inset  外部阴影转换成内部阴影，默认值是outset，但是不能写在属性值里
注意
outset不写在属性值里面
阴影不占空间，不影响盒子的排列。

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