css权威指南读书笔记

最新推荐文章于 2023-11-14 21:18:07 发布

Yolanda_2022

最新推荐文章于 2023-11-14 21:18:07 发布

阅读量253

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_57307213/article/details/126994539

版权

第一章：css和文档

块级元素

默认填充父元素的内容区，元素框前后生成了分隔符。

行内元素

在文本行内生成的元素框，但是不会打断这行文本。

第二章：选择器

属性选择器

选择有class属性的h1元素：
h1[class]
根据具体属性值去选择：
p[class=“urgent warning”]
根据部分属性值去选择(选择class属性中包含warning的元素）：
p[class~=“warning”]
在这里插入图片描述

特定属性选择器：

在这里插入图片描述

后代选择器(空格结合符）

选择器：
a b
空格符号可以解释为在a中找到b，不论b嵌套的层次有多深，a和b之间的层次间隔可以是无限的；
eg:h1 em
解释为作为h1后代的任何em元素；
a:link表示未访问资源的链接；

选择子元素(> 子结合符)

相邻兄弟元素（+）

选择紧接在另一个元素后（重要！！）的元素(只有一个），且两个元素有相同的父元素。

在这里插入图片描述

伪类和伪元素（冒号）：

所有的伪类和伪元素关键字前面都有一个冒号。

1.伪类选择器：

1.1 链接伪类：

在这里插入图片描述

1.2 动态伪类：

在这里插入图片描述

1.3选择第一个子元素（:first-child)

2.伪元素选择器：

设置第一行样式

::first-line

设置首字母样式

::first-letter

设置之前和之后元素的样式(::before ::after)

注意之前，其实是生成div元素的子元素，放在最前边

 div::before{
    content: '}}';
    color:silver;
   }

 <style>

   div::before{
    content: '}}';
    color:silver;
   }
   div::after{
    content: ' the end';
    color:silver;
   }
  </style>
</head>
<body>
  <div>
   22english,22english22english22english22english  
   3 22english,22english22english22english22english
  </div>
</body>

在这里插入图片描述

第三章：结构和层叠

选择器的特殊性：
在这里插入图片描述
选择器特殊性举例：

内联样式特殊性：

在这里插入图片描述

重要声明（!important)特殊性高于内联样式：
发现有些css是在标签内使用内嵌的方式实现的，优先级最高，我们通过外联样式无法修改，这时我们就可以使用 !important 来实现。
继承：
继承没有特殊性，通配符有0的特殊性，继承连0的特殊性都没有。
0特殊性比无特殊性要强。
关于a标签：
浏览器样式表中有关于超链接的样式，即用户代理的超链接样式。

在这里插入图片描述

样式声明的来源以及这些来源的声明的权重：

在这里插入图片描述

顺序：
特殊性相同的情况下，出现顺序靠后的生效。
文档中包含的样式比导入的样式权重高。
举例：
因为与元素匹配的最后一个选择器会胜出，所以链接样式声明顺序如下（LVHA)：(love ha )

在这里插入图片描述

第四章：值和单位

相对长度单位：em,ex,px

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于父元素或浏览器的默认字体尺寸。

ex

所用字体中小写x的高度。

第五章：字体

在这里插入图片描述

第六章：文本属性

缩进文本

块级元素使用text-indent属性，行内元素可以使用内外左边距来实现缩进。
段落的首行缩进

在这里插入图片描述

水平对齐（text-align)

其中justify两端对齐，是把文本行的左右两端都放在父元素的内边界上。
在这里插入图片描述

垂直对齐（line-height)

line-height控制行间距，
line-height-字体大小=行间距

在这里插入图片描述

在这里插入图片描述
line-height 和font-size都是可以继承的，line-height是根据font-size来计算的，如果当前元素没有font-size,就根据继承的font-size来计算。
使用缩放因子解决继承问题：
但是注意line-height继承的时候，从父元素那里计算，而不是在子元素上计算的。
line-height继承的是计算的结果。
所以使用line-height的时候，最好的办法是指定一个数，如line-height:1,这样继承的将是1而不是计算的px结果。

垂直对齐文本（vertical-align)

