Web前端学习笔记——CSS部分

关于CSS

  1. CSS: 用于描述页面展示的语言。

  2. CSS规则=选择器+声明块
    例如:在这里插入图片描述

  3. 选择器: 选中元素,确定样式范围。

  4. 选择器类型:
    基础选择器:
    在这里插入图片描述

    复杂选择器:
    在这里插入图片描述

  5. 选择器权重值:
    在这里插入图片描述

  6. 声明冲突: 同一样式(同一属性不同值)多次应用到同一元素。

  7. 层叠: 解决声明冲突的过程,即浏览器自动处理(权重计算)。

  • 比较重要性(由高到低):
    作者样式表中的!important样式 > 作者样式表的普通样式 > 浏览器默认样式表中的样式 (作者样式表:开发者书写的样式)

  • 比较特殊性:
    总体规则:取决于选择器,选择器选中的范围越窄,越特殊。
    具体规则:通过选择器计算出一个4位数(xxxx)。
    在这里插入图片描述

  • 比较源次序:代码写的靠后的,越重要。

层叠的应用场景:

  • 重置样式表:书写一些作者样式,覆盖浏览器的默认样式。(先引用重置样式表,再引用作者样式表。)常见的重置样式表有:normalize.css、reset.css、meyer.css。
  • 爱恨法则:link > visited > hover > active
  1. 继承:子元素会继承父元素的某些CSS属性( 一般与文字内容相关的属性都能被继承。)
  2. CSS属性值的计算过程:一个元素从所有属性都没有值到所有的属性都有值的计算过程。
    一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行。
    渲染每个元素的前提条件:该元素的所有CSS属性必须有值。
    在这里插入图片描述
  • 确定声明值:参考(作者或者浏览器)样式表中没有冲突的声明,作为CSS属性值。
  • 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值。
  • 使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值。(inherit:强制继承,即将父元素的值取出并应用到子元素上;initial:初始值,将该属性设置为默认值。)
  • 使用默认值:对仍然没有值的属性,使用默认值。
  1. 盒模型: 规定单个盒子的规则。
    box:盒子,每个元素在页面中都会生成一个矩形区域。
    浏览器默认样式表设置的块盒:容器元素、h1~h6、p;
    常见的行盒:span、a、img、video、audio;
    盒子类型:

    • 行盒:display:inline的元素。
    • 块盒:display:block的元素。
      行盒在页面中不换行,块盒在页面中独占一行。
      (display的默认值为inline)

    盒子的组成部分:
    在这里插入图片描述
    内容(content):内容部分通常称为内容盒(content-box),通过width、height设置盒子内容的宽高。
    填充/内边距(padding):盒子边框到盒子内容的距离。
    填充区+内容区=填充盒(padding-box)
    (padding-top:上内边距;;padding-right:右内边距;padding-bottom:下内边距;padding-left:左内边距)
    边框(border):通过border-width、border-style、border-color设置边框宽度、边框样式、边框颜色。
    边框+填充区+内容区=边框盒(border-box)
    外边距(margin):边框到其它盒子的距离。

  2. 盒模型的应用:

  • 改变宽高范围:
    默认情况下,width、height设置的是内容盒宽高。
    而衡量设计稿尺寸时,往往使用的是边框盒,故需要通过以下其中一种方式进行设置
    方式一:精确计算出内容盒的实际宽高进行设置;
    方式二:通过CSS3的box-sizing属性进行设置;
  • 改变背景覆盖范围:
    默认情况下,背景覆盖边框盒,可通过background-clip进行修改覆盖范围。
  • 溢出处理:
    overflow:控制内容溢出边框盒后的处理方式。
  • 断词规则:
    word-break:影响文字在什么位置被截断换行。(可取的属性值有normal:普通,对于CJK字符,在文字位置截断,非CJK字符,在单词位置截断;break-all:截断所有,在所有位置截断;keep-all:保持所有,所有文本均在单词位置截断。)
  • 空白处理:
    white-space:nowrap(该种情况下元素会进行空白折叠但不会换行)
    white-space:normal(该种情况下元素会进行空白折叠)
    white-space:pre(该种情况下元素不会进行空白折叠)
    单行文本显示不完自动换行的处理方法:white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  1. 行盒的盒模型:
    特点:
    盒子沿着内容延申;
    行盒不能设置宽高(故若需要调整行盒的大小,应该使用字体大小、字体类型、行高);
    内边距(填充区):水平方向有效,垂直方向仅会影响背景,并不实际占据空间;
    边框:水平方向有效,垂直方向仅会影响背景,并不实际占据空间;
    外边距:水平方向有效,垂直方向仅会影响背景,并不实际占据空间;

  2. 行块盒的盒模型: display:inline-block的盒子
    特点:
    不独占一行;
    盒模型中所有尺寸都有效;

  3. 可替换元素: 少部分元素,页面上显示的结果取决于元素属性,CSS不能完全控制其样式。
    绝大部分可替换元素均为行盒;可替换元素类似于行块盒,盒模型中所有尺寸都有效。(object-fit:表示图片/音频/视频的适应方式)

  4. 非可替换元素: 大部分元素,页面上显示的结果取决于元素内容。

  5. 包含块(containing block): 每个盒子都有它的包含块,包含块决定了盒子的排列区域。(绝大部分情况下,盒子包含块为其父元素的内容盒。)

  6. 视觉格式化模型(布局规则): 该模型将页面中盒子的排列大致分为了三种方式:常规流、浮动、定位。

  7. 常规流布局:
    常规流,文档流、普通文档流、常规文档流。
    所有元素默认情况下都属于常规流布局。
    总体规则: 块盒独占一行,行盒水平依次排列。
    每个块盒的总宽度,必须刚好等于包含块的宽度。宽度的默认值为auto,margin的取值也可以为auto,默认值为0。
    width吸收能力强于margin,故width、margin同时设为auto时,剩余空间将被width所吸收。
    若宽度、边框、内边距、外边距计算之后,仍然有剩余空间,则该剩余空间被margin-right全部吸收。
    在常规流中,块盒在其包含块中水平居中,可以设置width、margin:0 auto;使文本水平居中,可以设置text-align:center;使文本垂直居中,可以将height、line-height设置为相同值。
    每个块盒垂直方向上的auto值:
    height:auto,适应内容的高度;
    margin:auto,等价于0 。
    百分比设置:
    padding、width、margin均可以取值为百分比。(这里的百分比是相对于包含块的宽度)
    高度的百分比:
    情况一:包含块的高度取决于子元素的高度即父元素的高度未设置时,设置百分比无效。
    情况二:包含块的高度不取决于子元素的高度即父元素高度已设置,设置百分比时是相对于父元素高度。

  • 上下外边距的合并:两个常规流块盒,上下外边距相邻时,会进行合并。(不一定为兄弟元素,也有可能为父子元素;两个外边距中取最大值;可以通过设置padding或者border解决合并问题)
    auto:将剩余空间吸收掉。
  1. 浮动
    特点:
    当一个元素设置浮动属性后,元素的display属性值会被自动更改为block,元素变为块盒;浮动元素的包含块为父元素的内容盒
    float的属性可取值有:
    left:左浮动,元素靠上靠左排列。
    right: 右浮动,元素靠上靠右排列。
    none:默认值,不浮动。
    盒子尺寸:
    宽度为auto时,适应内容的宽度;
    高度为auto时,适应内容的高度;
    在水平或者垂直方向上,当margin设为auto时,即相当于0;
    边框、内边距百分比设置同常规流一样。
    盒子排列:
    浮动盒子在包含块中排列时,会避开常规流块盒;
    常规流块盒在排列时,会忽略浮动盒子;
    行盒在排列时,会避开浮动盒子;
    如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒被称为匿名行盒。
    高度坍塌:
  • 形成原因:常规流盒子的高度,若为适应内容的高度时,则其在计算时会忽略浮动盒子。(浮动盒子脱离了常规流)
  • 解决办法:
    方法一:将浮动元素的父级元素高度设置为固定值;
    方法二:清除浮动。(给浮动元素的父级元素添加一个::after伪类,该伪类的CSS样式可写为:content:“ ”;display:block;clear:both;)
    clear:left ,清除左浮动,即该元素必须出现在前面所有左浮动盒子的下方。
    clear:right,清除右浮动,即该元素必须出现在前面所有右浮动盒子的下方。
    clear:both,清除左右浮动,即该元素必须出现在前面所有浮动盒子的下方。
    应用场景:
    文字环绕
    横向排列
  1. 定位: 手动控制元素在包含块中的精准位置。
    position属性:
    默认值为static,静态定位(不定位);
    relative:相对定位;
    absolute:绝对定位;
    fixed:固定定位。
    一个元素,只要position取值不是static,则认为该元素是一个定位元素。
    定位元素会脱离文档流(相对定位除外)。
    脱离文档流的元素:
    文档流中的元素摆放时,会忽略该元素;
    文档流中的元素计算自动高度时,会忽略该元素。
    可通过以下属性设置元素位置:
    top、right、bottom、left;(属性值起冲突时,以左或上为准)
    相对定位(relative):
    不会导致元素脱离文档流,只是让元素在原来位置上进行偏移;
    元素仅仅发生位置偏移,不会对其它元素位置产生影响。
    绝对定位(absolute):
    宽高为auto时,适应内容;
    确定其包含块范围:找祖先中第一个定位元素,该元素的填充盒为其包含块,若找不到,则它的包含块为整个网页(初始化包含块)。
    一般元素发生重叠即需要精准定位时使用绝对定位。
    固定定位(fixed):
    宽高为auto时,适应内容;
    确定其包含块范围:固定为视口即浏览器的可视窗口。
    定位下的居中:
    在水平(垂直)方向上居中:
  • 定宽(高);
  • 将左右(上下)距离设为0;
  • 将左右(上下)margin设为auto;
    在绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间。
    👉关于文档流

