课堂随记
包裹为一部分
效果上没有特殊的效果,但是可以包裹文字进行更改样式
<div style='width: 400px;height:500px;background-color:pink;' align='center'>
<img src="./a.jpg" alt="tip">
<p>
小米全面屏电视65英寸 E65X
</p>
<p>
<span style='color:orange;'>3099元</span>
<s style='color: gray'>3299元</s>
</p>
</div>
padding改变多少像素相应得盒子长高应该减少同样像素。
<div style='width: 320px;height: 312px;background-color:rgb(250, 250, 250); margin: 0 auto;padding: 30px;' align='center'>
<img src="./2_03.png" alt="">
<h2>在线课程</h2>
<P style="color: gray;" align='left'>涵盖云,AI,大数据,loT等领域轻松又高效的知识学习</P>
</div>
以上代码盒子长度本来为350像素,高度为342像素,因为padding导致的宽高各减去三十,才能保证原有的图形大小,且有合理的内边距。
PS应用
切片,截图工具里
抠图,魔术橡皮擦
span标签
span 标签用来定义文本内容,可以是单独的一句话,一些内容,也可以是段落里面的内容。如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的,所以它极大的提高了我们可以对文本内容自定义样式的需求。
span标签的特点:
- 不独占一行,可以和其他元素排列在一起
- span标签不支持align属性
- span不能设置宽度和高度
- 支持左右的padding,上下尽量不要去使用。
- span标签设置背景时,字的宽度就是span的宽度
- span标签可以嵌套在div或者p等标签内(行内元素可以嵌套在块级元素里)
div标签
div 标签,称为盒子。作用是设定内容的摆放位置。div 标签可以把文档分割为独立的、不同的部分。div 就相当于一个区域,我们把我们网页内容的都放在这个区域里面。
div的特点:
- 独占一行
- 支持align属性
- 可以设置宽度和高度
- 支持padding和margin
- div 没有任何的默认样式,所以它不会像 P 标签和 H 标签一样,有上下间距
- div 标签里面可以嵌套其他任意标签。
- 我们可以给某些单独的标签外层包裹一个 div,比如 img 标签,a 标签,这样方便我们后续为其设置样式。
单词总结
width:宽
height:高
padding:内边距
margin:外边距