只应用于行内和替换元素（图片，表单输入元素，表单元格）
要求一个元素的基线与其父元素对齐。
super（上标）或sub（下标）不会让文本大小变化，只是移动位置。其文本大小默认和父元素相同，可以使用font-size来把文本变小。
middle(居中对齐）会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐。（如下，设置了图片的vertical-align为middle的效果）

在这里插入图片描述

vertical-align也可以取值为百分比，那么就是根据line-height去计算的百分比。

字间隔(word-spacing)

字母间隔(letter-spacing)

文本转换（transform:首字母大写，大写，小写)

文本阴影(text-shadow)

可以定义多个阴影。每个阴影由一个颜色和3个长度值来定义，前两个长度值定义了阴影与文本的偏移距离，第三个长度值定义了阴影的模糊半径。

处理空白符(white-space)

normal:去掉多余的空格。
pre:保留空格和回车。
nowrap:防止文本换行，除非使用了br元素。
在这里插入图片描述

文本方向

direction:rtl .ltr
unicode-bidi

第七章：基本视觉格式化

只有元素内容的width和左右外边距可以设置为auto;

使用auto

设置width,margin-left,margin-right某个值为auto,余下的两个为特定值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度为父元素的width;
如果三个属性都设置为特定值，则会把右外边距设置为auto,由这个auto来填补所需的距离，最后使得元素总宽度等于其包含块的width;

不只一个auto

