阶段1 day 02 课堂随记

课堂随记

包裹为一部分

效果上没有特殊的效果，但是可以包裹文字进行更改样式

<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：外边距