一、一些总结
1.布局为什么用不同的盒子,我只想用div
标签都是有语义的,合理的地方用合理的标签。比如产品标签就用h,大量文字段落就用p
2.为啥用那么多类名?
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。
3.到底用padding还是margin
大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。
新知识点:去掉li前面的项目符号(小圆点)
语法:
list-style : none;
二、圆角边框(重点)
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
bordor-radius属性用于设置元素的外边框圆角。
语法:
border-radius : length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
![](https://i-blog.csdnimg.cn/blog_migrate/1098f123161e378eb6c152d52e6c76d2.png)
参数值可以为数值或百分比的形式
如果是正方形,想要设置为一个圆,把数值改为高度或者宽度的一半即可,或者直接写为50%
如果是个矩形,设置为高度的一般就可以做
该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
三、盒子阴影(重点)
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为孩子添加阴影。
语法:
box-shadow : h-shadow v-shadow blur spread color inset;
值 | 描述 |
h-shadow | 必须。水平阴影的位置。允许负值。 |
v-shadow | 必须。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
注意:
默认的是外部阴影(outset),但是不可以写这个单词,否则导致阴影无效。
盒子阴影不占用空间,不会影响其他盒子排列。
四、文字阴影
在CSS3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow : h-shadow v-shadow blur color;
值 | 描述 |
h-shadow | 必须。水平阴影的位置。允许负值。 |
v-shadow | 必须。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
知识点来源:
【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程】 https://www.bilibili.com/video/BV14J4114768/?p=169&share_source=copy_web&vd_source=9bce191eb50f06ae83cb422d8b7f8f31
P161-P168