使用html记笔记,开始学习HTML,并记下笔记

开始学习HTML,并记下笔记。

外边距(不影响可见框大小，影像盒子位置)

margin-top(上)

right(右)

bottom(下)

left(左)

“外边距也可以为一个负值，元素会反方向移动”

margin还可以设置为auto，auto一般只设置给水平方向的margin.

如果只指定，左边距或右边距的margin为auto则会将外边距设置为最大值

如果两侧同时设置，则两侧的外边距会设置为相同的值。

就可以使元素自动在父元素中居中，所以通常左右同事设置auto,以使子元素在父元素中水平居中。

(垂直方向设置auto，则外边距默认就是0)

margin-left:auto;

垂直外边距的重叠

在网页中相邻的垂直方向的外边距会发生外边距的重叠(指兄弟元素之间的相邻外边距会取最大值而不是取和)

！可在两个元素间加一个a而使他们外边距相加

如果父子元素的垂直边距相邻了，则子元素的外边距会设置给父元素。(可在两个元素间加一个a而使他们外边距相加“不建议使用”)

！可谓子元素设置一个上边框:设置Padding-top:1px;

!可谓父元素设置一个上边距Padding-top:100px;(将父元素的高降低100px)

浏览器默认样式

浏览器为了在页面没有样式时，也可以有一个比较好的显示效果，

所以为很多元素都设置了一些默认的margin和padding，(不需要使用，通常都会去掉浏览器的默认样式)

“标签名”{

margin：0；

}(过于麻烦)

*{

margin:0;

padding:0;

} (清除浏览器默认样式)

内联元素的盒模型

内容区：内联元素不能设置width和hight

水平方向内边距：内联元素可以设置水平方向内边距

垂直方向内边距：内联元素可以设置垂直方向内边距，但是不会影响布局。

边框：可以设置边框，但是垂直边框不会影响布局，水平会。

水平外边距：支持水平方向外边距，且不会重叠而是求和。

垂直外边距：不支持。

display和visibility

一个连接(内联元素不支持宽和高)

但是可以讲一个内联元素变成块元素，通过display样式可以修改元素的类型。

display

可选值：

inline：可以将一个元素作为内联元素显示

block：可以将一个元素设置为块元素显示

inline-block：将一个元素转换为行内块元素(既可以设置宽高也不会独占一行)

none：不显示元素并且元素不会在页面继续占有位置

visibility(可以用来设置元素显示和隐藏的状态)

可选值：

Visible：默认值

Hidden：元素会隐藏不显示，但是它的位置会依然保持

overflow

{子元素默认是存在于父元素的内容区中，理论上子元素的大小最大等于父元素内容区的大小，如果子元素的设置的大小超过了父元素的内容区,则超出的部分会在父元素以外的地方显示，及溢出的内容，}

通过overflow可以设置父元素如何处理溢出的内容。

可选值：

visible：默认值

hidden：溢出的部分会被修剪，不显示

scroll：会为父元素添加滚动条，通过拖动滚动条来查看完整的内容，而且不论内容是否溢出，都会添加水平和垂直双方向的滚动条。

auto：会根据需求自动添加滚动条(水平或垂直或无)

文档流

文档流处在网页的最底层 ，它表示的是一个页面中的位置。我们所创建默认都处在文档流中

元素在文档流中的特点

块元素

1.块元素在文档流中会独占一行，块元素会自上而下排列。

2.块元素在文档流中默认宽度是父元素的100%

3.块元素在文档流中高度默认被内子元素(内容 )撑开

内联元素

1.内联元素在文档流中只占自身大小，会默认自左向右排列，如果一行中不足以容纳所有的内联元素，则会换到下一行。继续自左向右

2.前提在文档流中，内联元素的宽度和高度默认被内子元素(内容 )撑开

【“width和hight的默认值为auto”当元素的高和宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距。】