html+css常用知识点整理

html-css026

html+css常用知识点整理,第1张

特点:自动成一行,宽度为100%,可设置宽高。

常用块级元素:

常用行内元素:

class="定义样式名称"

id="定义样式名称"

href="超链接地址"

name="用锚定义一个标签",通过href链接跳到指定的标签

src="图片的地址"

title="鼠标移上去显示的提示文字"

alt="当图片不显示时,显示的文字"

sytle="书写css样式"

type="定义input类型"

指元素的外边距、边框、内边距,内容大小

文本对齐

float元素对齐/* */

html和css的元素、属性、样式有很多,这里这里只罗列了一些经常用到的知识点,更详细的可以查看参考文档。

直观点讲就是用外边距把box撑成居中。

margin也可以用顺时针的方式以一个语句定义四个外边距的大小

margin有一个auto属性用来设置浏览器边距,只能用在宽度上,不能用在高度上。

可以看到现在box实现了水平居中。

margin和padding一样可以简写。

margin负值可以让边框与浏览器合并。

margin为0的时候,box与浏览器还是有一段距离的,并没有完全贴边。

而想要贴边的话,可以给body单独一个标签选择器,令其margin=0,再让box类的margin-left=0.

以margin-left为例,给正值,box就向右边走,而给负值的话,box就向左侧走。我们管正值叫正方向,负值叫反方向。

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一个小练习 :制作下面的菜单效果:

效果:

发现中间的线似乎粗了点,这个问题是上一个格子的底边和下一个格子的顶边重合导致的。

这时候就要应用到margin的负值了,在选择器中加入下面这条语句

外边距合并指的是,当两个垂直外边距相遇时,长的外边距会将短的外边距替换。

一个例子:

建立两个盒子之后,我们想设置margin好让两个盒子分开。

我们想让两个盒子分开的更大一点,于是调整第二个盒子的顶部外边距

解决方法如下: