前言:
今天学习Html的第八天,今天的学习内容是盒子模型的剩下内容。
内联元素的盒子:
默认样式:
览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding,
而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
方式一:
1:清除浏览器的默认样式
方式二:
2:引入重置样式表
盒子大小:
默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定
设置width,height特指内容区的宽高
box-sizing 用来设置盒子尺寸的计算方式 用来规定width,height指的谁
可选值:
content-box width,height指的是内容区宽高,默认值
border-box width,height指的就是内容区,内边距,边框加起来的大小。
阴影和圆角:
box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右
第二个值:垂直偏移量 正->下 负->上
第三个值:模糊半径
第四个值:颜色
知识点2:
1、border-radius 用来设置圆角
2、单独设置某一角的圆角
3、设置圆形