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

标题: 高钰琪-CSS（4）-20221114 [打印本页]

作者: mx88783 时间: 2022-11-14 19:54
标题: 高钰琪-CSS（4）-20221114
一、今日学习内容：CSS的盒子阴影
box-shadow
属性值
h-shadow，必须值，水平阴影的位置，允许有负值
v-shadow，必须值，垂直阴影的位置，允许有负值
blur，可选值，模糊距离
spread，可选值，阴影尺寸
color，可选，阴影颜色
inset（内部阴影），可选，外部阴影是outset
默认的阴影是外部阴影，但是不可以在box-shadow写这个单词，否则阴影会失效
盒子阴影不占用空间，不会影响其他盒子的排列

CSS的圆角边框
border-radius
指圆的半径
如果想要画一个正圆，先设置正方形，再将border-radius设置为宽高的一半，或者50%
border-top-left-radius左上角圆角边框设置
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-left-radius左下角
CSS的盒子模型
概念：页面布局的时候我们要学习三大核心：盒子模型、浮动和定位
盒子模型的组成
边框
border属性
border:border-width border-style border-color;
单独设置
border-width边框宽度
border-style边框样式
solid实线边框
dotted点线边框
dashed虚线边框
边框会影响盒子实际大小
如果去页面量盒子，需要width/height减去边框高度×2
给表格设置细线边框
border-collapse:collapse;将相邻的边框合在一起
内边距
padding边框和内容的距离
padding写一个值，代表上下左右都是一样的内边距值
padding写两个值，代表上下内边距和左右内边距
padding写三个值，代表设置上、左右、下内边距
padding写四个值，代表上、右、下、左内边距值（顺时针）
padding-left padding-right padding-top padding-bottom
padding不会撑开盒子的情况
如果盒子没有指定宽度，就不会被padding撑开，如果指定了，就会被撑开
如果不想被padding撑开盒子，将高度和宽度减去padding值即可
外边距
margin
外边距典型应用
将块级盒子进行水平居中
需要满足1、盒子必须有宽度2、将左右边距设为auto
如果让行内盒子进行水平居中，给父级元素添加text-align:centr;
外边距的合并
相邻块元素的垂直外边距合并
当上下相邻的两个块元素相遇时，如果上面的盒子有下外边距，下面的盒子有上外边距，则他们之间的外边距取较大的值
嵌套块元素垂直外边距的塌陷
如果两个嵌套的盒子，父元素与子元素都有外边距，此时父元素会塌陷较大的外边距值
解决方案：给父元素定义上边距；给父元素定义上内边距；给父元素添加overflow:hidden;属性
清楚内外边距
网页元素很多有带着默认的内外边距，而且不同的浏览器默认的也不同，所以在网页进行布局前，首先将元素自己带的内外边距清除掉

二、今日问题：无
三、解决方案：无

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