一、默认样式:
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding,
而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
二、盒子大小
默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定
width/height 默认情况下,是盒模型的内容区的宽高
对box-sizing理解,它有几种状态?
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值:
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小,
包括边框,padding,内容区
解决元素抖动的问题
1、在元素本身上就设置好边框
2、可以甚至box-sizing
三、设置元素的阴影效果
box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右
第二个值:垂直偏移量 正->下 负->上
第三个值:模糊半径
第四个值:颜色 默认颜色是黑色
text-shadow
第一个值:水平偏移量 正->左 负->右
第二个值:垂直偏移量 正->下 负->上
第三个值:模糊半径
第四个值:颜色 默认颜色是字体的颜色
四、设置圆角
border-radius 用来设置圆角 以10px为半径画圆
borde-top-right-radius
border-top-left-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius: 50%; 设置圆形