记录自己的html与css之路：

淩亂°似流年 2022-08-21 15:59 127阅读 0赞

1：昨天弄明白了margin 以及padding的一些之前模糊的概念。

(1.1)  比如我们在计算盒子大小师经常忽略了padding的计算 导致最后盒子会变大。自己之前从未考虑过增加padding 后盒子会变厚的特点。自己给盒子随意增加padding 值。今后在设计盒子时需要考虑增加padding后，要对他进行减去。

比如一个盒子大小：宽为300px,高为200px;给内部增加padding后需要进行减去，如给其增加10px；宽高则变为280px 和180px.

(1.2)在使用margin属性时需要考虑两个问题， 一个是margin对内以及对外的问题。当两个盒子都有上下外边距：比如盒子1 margin-bottom：10px      盒子2margin-top: 10px  **他们两个会重叠为一个margin**  另一个是 两个盒子其中一个包含另外一个。比如盒子1 包含盒子2      给盒子2一个margin-top：10px   **盒子1会向下移动 但是盒子2 不会**。 解决这个问题就是给盒子1增加pading值 但是相应的盒子大小就要进行变化，同上

(1.3)另外margin 在盒子的居中上有一定的好处。比如margin-left:auto;代表盒子右边的东西全会填充到盒子的左边，也就是盒子最后会跑的右边去。margin:0 auto;代表盒子居中。

2: 昨天还明白了line-height的作用。

当我们在设置行高后 它其中的字体会自动居中。也可以在将行高设置的与盒子一样高 然后文本会一直居中。这个代表的是上下居中。与之相对应的则是左右居中，它的编码是text-align：center;将文本进行左右居中。（过会试试它是否适用于行内标签）

3：自己突然想到border的特性。

将border上下左右加上颜色可以做个圆角出来

4：text-indent:文本缩进        text-decoration:划线

text-indent:它分为两种 一种后边加像素 实际缩进不好计算    还有一种后边加em  1em（一个字）  2em（两个字）

text-decoration：划线  它分为上划线及下划线 以及删除线。

text-decoration:underline 它代表下划线

text-decoration:overline   它代表上划线

text-decoration:line-through 它代表贯穿线

5：font系列问题：

其必须按照font： font-style;font-weight；font-size;line-height;font family;顺序排列

文本斜体 文本加粗    文字大小 行高        字体样式

color是为字体加颜色

6：主要讲a 标签：

<a href="http://www.baidu.com/">这是一个去往百度的链接</a> 以前对a 标签的理解仅仅局限在它可以去往另一个页面，今天了解到了，它还可以在里边放入文件，然后提供下载。当然它还附加了一些其他的属性，<a>标签本身是在当前页面进行跳转。而 **target="\_blank"** 表示从新建一个页面。 ** 如果页面链接多，则可以在head中设置属性 如(base  target="\_blank"/)它是一个可以掌控所有链接的属性，并且还表示全部创建一个新的页面。**target\_self 它表示在当前页面跳转，如果其中需要某一个链接只在当前页面跳转，那可以在其后边加这个属性。

7:今天复习到了列表：

有序 无序不在讲：无序列表至今不会讲原点去掉。。

只讲下定义列表

<dt>定义列表标题</dt>

<dd>定义列表项</dd>

</dl>

8：SEO搜索引擎优化：