关注我 么么哒

【前端】笔记---CSS篇(1)

  • 作者:smile
  • 学无止境
  • 时间:Sat May 23 2020 16:04:00 GMT+0800 (China Standard Time)
  • 65人已阅读
简介 ife复习笔记

1.什么是 CSS ? CSS有什么用?

css 是层叠样式表,用于改变网页的布局。例如字体,颜色,大小,间距等

2. CSS语法

选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

css 声明包括:选择器和属性组(属性名:属性值)

3. CSS 是如何工作的?

  1. 浏览器加载HTML
  2. 将HTML转换为DOM
  3. 浏览器将获取HTML文档链接的大多数资源,例如嵌入式图像和视频...以及链接的CSS
  4. 浏览器解析提取的CSS,并根据选择器类型将不同的规则分类为不同的“存储桶”,例如元素,类,ID等。根据找到的选择器,它确定应将哪些规则应用于DOM中的哪些节点,并根据需要向其附加样式(此中间步骤称为渲染树)。
  5. 将渲染树放置在规则应用到其后应出现的结构中
  6. 页面的视觉显示在屏幕上显示(此阶段称为绘画)

4. CSS 如何使用

CSS应用于文档的三种方法:使用外部样式表,内部样式表和内联样式。

5. CSS 选择器

CSS选择器是CSS规则的第一部分。它是元素和其他术语的一种模式,它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。

 

选择器类型:

  1. id  #id
  2. class  .class
  3. 标签  p
  4. 通用  *
  5. 属性  [属性名="属性值"]
  6. 伪类  :hover
  7. 伪元素  ::first-line
  8. 子选择器、相邻选择器

 

选择器权重:

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为0100。

第三等:代表类,伪类和属性选择器,如.content,权值为0010。

第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值。

6.什么是 CSS 盒子模型

完整的CSS盒模型适用于块盒,内联盒仅使用盒模型中定义的某些行为。该模型定义了框的不同部分(边距,边框,填充和内容)如何共同创建一个可以在页面上看到的框。

盒子组成:

  • 内容框 content
  • 填充框 padding
  • 边框   border
  • 边距框 margin

标准盒子模型: 实际宽/高 = width/height + padding + border

IE盒子模型: 实际宽/高 = width/height

7. CSS 浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

 

元素浮动的特性:

  1. 浮动的元素脱离了标准文档流,摆脱块级元素和行内元素的限制
  2. 浮动的元素存在相互贴靠的效果,当宽度不够的时候,会出现自动换行
  3. 浮动的元素虽然脱离了标准文档流,但是没有脱离文本流,可以出现被字包围的效果
  4. 浮动之后的元素会存在收缩的效果,当一个块级元素没有设置宽度的时,当块级元素浮动之后,就会失去高度
  5. 当父元素不设置高度的时候,多个子元素的高度和撑起了父元素的高度;当设置浮动后,子元素最高的高度撑起了父元素的高度。
  6. 浮动元素能挡住盒子,但挡不住盒子里面的文字

 

浮动的弊端:

  • 导致高度塌陷,当子元素同时设置浮动后,父元素失去支撑,父元素的高度消失,缩成一条线。

解决办法:在父元素失去高度,发生塌陷之后,可以给父元素添加高度或者设置overflow:hidden的方法进行解决高度塌陷的问题。

  • 页面结构的不稳定性,子元素浮动,导致标准文档流出现空白区域。

解决办法:clear:both; 去进行解决,这也是称之为隔墙法。

 

清除浮动:

1. 父级添加overflow: hidden;

   子元素浮动了,会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响。

2. 通过属性clear:both;达到清除浮动的目的;

   元素浮动后,只需要在浮动元素添加多一个块级元素,并添加clear: both;属性,便可以达到清除浮动的目的。

3. 通过给父级元素添加伪类after,达到清除浮动的目的;

   这种方式也是使用clear: both;的方式达到效果,只是变相的使用了伪类after,使得页面结构更简洁,也是常用的清理浮动的方式。

4. 给父级元素加高度(不推荐使用,它只适合高度固定的布局,一般父盒子都是为由内容撑起来)

5. 给父级元素添加overflow:auto(缺点:内部宽高超过父级div时,会出现滚动条,不推荐)

6. 给父级元素添加浮动(缺点:会产生新的浮动问题,不推荐)

7. 给父级元素添加display:table;(不推荐)

 

文章评论