字体样式调用、布局原则、盒模型等

源代码为具体的内容

字体图标的引用:1.先在线调用JS

2.写样式

3.引用字体图标


HTML元素类型分为三种:块状元素-block,内联元素-inline,内联块状元素-inline-block常见的块状元素有:h1 ~ h6、p、div、ul、ol、li、dl、dt、dd、table、form、hr、pre等等。

常见的内联元素有:span,a,em,abbr,strong,big,button,br,em,label等。常见的内联块状元素有:img,input等。布局的原则默认布局排列都是从左到右,一行不够换行显示,有些块元素独占一行,其他元素都会换行显示。所有块状元素都可以定义自己的宽度和高度,任何元素默认就是内联元素:display:inline


盒模型常用属性:width,height,margin,border,padding

为了方便表现盒子模型的margin属性,绿色为修饰性边框

白色背景为外边距margin的尺寸黑色框为盒子的border属性,红色背景为内边距padding的尺寸

这里是盒模型的内容{盒模型常用的属性:盒子的宽度width,高度height,margin上下左右外边距50px,padding上下左右内边距50px,border边框10px}


图示: box-sizing的属性解决了什么问题?

用box-sizing属性解决了盒子大小的计算方式

盒子属性box-sizing演示,定义属性为border-box,宽和高都为300px后,无论内边距和边框尺寸设置多少,盒子的宽和高始终为300px,如果不定义box-sizing属性,整个盒子的宽度/高度为:width/height+padding+borer的尺寸,也就是恢复为盒子的默认属性:border-sizing:content-box;

图片演示:定义box-sizing:border-box;

屏幕截图 2021-07-11 231755.png

图片演示:未定义box-sizing:border-box;默认属性为box-sizing:content-box;

屏幕截图 2021-07-11 232216.png