html基础知识4

盒模型：

垂直方向布局

mt + bt + pt + height + pb + bb + mb =父元素的高度

[if !supportLists]1) [endif]宽度是auto时，子元素会占满父元素  

父元素宽度auto,父元素宽度占整个屏幕。

子元素宽度为auto,子元素宽度与父元素一样

父子元素同时为auto,父子元素同时为屏幕宽度。         

2)高度是auto时，父元素的高度由其内容的高度决定                 

3)如果不为父元素指定高度，则父元素会自动适应子元素的高度，确保能容纳所有的子元素         

4)如果为父元素指定了高度，则指定多少就是多少， 此时如果子元素的大小超过了父元素，则会导致子元素从父元素中溢出。溢出的子元素不会影响到页面的布局

2、溢出        

使用overflow来设置溢出内容的处理方式

可选值：

visible，默认值 溢出内容不会被裁剪直接在父元素外部显示

hidden，溢出的内容会被裁剪，超过父元素的不会显示

scroll，生成滚动条，可以通过滚动条查看完整内容

auto，根据需要生成滚动条

3、外边距折叠

垂直方向、相邻的外边距会发生外边距折叠现象。

1）[endif]兄弟元素间的相邻外边距：

1> [endif]正值：取两个边界的最大值

2> [endif]负值：取绝对值较大的

3> [endif]一正一负：取两个值的和

2）[endif]父子元素间的相邻垂直外边距：

子元素的外边距会传递给父元素（给子元素设置外边距时，父元素也会跟着改变）

解决方法：伪元素：：before

4、文档流(标准流、常规流)   

文档流是网页中的一个位置，默认情况页面中的所有元素都在文档流中排列。

1> 块元素在文档流中的特点

1、自上向下进行排列（独占一行）

2、默认宽度和元素一样

3、默认高度被内容撑开

2> 行内元素在文档流中的特点

1、自左向右水平排列，如果一行中不足以容纳所有的元素则切换到下一行继续自作向右水平排列（和我们书写习惯一样）

2、默认高度和宽度都被内容撑开

5、行内元素的盒模型

1>内联元素不支持设置宽度和高度

2>内联元素可以设置padding，但是垂直方向的padding不会影响页面的布局

3>内联元素可以设置border， 但是垂直方向的border不会影响页面的布局

4>内联元素支持水平方向的外边距，不支持垂直方向的

5>水平方向相邻的外边距不会重叠，而是求和

6、display ：指定元素所生产的框的类型（把行内元素变成块元素、行内元素等）

可选值：

inline：行内元素

block：块元素

inline-block：行内块元素，既有行内元素的特点，不独占一行；又有块元素的特点，可以设置宽高

none：元素不在页面中显示

7、 visibility ：可以设置元素的显示的状态

可选值：

visible：默认值，元素正常显示

hidden：不显示元素，但是元素依然占据位置

8、默认样式

为了确保网页在没有样式的情况下，也可以浏览，所以浏览器都会为网页设置一些默认的样式，这些默认样式对于我们的开发来说是没有任何作用，并且不同的浏览器所设置的默认样式也是不同，所以开发中我们要做的第一件事往往就是去除调浏览器的默认样式。

[if !supportLists]1) [endif]* {

     Margin: 0;

     Padding:0;

}

[if !supportLists]2) [endif]文件（CSS文件)

9、块元素和行内元素

 1> 块元素(block)  :块元素用于页面的布局

[if !supportLists]2> [endif]行内元素(inline) :行内元素主要用于在页面中选中文字

[if !supportLists]3> [endif]一般情况下只会在块中去放内联元素，不会向内联元素放块元素

p元素中不能放任何的块元素

a元素里边什么都能放，除了它自己

 

******************

10、display 做隐藏的菜单栏

1>隐藏的元素与  hover 元素是 祖先与后代的关系

例：li为祖先（用 :hover） ,   .inner隐藏为后代