前端学习总结（html+css)

1,html和css

什么是html:HyperTextMarket language，超文本标记语言,是用来描述网页语言，html使用标记标签来描述网页，html不是编程语言，是

css可以理解为一层一层的样式，并且是可以重叠覆盖的，通过改变样式，从而改变显示出来的效果。

添加css有三种方式：

1、内联;写在便签的内部

2、内嵌;写在head标签的内部

3、外部引用;还是写在head标签中，不过是通过link标签将外部的样式引入到html中

一种标记语言。

2，难点总结

1，高度塌陷问题。

一、什么是高度塌陷？

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

1）高度塌陷的解决方法

1，给父元素设置高度（不推荐，子元素过多时不方便）

2，开启BFC(开启BFC的方法)

3，在父元素结尾添加一个空的div,因为这个空的div并没有浮动，可将父元素内容撑开，但会导致页面结构增加

4，使用after伪类解决高度塌陷

.box1::after{

content:''; ——内容不显示，无内容显示

display:block; ——after元素是一个行内元素，将它显示为一个块元素

clear:

2开启BFC

BFC(间接 开启，或多或少会有一些不好的影响)BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区

开启BFC的方法：

1.设置父元素的浮动（不推荐用来开启BFC）例如： float:left;

2.将元素设置为行内块元素（不推荐用来开启BFC）例如： display:inline-block;

3.将元素的overflow设置为一个非visible的值 overflow:hidden;

常用的方式为元素设置overflow:hidden;开启其BFC,以使其可以包含住它的子元素

3.元素开启BFC后的特点

1.开启BFC 的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

1. 开启BFC的元素可以包含浮动的子元素

2,定位

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、绝对定位（absolute）

绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

3、相对定位（relative）

相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

4、固定定位（fixed）

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

5、绝对定位和相对定位

绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序 。