1.如果将两个外边距设为auto,那么他们会将元素在父元素中居中。
(注意不同于text-align,text-align只适用于块级元素的内联内容居中）
2.如果将width和某个外边距设置为auto,那么设置为auto的外边距会减为0
3.如果将width和两个外边距都设置为auto,那么两个外边距都会变成0，width会尽可能的宽。

负外边距

7个水平属性的总和等于父元素的width（如果不满足要求，则重置右外边距）注意，只有外边距才有可能小于0;
如下，父元素宽度是400px计算出来的子元素宽度是434px
在这里插入图片描述

替换元素的水平格式化

以上规则是非替换元素的水平格式化，替换元素的水平格式化也大致相同，主要是以下有一点问题：
替换元素如img，如果width为auto，那么元素的宽度就是内容的固有宽度，就是原图像的宽度。

垂直格式化

height,上下内边距和上下外边距，七个属性值的加总必须等于包含块的height.只有外边距和height可以被设置为auto;
margin-top和margin-bottom设置为auto,那么它会自动计算为0；如果margin-top和margin-bottom都设置为0，那么他们都会重置为0，并不能将元素在它所在的包含块中垂直居中

height设置为auto

那么其高度将恰好足以包含其内联内容.
具体规则：
1.如果块级元素没有内边距和边框，其默认高度是从其最高子元素的上外边框边界到其最低子元素下外边框边界之间的距离。
2.如果块级元素有内边距或者边框，那么其高度是从其最高子元素的上外边距边界到其最低子元素下外边距之间的距离。

合并垂直外边距

（1）垂直相邻外边距合并

两个外边距中较小的会被较大的合并。
如果相邻有多个外边距，也会发生合并。如下，
如下，因为ul的没有内边距和边框，所以ul只包括li的外边框，不包括li的外边距。
三个外边距合并，最后的效果是28px

在这里插入图片描述
如果给ul增加边框，那么ul的高度就包含li的下外边距，那么就只会在ul和h1之间发生合并。

负外边距

如果有多个负的垂直外边距，那么取其中绝对值最大的那个。
如果正外边距和负外边距合并，会从正外边距减去这个负外边距的绝对值。

在这里插入图片描述

行内元素

行布局

匿名文本

未包含在行内元素中的字符串（空格也算）

em框

font-size决定em框的高度

内容区

非替换元素：em框串起来构成的框
替换元素：元素固有高度+边框+内外边距

行间距

font-size和line-height之差，分成两半分别应用到内容区的顶部和底部
为内容区增加的这两个部分分别称为半间距。

行内框

非替换元素：行内框高度等于line-height的值；
替换元素：行内框的高度等于内容区的高度，因为行间距不应用到替换元素。

行框

该行出现的行内框的最高点和最低点的最小框。

确定行框高度：

1.计算行内框高度
2.替换元素底部放在基线上，对齐非替换元素基线的位置。
3.vertical-align的元素根据设置的值偏移该元素的位置
4.基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离。

行内格式化

块级元素中包含的各文本行本身都是行内元素，不论是否真正用行内元素的标记包围起来。
在这里插入图片描述

行内非替换元素

案例1:
1.font-size:15px
2.line-height:21px
以上设置效果如下：

在这里插入图片描述
案例2:

p{
line-height:12px;
font-size:12px;
}
em{
font-size:24px;
}
em继承line-height，那么其行内框是12px,但是其内容区是font-size大小，为24px,半间距为-6px,
又因为基线对齐，所以最后行框高度为15px:

在这里插入图片描述
又因为各行框的顶端挨着上一行行框的底端，所以这里em中的文本内容因为行框比内容区低，导致了上下行文本的重叠：

在这里插入图片描述

vertical-align对行框高度的影响

vertical-align:4px会把元素上升4px,会同时提升行内框和内容区。
在上一个例子的基础上，加给em的vertical-align使得其偏移基线上方4px,这样就使得其行内框也往上移动了4px,最后整个行框的高度在上个例子的基础上增加了4px.

在这里插入图片描述
vertical-align各个值的含义如下：

避免文本行重叠的方法：line-height设置为1或者1em:

在这里插入图片描述
line-height为1的时候，子元素big继承也是1。

关于border使得文本行重叠

如在line-height为1的情况下，去添加border，那么就会导致多行文本行重叠。那么我们就通过增加line-height
解决这个问题。
（因为是根据line-height来决定行内框的大小的，和border无关）
（因为边框是不算在非替换元素的内容区的，非替换元素的内容区是em框的大小，也就是font-size大小。非替换元素的行内框是line-height的大小，而行框又是以行内框来计算的）
打个比方来说，p是font-size:14px,line-height是1，那么行框是14px,如果加了边框，边框是在元素固有的高度以外的，也就是14px以外去添加的。所以会导致文本行重叠的问题。

边框是加到哪里去的？
行内元素的边框边界由font-size控制，
在这里插入图片描述

缩放行高

line-height使用缩放因子
假设你希望文档中所有的元素line-height都是其font-size的1.5倍，那么可以如下声明：
body{
line-height:1.5
}

增加框属性

内边距，外边距，边框都可以应用到非替换行内元素。但这些都不影响行框的高度。
注意，vertical-align是根据line-height来计算的。

在这里插入图片描述

在这里插入图片描述
注意，替换元素的行内框底部（下外边距边界）和基线对齐。

在这里插入图片描述

行内块元素

如下，我们给span元素添加了display:inline-block属性。

行内块元素（作为替换元素（像个图片一样）放在行中）

无内容时按margin-bottom下边缘为基线。

在这里插入图片描述

行框高度如下：
在这里插入图片描述

有内容时按最后一行文字的基线为准:

在这里插入图片描述

在这里插入图片描述
行框内容情况如下：

在这里插入图片描述

行内块元素的内部，会像块级元素一样设置内容的格式：
注意，因为width和text-align不能用于行内元素，所以two的情况是忽略了这些设置的。

在这里插入图片描述

如果行内块元素的width未定义，那么元素框的宽度会刚好包含它的内容，而不是像块级元素一样占据一整行。

第八章：内边距，边框和外边距

垂直方向的margin设置百分比也是相对于包含块的可用宽度而言。
如果没有给元素设置宽度，那么元素框的总宽度,左右上下外边距取决于父元素的width;

父外边距和合并外边距

正常流中垂直相邻外边距会合并（flex除外）

在这里插入图片描述
子块级元素下外边距为负，那么父元素的底端会向上拉，使得段落超出其父元素的底端。

行内非替换元素的外边距

在这里插入图片描述

在这里插入图片描述
行内非替换元素跨多行添加外边距的情况：

在这里插入图片描述

行内替换元素的外边距

在这里插入图片描述

边框和行内元素

边框不影响元素的行高。

内边距

如果是百分数，那么是相对于其父元素的width来计算的。

第九章：颜色和背景

内容框和内边距都是元素背景的一部分，且边框画在背景之上。
background-position取百分比的实际含义：

在这里插入图片描述

在这里插入图片描述
等价的位置关键字和百分数值：

在这里插入图片描述

background-position取长度值的含义：
偏移点是元素左上角。
如background-position：20px 30px;

在这里插入图片描述
注意：百分数和长度值可以结合使用。

background-attachment

取值为fixed,那么原图像就不会随文档滚动，而且位置是由可视区大小确定。

第十章：浮动和定位

定位：允许你定义元素相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素（某祖先元素），甚至浏览器窗口本身的位置。

浮动

块级元素会当浮动元素不存在;
行内元素会绕着浮动元素渲染;
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
外边距合并仅发生在常规流块级元素之间;
浮动元素周围的外边距不会合并，外边距合并只发生在常规流块级元素之间。

包含块

常规流/浮动元素：离其最近的块级祖先
定位：是其相对定位的祖先
规则：
在这里插入图片描述

在这里插入图片描述

如何理解后面一句话？
如果有三个段落，中间的段落浮动，那么浮动段落就会像有一个块级父元素一样浮动。

在这里插入图片描述

浮动与定位并存的情况

1.浮动时可以使用relative定位
2.absolute和fixed与浮动并存的时候，只有定位生效。

清除浮动clear

在这里插入图片描述

定位

案例1（绝对定位）:

在这里插入图片描述

案例2（绝对定位）：

在这里插入图片描述

定位元素可以不必设置宽和高，其宽和高可以由偏移的值隐晦的推算：

在这里插入图片描述

在这里插入图片描述
案例3（绝对定位）

在这里插入图片描述

在这里插入图片描述
偏移属性设置auto使得元素足以显示其内容：

在这里插入图片描述

绝对定位auto值的规则

top:auto

定位元素的顶端要相对于其未定位前本来的顶端位置对齐。（即position为static的时候，所在的位置为静态位置，也就是计算出的其顶边应该在的位置）

left:auto&right:auto

两者的规则和top:auto是一致的。
以上auto规则一般是在对定位元素的尺寸宽和高没有限制，对定位元素的下边界和右边界的放置没有什么限制的情况下生效的。
当如下无法满足全部值的时候，就另当别论了。
在这里插入图片描述
定位元素的水平放置规则等式：

在这里插入图片描述
如下所示：

在这里插入图片描述
width:auto,那么元素的内容区恰好只能包含其内容。
right:auto,那么原意是放在span处在正常流时候的水平位置处。
但是right的设置和left冲突了，最后的结果是：

在这里插入图片描述

外边距auto和定位并存的情况

案例1，规则如下，假如包含块是25em,那么扣去12em后，剩下13em,均分给左右margin(margin-right,margin-left)

在这里插入图片描述
案例2:
如下绝对定位元素水平方向上的设置也不能完整填充包含块，包含块有25em,但是绝对定位元素的推算出来只有14em,那么还差11em才能填充包含块，那么这里从哪里去找补呢？
答案是过度受限的情况下忽略right的值。

在这里插入图片描述
案例3:

如下包含块的宽度是25em,那么margin-right的宽度就是计算为了12em.

在这里插入图片描述
总之，如果只有一个属性设置为auto,那么就会修改这个属性来满足前面所说的定位元素的水平放置规则等式。

定位元素的垂直轴放置规则等式

同水平轴，可以当成水平轴旋转了90度来看。
未指定的属性会被设置为适当的值，来弥补定位元素底端/顶端与其包含块底端/顶端之间的距离。
外边距为auto同时top和bottom的值相同可以得到垂直居中的效果
计算规则同水平轴，margin-left和margin-right为auto,那么他们两个就均分剩下的空间了。

在这里插入图片描述

垂直轴不同于水平轴的两个特点：

在这里插入图片描述

替换元素的放置和大小

替换元素没有恰当收放的概念，因为它有固有的宽度和高度。
替换元素水平轴规则

在这里插入图片描述
替换元素与非替换元素相同，如果过度受限，那么会忽略right的值。
替换元素垂直轴规则：

在这里插入图片描述

案例（关于为什么四个方向为0，margin:auto可以使得元素垂直水平居中）：
因为margin为auto，为了填满包含块，那么margin计算为25px,所以垂直水平居中了。

  <style>
div{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}
img{
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width: 50px;
  height: 50px;
  margin: auto;
}
  </style>
</head>
<body>
<div>
 <img src="./a.png" />
</div>
</body>