CSS知识点总结

7,048 阅读12分钟

给自己时间,不要焦急,一步一步来,一日一日过,

请相信生命的韧性是惊人的,跟自己向上的心去合作,不要放弃对自己的爱护。

元素的显示与隐藏

display显示

使用disply隐藏之后,不再保留原来的位置,会被之后正常的文档流覆盖

display: none 隐藏对象

display:block 除了转换为块级元素之外,同时还有显示元素的意思。

visibility可见性

和display隐藏不同的是,使用可见性隐藏,元素仍然会保留原来的位置

visibility:visible ;  对象可视

visibility:hidden;    对象隐藏

overflow溢出

这是一个神奇的单词哈😄,很多地方都会用到它,之前提到的清除浮动也使用到了overflow

属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条

综合运用

核心代码github地址

HTML部分

CSS部分(很重要的思想转换,一定要记得

CSS用户界面样式

鼠标样式cursor
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
轮廓线

平时我们最直接的写法是 :outline: none,取消轮廓线。

 <input  type="text"  style="outline: none;"/>
防止文本域拖拽

平时使用文本域布局的时候,如果不设置任何属性,用户抗议自己修改文本域的大小,会影响页面的整体布局,这时我们就要注意了: 实际开发中,我们文本域右下角是不可以拖拽的 ❗

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素

特别是行内块元素, 通常用来控制图片/表单与文字的对齐

vertical-align : baseline |top |middle |bottom

对齐方式依次是:基线、顶线、中线、底线

溢出的文字省略号显示

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出

text-overflow : clip ;不显示省略标记(...),而是简单的裁切 

text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ;默认处理方式

white-space:nowrap ;&emsp;强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
省略号三部曲
  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

CSS精灵技术(sprite) 很重要

为什么需要sprites技术

👇图为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展示给用户,但是一个网页中往往会应用很多小的背景图作为修饰,当网页中的图像过多,服务器就会频繁的接收和发送请求,会降低页面的加载速度

特点:有效的减少服务器接收和发送请求的次数,提高页面的加载速度

精灵技术讲解

CSS精灵图实际上是将网页中的一些背景图整合到一张大图中,这样当用户访问该页面时,只需要向服务器发送一次请求,网页中的背景图像即可全部展示出来

需要使用到的CSS技术:background-image、background-repeat、background-position属性进行背景定位。

精灵技术使用的核心总结
  1. 精确测量,每个小背景图片的大小和位置。
  2. 给盒子指定小背景图片时, 背景定位基本都是负值。

CSS布局的三种机制

普通流

块级元素会独占一行,从上向下顺序排列;

 - 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;

 - 常用元素:span、a、i、em等
浮动

浮动最主要的价值是可以让多个块级元素在同一行内展示出来。

元素的浮动是指设置了浮动属性的元素会

  1. 脱离标准普通流的控制
  2. 移动到指定位置。

选择器 { float: 属性值; }

属性值 描述
none 元素不浮动(默认值
left 元素向浮动
right 元素向浮动

我们使用浮动的核心目的——让多个块级盒子在同一行显示。 这个也是我们最常见的一种布局方式

一个完整的网页,是 标准流 + 浮动 + 定位 一起完成的。

浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流,每个标准流单独占一行。

如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,避免引起其他的问题哈。

下面我们来看以下👇几种情况:

以下所说的div结构均为此:

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>

当a盒子浮动,b盒子也浮动的时候,a、b两盒子会显示在同一行。 当a盒子不浮动,b盒子浮动的时候,a盒子即是标准的文档流,是很霸道的哈,他会单独占据一行,所以b盒子会依照a盒子为参考,b盒子浮动。

清除浮动

我们为什么要清除浮动呢 ❓

父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,注意哦,浮动的盒子不占位置。最后父级盒子高度为0,就影响了下面的标准流盒子,下面的标准流盒子会覆盖原本想展示的内容。

  • 总结:
    • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
    • 准确地说,并不是清除浮动,而是清除浮动后造成的影响。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。

清除浮动的方法

如下图所示,若父元素nav盒子没有设置高度,子元素均设置浮动,则会导致子元素浮动在正常文档流之外,父元素的高度为:0,影响之后正常的文档流,所以此时我们会清除浮动。

以下👇所示的四种清除浮动的方式,均以此案例为参照

1.额外标签法(隔墙法)

注意此处说的浮动元素是指浮动的最后一个元素哈

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。

2.父级添加overflow属性方法

可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。

一般我们会在父级元素样式后加:overflow:hidden。

缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

3.使用after伪元素清除浮动

此方式虽然代码多一点,但是不会改变html的结构

:after相当于在结构后用css添加了一个新的标签。

/*声明清除浮动的样式 */
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom:1; /* ie6,7专门清除浮动的样式*/
}

4.使用双伪元素清除浮动 跟第三种方式差不多哈,在盒子的前后插入一个盒子

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

定位与塌陷(塌陷的解决方法)

之前我们有提到过,当给一个父元素内部的子元素设置margin值的时候,父级元素可能也会发生改变,即外边距合并就是通常所说的塌陷,但是绝对定位和浮动不会触发外边距合并👇:

什么是塌陷

为什么会出现塌陷呢,只有父子元素会出现塌陷吗,下面会进行详细的讲解,很重要的,一定要掌握理解,只有了解了原因才会自然的想起他的解决方式。

原因:在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),两个margin紧挨着,中间没有border或者padding,当两个margin直接接触,就产生了合并,即外边距合并,表现为较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin塌陷现象。

