【CSS】前端学习DAY6知识点小结

默认样式

默认样式的存在会影响页面布局，在编写网页时通常会去掉浏览器的默认样式（pc断的页面）
外部引入重置样式表
reset.css直接去除浏览器的默认样式
normalize.css对默认样式进行统一

盒子的尺寸

box-sizing 用来设置盒子尺寸的计算方式
可选值
content-box宽度和高度用来设置内容框的大小
border-box宽度和高度用来设置整个可见框的大小

轮廓和圆角

1.outline

用来设置元素的轮廓线，用法和border一样
轮廓不会影响到可见框的大小

2. box-shadow

用来设置元素阴影效果，阴影不会影响页面布局
box-shadow:10px 10px 50px rgba(0,0, 0, 0.3);
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色，rgba

3.border-radius

用来设置圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
第一个值：x方向半径
第二个值：y方向半径
border-radius
分别用来设置四个方向圆角的大小
border-radius：10px,20px,30px,40px
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
将元素设置成圆形border-radius：50%