此链接为作者“清风柠檬”的博客园笔记

多个定位元素重叠时:
堆叠上下文:设置z-index(其值可以为正,可以为负,为负数遇到常规流、浮动元素时,该元素会被其覆盖,一般情况下,值越大,越接近用户)
只有定位元素设置z-index有效。
绝对定位、固定定位元素一定不为浮动盒,一定是块盒。
定位中无外边距合并。
使用定位时,应首先确定其包含块范围。
21. 透明度:

  • 在颜色位置设置alpha通道(局部设置):
    rgba(red,green,blue,alpha)
    hex:#red green blue alpha
    每个颜色都具有透明通道,0~1 。
  • opacity:设置整个元素的透明度,取值范围为0~1。(整体设置)
  1. 伪l类选择器和伪元素选择器补充:
    伪类选择器:
    first-child:选择第一个子元素;
    last-child:选择最后一个子元素;
    nth-child:选择指定的第几个子元素(even:等同于2n;odd:等同于2n+1);
    first-of-type:选中子元素中第一个指定类型的元素;
    nth-of-type:选中指定的子元素中第几个某类型的元素。
    伪元素选择器:
    first-letter:选中元素中第一个字母;
    first-line:选中元素中第一行的文字;
    selection:选中被用户框选的文字。

  2. 盒子隐藏:
    不生成盒子:display:none
    生成盒子,虽然不可视,但仍然占据空间:visibility:hidden

  3. 背景图:
    img元素是属于html的概念,而背景图属于css的概念。
    当图片属于网页内容时,必须使用img元素;
    当图片仅用于美化图片时,必须使用背景图。
    background-image、background-color、background-repeat(设置背景图是否重复)、background-size(设置背景图的大小)、background-position(设置背景图的位置)、background-attachment(用于控制背景图是否固定)
    默认情况下,背景图会在横坐标和纵坐标中进行重复。
    雪碧图(精灵图):一张拥有网页中所有的图标的图。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页