Front-end HTML&CSS study notes 6 (based on Shang Silicon Valley teaching video)

Fifty-one episodes (box model-margin)

1.不会影响可见框大小，而会影响盒子的位置
2.由于盒子默认靠左摆放，则设置上左，会改变盒子位置，若设置下右会改变其他
3.外边距也可以是负值，会使元素向反方向移动

4.margin也可以设置为auto，
如果指定左右外边距为auto，则会默认为最大值；
如果指定水平方向上的外边距为auto，则默认为0px；
如果将左右同时设置为auto，可以使子元素在父元素中水平居中；

5.外边距简写：可以同时设置上下左右外边距
注：可以指定 四个值（顺时针），三个值（上，左右，下），两个值（上下，左右），一个值（都一样）

Episode fifty-two (overlap of vertical margins)

1.垂直外边距的重叠
所谓垂直外边距的重叠，即指兄弟元素之间的相邻外边距回取最大值而不是求和

2.如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

3.解决垂直外边距的重叠问题

Episode fifty-three (browser default style)

1.浏览器中默认给很多元素设置了margin 和padding，可以清除
2.可以使用通配选择器清除，例如：
*{
margin:0px;
parding:0px;
}

Episode fifty-four (box model for inline elements)

1.内联元素不能设置width、height，
2.内联元素可以设置水平方向的内边距，
3.内联元素可以设置垂直方向的内边距，但是不会影响页面布局
4.内联元素可以设置边框，但垂直方向的边框不会影响页面布局
5.水平方向相邻外边距不会重叠，而会相加
6.内联元素不支持垂直外边距

Episode fifty-five (display and visibility)

1.将内联元素转化为块元素，可以通过display样式修改元素类型
可选值：
	none：不显示元素，且不在页面中占位置
	inline：可以将一个元素设置为内联元素显示
	block：可以将一个元素设置为块元素显示
	inline-block：可以将一个元素设置为行内块元素显示，使其既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行

2.visibility可以用来设置元素的隐藏和显示状态
可选值：
	visible：默认值，元素会显示
	hidden：隐藏元素，但是依旧占据着原先在页面中的位置（与前面的none相比较区别）

Fifty-six episodes (overflow)

1.子元素默认存在父元素的内容区中，如果子元素的大小超过了内容区，则超出的大小会在内容区以外显示
2.超出的内容称之为溢出内容，父元素默认将超出内容在父元素以外显示
3.通过overflow可以设置父元素如何处理溢出内容
4.可选值：
	visible：不做处理，父元素默认将超出内容在父元素以外显示
	hidden：修剪溢出内容，不会显示
	scroll：为父元素添加滚动条，无论元素是否溢出都会为水平和垂直方向添加滚动条
	auto：自动按照需求添加滚动条

Episode fifty-seven (document flow)

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

2.元素在文档流中的特点
块元素：
	a.在文档流中会独占一行
	b.宽度默认是父元素的100%,但默认值是auto
	c.高度默认内容撑开
	d.当元素值为auto时，此时指定内边距不会影响可见框大小，而是会自动修改宽度，以适应内边距
内联元素：
	a.在文档流中只占自身大小，一行占满后会自动换到下一行

Fifty-eight episodes (floating one)

1.如果希望块元素在页面中水平排列，可以使块元素脱离文档流
2.使用float使元素浮动，从而使块元素脱离文档流
3.可选值：
	none：默认值，元素在文档流中排列
	left：元素会脱离文档流，向页面左侧浮动
	right：元素会脱离文档流，向页面右侧浮动
4.元素设置浮动后，脱离文档流，之前在文档流中所占的位置会消失，文档流中其他元素将会顶替其原先位置
5.脱离文档流后的元素也有可能盖住文档流中的元素，浮动的意思，想象一下
6.若浮动元素上面是一个没有浮动的元素，则浮动元素不会超过块元素
7.浮动元素也不会超过其上边的兄弟元素，最多和其兄弟元素一样齐

Episode fifty-nine (floating two)

1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以利用上条特性来设置文字环绕图片的效果
2.当元素设置浮动后，会完全脱离文档流，若是块元素，浮动后宽度和高度都被内容撑开
3.若是内联元素，会变成块元素

Sixty episodes (simple layout)

1.盒子套盒子，一般先要清除默认样式
2.设置居中：margin:0 auto;

Front-end HTML&CSS study notes 6 (based on Shang Silicon Valley teaching video)

Guess you like