html、css知识点整理

目录

1.元素的显示模式

1.1 分类

1.2 各类元素的特点

1.3 元素之间的相互转换

1.4 行内元素高度不一致时如何实现高度对齐?

2.css三大特性及权重

2.1 css三大特性

2.2 权重

3.盒模型

4.BFC --- 参考https://blog.csdn.net/sinat_36422236/article/details/88763187

4.1 概念

4.2 触发BFC的条件

4.3 BFC的布局规则

4.4 BFC的应用场景

4.5 补充

5.浮动

5.1 概念: 

5.2 清除浮动

6.定位

6.1 概念

6.2 定位组成

6.3 定位模式(position)有哪些值,分别有什么作用?

6.4 补充:垂直水平居中有哪些方法?

---

1.元素的显示模式

1.1 分类

1.行内元素: 例如 span a b i em strong i ins u del s label......

2.行内块元素: 例如 img input textarea td button......

3.块级元素: 例如 div h1 p ul li dl dt dd form......

1.2 各类元素的特点

1.块级元素:

        1)宽度: 如果设置则为给定宽度,如果不设置就是父元素的100% --- 无论是否设置块元素都独占一整行

        2)高度: 如果设置则为给定高度,如果不设置则由内容撑开

        3)内外边距: 可设置四周的内外边距

        4)可以包含任何元素 --- p h1-h6里不可以放块元素

2.行内元素:

        1)宽度: 不可设置, 默认宽度是内容宽度, 一行内可显示多个

        2)高度: 不可设置, 高度由内容撑开

        3)内外边距: 只能设置水平方向上的内外边距,

        4)只能包含行内标签 --- a里可以放块元素,但最好还是把a转换成块元素, a里不能放a

3.行内块元素: 

        1)宽度:如果设置则为给定宽度, 如果不设置默认为内容宽度 --- 一行内可显示多个

        2)高度:如果设置则为给定高度,如果不设置则为默认高度(例input)或内容撑开

        3)内外边距: 可设置四周的内外边距

        4)可以包含任何标签

1.3 元素之间的相互转换

转换为

        1.行内元素: display: inline;

        2.行内块元素: display: inline-block;

        3.块级元素: display: block;

1.4 行内元素高度不一致时如何实现高度对齐?

1. 子绝父相,调整定位的值 --- 不推荐

2. display: inline-block; + vertical-align

3. flex + align-items

2.css三大特性及权重

2.1 css三大特性

1.层叠性

2.继承性       拥有继承性的属性 text- font- line- 以及color

3.优先级(同一个元素指定多个选择器时)       

        1)选择器相同,则执行层叠性 

        2)选择器不同,则根据选择器权重执行

2.2 权重

优先级是由A、B、C、D四个值来决定的

A = {如果存在内联样式则为1,否则为0}

B = {ID选择器出现的次数}

C = {类选择器、属性选择器、伪类选择器出现的总次数}

D = {标签选择器、伪元素选择器出现的总次数}   

!important > 行内 > id >类选择器 >标签选择器 > 通配符 > 浏览器默认样式 > 继承   

3.盒模型

盒模型包括标准盒模型和怪异(IE)盒模型

        1.标准盒模型: 盒模型的范围包括 margin border padding content   并且   content部分不包括其它部分

        2.IE盒模型: 盒模型的范围包括margin border padding content   并且   content部分包含border和padding

4.BFC --- 参考https://blog.csdn.net/sinat_36422236/article/details/88763187

4.1 概念

         1) BFC:块级格式化上下文, 如果拥有BFC的特性,就会导致内容元素在怎么样, 都不会影响外面元素(它是一个独立的渲染区域,只有块级盒子参与,它规定了内部块级盒子如何布局,并且与这个区域外部毫不相干)

        2)Formatting Content: 渲染区域,在BFC参考网址中

        3)包含块: 参考https://blog.csdn.net/hangxingkong/article/details/54894642

4.2 触发BFC的条件

        1)HTML根元素

        2)position的值为absolute或fixed

        3)float的值不为none

        4)overflow的值不为visible

        5)display值为inline-block、table-cell或table-caption

4.3 BFC的布局规则

1.内部的Box会在垂直方向,一个接一个地放置

2.Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 --- 没理解

4.BFC的区域不会与float box重叠。

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时，浮动元素也参与计算。

4.4 BFC的应用场景

1.解决margin垂直塌陷的问题

2.实现自适应布局防止元素被浮动元素覆盖

3.清除浮动

4.5 补充

1.margin塌陷

1)概念: 在垂直方向如果两个块元素的外边距相遇,浏览器在加载时会将其解析为两个外边距中的较大者,而非两外边距之和

2)解决方案: 