出现塌陷的对象

  1. 兄弟关系的盒子
  2. 父子关系的盒子
塌陷的解决方案

这里总结了一下七种解决方案,需要根据项目的要求,选择适合的解决方案即可

定位详解

语法:定位 = 定位模式 + 边偏移

边偏移

在 CSS 中,通过 topbottomleftright 属性定义元素的边偏移,简单的说就是上下左右四个方向名词😀

边偏移属性 示例 描述
top top: 80px 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量,定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。

定位模式

在CSS中,通过position的属性定义元素的定位模式,就是定位的分类,很重要的需要掌握的

选择器 { position: 属性值; }

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。

语义
static 静态定位(默认)
relative 相对定位
absolute 绝对定位
fixed 固定定位

相对定位(relative)很重要

相对定位是元素相对于他自己原来在标准流中的位置来移动的。

相对定位的特性:

  1. 相对于他自己原来在标准流中的位置来移动的。
  2. 定位的盒子原来在标准流中的区域继续占有,后面的盒子仍然以标准流的方式来对待他。

绝对定位(absolute)很重要

绝对定位是元素以带有定位的父级元素来移动的 绝对定位的特性:

  1. 完全不占任何位置
  2. 依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。
  3. 父元素如果没有定位,则以浏览器为标准定位

如👇图所示的,父级元素有一个相对定位模式,给子元素设置一个绝对定位,此时子盒子会以父级的左上角为标准点进行定位。

如下图所示,父级元素没有定位的时候,给子元素设置一个绝对定位,该子盒子就会以文档即浏览器为标准进行定位。注意这里的父级元素不仅指子元素的上一级父亲元素,会一级一级元素的向上找,如果父亲元素的上一级有定位,就以爷爷元素为准进行定位。

总结一下:将元素依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。

固定定位(fixed)很重要

固定定位是绝对定位的特殊形式

固定定位的特性:

  1. 完全不占有位置
  2. 只认浏览器的可视窗口,跟父级元素无任何关系,不随滚动条而滚动

绝对定位盒子居中对齐

绝对定位的盒子不能通过margin:0 auto水平居中。

这里有一个简单的计算公式让绝对定位的盒子水平居中,我们先让盒子左移50%,这时我们会发现,移动位置多了呀,多的长度是盒子的一般,那我们就需要减去盒子一半的长度,可以设置margin-left为负数,负数的值就等于盒子宽度的一半。

我们可以来实践一下: 给父级元素盒子设置一个position:relative,给需要居中的盒子设置绝对定位,left等于50%,margin-left等于-盒子宽度的一半。

绝对定位盒子垂直水平居中hin重要

👆上面主要是对绝对定位水平居中有一个详细的讲解,接下来通过一张图对绝对定位的的垂直水平居中,以及其他位置的居中进行详细的讲解:

我们先看这个图片,整个黑色边框是一个长800px,高度为400px的大盒子,示例盒子宽度为200px,高度为100px,上下两个盒子分别水平居中,左右两个盒子是垂直居中,和水平居中原理一致。

重点来啦,我们平时经常会用到的垂直水平居中,给盒子设置绝对定位后,设置:left:50%,top:50%,这时会发现盒子距离中间位置向右多偏移了宽度的一半,向下多偏移了高度的一半,所以也是需要减去的,给盒子来一个margin:-50px -100px;具体代码示例如下👇: