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

标题: css4-门帅20221114 [打印本页]

作者: I1220 时间: 2022-11-14 19:50
标题: css4-门帅20221114
今日学习内容
css的盒子模型
边框:border
语法：border：border-width  border-style（solid,dotted点线 dashend 虚线）  boder-color;
边框会影响盒子的实际大小做法：width/height减去边框的宽度*2
给表格设置细线边框：border collaspe
内边距:padding
边框与内容之间的距离
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
外边距:margin
边框和边框之间的距离
margin-left：左内边距
margin-right：右内边距
margin-top：上内边距
margin-bottom：下内边距
应用：
1.将块级盒子进行水平居中：盒子必须有宽度
将左右的外边距设置为auto
外边距的合并
相邻块元素垂直外边距的塌陷:相邻两个块元素相遇时，当块元素1有下边距，块元素2有上边距时，这时候的margin取值为两块元素中较大的值
嵌套块元素垂直外边距的塌陷：两个块元素嵌套时，当父元素有上边距，子元素也有上边距时，这时候的父元素取值为两块元素中较大的值。

解决办法：1、给父元素定义上边框border -top
2、给父元素添加上内边距 paddig-top
3、给父元素添加overflow:hidden;属性

清除内外边距
* {margin:0
padding:0}

css圆角边框
border-radius：像素值/百分比
如果想要画一个正圆，就可以先设置一个正方形，然后将border-raidus设置为宽高的一半，或者直接写成50%
border-top-left-radius：左上角圆角边框设置
border-top-right-radius：右上角圆角边框设置
border-bottom-left-radius：左下角圆角边框设置
border-bottom-right-radius：右下角圆角边框设置
css的盒子阴影
在CSS中使用box-shadow属性来为盒子添加阴影
h-shadow  必须值，水平阴影的位置，允许有负值
      v-shadow 必须值，垂直阴影的位置，允许有负值
   blur 可选，模糊距离
   spread 可选，阴影的尺寸
   color 可选阴影颜色
   inset 可选，外部阴影是outset  内部阴影是inset
注意：盒子阴影不占有空间，不会影响其他盒子的排列

今日遇到的问题：无
今日已解决问题：无

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