记录自己的html与css之路：

最新推荐文章于 2026-04-22 02:29:47 发布

原创最新推荐文章于 2026-04-22 02:29:47 发布 · 335 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#自己的学习心得

前端专栏收录该内容

3 篇文章

订阅专栏

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搜索引擎优化：