①同级元素塌陷(上下相邻的两个块元素) --- 尽量只给一个盒子添加外边距

②父子元素塌陷(两个嵌套关系的块元素) 

·给父元素设置border-top/border        不推荐,因为会改变结构

·给父元素设置padding-top

·为父盒子创建合适的BFC

2.自适应布局/圣杯布局/双飞翼布局

1)利用定位实现两侧固定中间自适应

        ①给父盒子设置左右padding值(也可以给子盒子设定左右margin值)

        ②左右盒子设置固定宽高,然后分别定位到父盒子左右两侧

        ③中间盒子自适应(只给高度,或者让其下的子盒子撑起高度即可)

2)利用flex布局实现两侧固定中间自适应

        ①父盒子设置display: flex;

        ②左右盒子设置固定宽高

        ③中间盒子设置flex: 1;

3)利用bfc块级格式化上下文,实现两侧固定中间自适应

        ①左右固定宽高,进行浮动

        ②中间不设置宽度并且设置overflow: hidden;(注意: left和right必须放在center前面)

5.浮动

5.1 概念: 

        ①常规流: 页面上从左往右, 从上到下排列的元素流,就是常规流

        ②包含块: 一个元素离它最近的块级元素

        ③浮动: 用于创建一个浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘,浮动元素是同时处于常规流流内和流外的元素,其中块级元素认为浮动元素不存在,而浮动元素会影响行内元素的布局,浮动元素会通过影响行内元素间接影响了包含块的布局

5.2 清除浮动

1.为什么要清除

        浮动元素并不能撑起包含块(子元素无全部浮动,则父元素高度由未浮动子元素撑起;子元素全部浮动,即无未浮动子元素,父元素高度为0),此时需要清除浮动 --- 此时清除的是浮动致使父元素无高度的问题

2.清除浮动的策略

        闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的盒子

3.clear属性(规定元素哪一侧不允许有浮动元素)

        取值: left right both none(默认值)

        原理: 在元素上外边距之上增加清除空间,比如清除左浮动会让元素的上外边距刚好在左边浮动元素的下外边距之下

4.清除浮动的方法

        1)额外标签法(隔墙法): 在最后一个浮动的子元素后面添加一个空的标签,并加上style= "clear: both"的属性 --- 是W3C推荐的做法,实际工作中可能会遇到,但是不常用(添加许多无意义的标签,结构化较差)

        2)父元素创建合适BFC.例如:添加overflow: hidden

        3):after伪元素法:

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { /* IE6、7专有 */
    *zoom: 1;
}

        4)双伪元素法:

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

6.定位

6.1 概念

定位是将盒子定在某一个位置,可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其它盒子.

6.2 定位组成

定位由  定位模式(用于指定一个元素在文档中的定位方式) + 边偏移(定义元素相对于参考元素某一边线的位置) 组成,并由它们决定了该元素的最终位置

6.3 定位模式(position)有哪些值,分别有什么作用?

static:静态定位,top、right、left、bottom以及z-index都无效

relative:相对定位,这个相对是指相对于正常文档流的位置.左右margin为auto仍有效,并且不会脱离文档流仍占据原来位置,

absolute:绝对定位,会脱标,不占据位置,左右margin为auto失效,当前元素相对于最近的非static定位的祖先元素来确定自己的偏移位置,如果没有非static定位的祖先元素,那么就根据浏览器窗口来确定偏移位置.

fixed:固定定位,当前元素相对于视口来确定自己的位置.并且当屏幕滚动时,当前元素位置也不会发生改变 .

sticky:粘性定位,这个定位方式有点像relative和fiexd的结合,当它的父元素在视口区域、并进入top给定的范围内之时,当前元素就以fixed的方式进行定位,否则就以relative的方式定位.

6.4 补充:垂直水平居中有哪些方法?

1,元素水平垂直居中有哪些方法

思路1:利用display :flex;

给父盒子设置display :flex; justify-content: center; align-items: center;即可实现

思路2:使用定位

子绝父相,然后设置top值为50%,left值为50%,最后利用margin值向左向上移动自身一半(知道子盒子宽度的前提下,如果不知道子盒子自身宽度,可以配合transform: translate(-50%,-50%))

思路3:利用margin:auto(目前为止用的少)

子绝父相,然后给子盒子设置上下左右为0,margin:auto;即可实现

思路4:利用display: table-cell;(目前为止用的少)

给父元素设置display: table-cell;vertical-align: middle; text-algin: center;给子盒子设置display: inline-block;即可实现

思路5:使用margin(不推荐,还得计算位置)

计算父盒子居中的位置,给子盒子设置margin值来实现

2.元素水平居中有哪些方法

3..元素垂直居中有哪些方法