个人学习前端基础知识笔记整理

1、元素分类

块级标签block	html,body,div,h1-h6,p,ul,ol,li,dl,dt,dd,hr,form 块级标签特性：默认占据整行
行内标签 inline	span,a,b,strong,i,em,u,ins,s,del 行内标签特性：默认大小由内部元素撑开，不支持设置宽高，可以使用行高的方式来扩充高度（小技巧）
行内块标签 inline-block	img 行内标签特性:默认大小由内部元素撑开，支持设置宽高

*行内块元素和行内元素横向布局的问题：

行内块布局问题：

1. 代码换行会有默认间距；
2. 行内块是沿基线对齐（底对齐）；
3. 当给元素设置垂直方向的内外边距时，会影响周围的元素；

行内元素布局问题：

1. 代码换行会有默认间距；
2. 行内块是沿基线对齐（底对齐）；
3. 当给元素设置垂直方向的内外边距时，由于受基线对齐的限制，垂直方向的内外边距是不起作用的。

2、定位（position）

相对定位	relative，相对于自己在文档流中的位置进行定位
绝对定位	absolute,相对于最近的、含有relative的祖先元素进行定位，没有的话，默认为body标签的第一屏
固定定位	fixed，相对于浏览器的窗口进行定位 用法参考 position：fixed固定定位的用法_从此以后叫元哥的博客-CSDN博客

偏移量: top(优先级大于bottom) bottom left(优先级大于right) right

定位的层级：z-index

        当层级相同时，后写的标签会压在先写标签的上面，当层级不同时，谁的层级高，谁就在上面，z-index取值范围为整数，默认层级是0，当层级为负数时，低于标准流元素；

        当层级不同时，高层级标签及子元素，都会压在低层级标签及子元素的上面，父元素的层级决定子元素层级的高低；

Q:绝对定位的水平垂直居中设置（此设置也适用于fixed）

 

3、浮动

浮动：float ，分为左浮动和右浮动，浮动会让元素脱落普通文档流，其元素本身的特性会消失。

浮动横向布局：没有代码换行的间距，设置自身内外（垂直）边距不会影响周围的元素；

浮动造成的影响：

Q：当子元素是浮动时，父元素没有设置固定高度，由于子元素是飘起来的状态，父元素会认为内有内容撑开自身的高度，此时造成高度塌陷，父元素高度为0；

A：解决方案：

1. 给父元素设置overfolw 属性
2. 额外标签法
3. 父元素调用chearFix类名
4. 给父元素设置浮动（此方法只适用于父元素也需要设置浮动的时候）

 /* 伪元素清除浮动 */
.clearFix::after{
    content:'';
    display:block;
    height: 0;
    clear: both;
}

左浮动：元素按书写顺序从左到右依次排开；

右浮动：元素按书写顺序从右到左依次排开；

注意：当子元素设置浮动后，高度超出父元素时，会影响到下面父元素中的浮动；

Q：定位下拉菜单：

A：

 

4、网页版心

在pc端,由于分辨率和屏幕较大,通常网页的版心是一个固定宽度且水平居中的,

通常在1100-1300之间