css 基础 #73

xiaochengzi6 · 2023-05-08T06:01:04Z

css 规则

@import 引入的css将本地css规则覆盖的问题如何解决？？？

css 的选择器

* {}
#id{}
.class{}
div p {} 后代选择器
div>p {} 子元素选择器
a[title] {} 属性选择器
p:first-child {} 伪类选择器
h1 + p {} 相邻兄弟选择器： 它只匹配由第二个选择器匹配的那些元素，这些元素是第一个选择器的下一个兄弟元素
h1 ~ p {} 一般兄弟选择器：即使它们不直接相邻，则可以使用通用兄弟组合器，这些元素是第一个选择器的下一个兄弟元素
h1,h2,h3 {} 并集选择器

伪类选择器

链接伪类选择器
a:link    选择所有未被访问的链接
a:visited  选择所有已被访问的链接
a:hover   选择鼠标指针位于起上的链接
a:active   选择活动链接(选择时鼠标摁下没有弹起前的状态)
结构伪类选择器
p:nth-child(N) 选择作为其父的第N个子元素的每个 （<p>） 元素。
p:nth-of-type(N)  选择作为其父的第N个 <p> 元素的每个 <p> 元素。
注意：这两个有区别

伪元素

::before：在元素前插入内容；
::after：在元素后插入内容；

/* 使用content 属性来指定要插入的内容。 */
{
   content:""
}

css 权重

10000：!important；
01000：内联样式；
00100：ID 选择器；
00010：类选择器、伪类选择器、属性选择器；
00001：元素选择器、伪元素选择器；
00000：通配选择器、后代选择器、兄弟选择器；

css继承

并不是所有属性都能被继承。不会影响页面布局的元素往往会被继承。

css 的继承，分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承。当没有指定值时，默认继承的属性取父元素的同属性的计算值（相当于设置了 inherit ），默认不继承的属性取属性的初始值（时相当于设置了 initial ）。

默认继承的 ("Inherited: Yes") 的属性：

所有元素默认继承：visibility、cursor

字体相关属性：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction

列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image

表格元素默认继承：border-collapse

对于其他默认不继承的属性也可以通过以下all属性值来控制继承行为：

inherit：继承父元素对应属性的计算值；
initial：应用该属性的默认值，比如 color 的默认值是 #000；
unset：如果属性是默认可以继承的，则取 inherit 的效果，否则同 initial；
revert：效果等同于 unset，兼容性差。

<div all="inherit" ></div>

css 的文档流

脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。

文档一旦脱流 1.计算其父节点高度时不会将其高度纳入.2.脱流节点不占据空间。

有两种方式可以让元素脱离文档流：浮动和定位。

position: fixed / float / absolute

css 的盒子模型

若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。

盒子的大小由content+padding+border这几部分决定

box-sizing: content-box

标准盒模型：指定宽高是内容大小盒子大小 = 指定宽高(context) + padding + border

box-sizing: border-box

IE盒模型：指定宽高是内容+boder+内边距盒子大小 = 指定宽高 = context + padding + border

长文本处理

字符超过部分换行

{
    overflow-wrap: break-word;
}

单行文本超出省略

{
//1.强制将文字设置为一行显示
white-space: nowrap;
//2.溢出的部分隐藏  
overflow: hidden;
//3.溢出的部分用省略号来显示
text-overflow: ellipsis;
}

多行文字显示溢出文字的省略号

{
    overflow: hidden;
    display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 3;(在第三行显示省略号)
/* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

样式：

圆角： border-redius: length(这里是圆角的半径长度或者是百分比 50%是个⚪);
border-radius: x y; x:左上右下

阴影： box-shadow: 10px 10px 10px rgba(100,100,100,.3)水平竖直模糊颜色及透明度

模糊： filter(滤镜): blur(px) {模糊处理}

定位 position

定位需要1.定位的模式和2.边的位移

1.定位模式: position: static(静态定位)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
2.边偏移: left/right/top/bottom

(不脱标)相对定位:

他是相对于自己原来的位置移动
原来在标准流位置占有,后面的盒子仍然以标准流的方式对它

（脱标）绝对定位: 移动前看父元素进行

没有父元素时或父元素没有定位,就会以浏览器为准
如果祖先元素有定位,则会以带有定位的祖先元素最近一级的参考位置移动
绝对定位不保留原来位置,标准盒子则会占有原来位置

使用 absolute 绝对定位时，必须指定 left 、 top 、 right 和 bottom 中的至少一个，否则 left/right/top/bottom 属性将会使用默认值 auto 。这将导致对象遵从标准文档流，在前一个对象之后立即被呈递，简单讲就是都变成 relative ，并且会占用文档空间。

显示与隐藏:

display: black(显示元素)\none(隐藏对象)
display: none 隐藏对象后不在占有原来的位置(但盒子还存在)
display: visibility 隐藏对象后但保留位置

overflow: visible 对溢出的部分进行显示
overflow: hidden 对溢出的部分进行隐藏
overflow: scroll 对溢出的部分显示滚动条不溢出也显示滚动条
overflow: auto 在需要的情况下的显示滚动条不溢出不显示滚动条
有过有定位的盒子,请慎用overflow: hidden 因为会隐藏多余的东西

基本概念

常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常见的行级元素：span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong

块级盒子参与 BFC 行内级盒子参与 IFC

元素的内在盒子和外在盒子

外在盒子决定元素排列方式。内在盒子决定内容的显示。

IFC、BFC、GFC 与 FFC 决定盒子模型的布局，其子元素如何定位以及其他元素的关系和相互作用。

Box

Box 是 CSS 布局的对象和基本单位，直观点说就是一个页面是由很多个 Box (即boxes)组成的，元素的类型和 display 属性决定了 Box 的类型。

block-level Box：当元素的 CSS 属性 display 为 block, list-item 或 table 时，它是块级元素 block-level 。块级元素（比如<p>)视觉上呈现为块，竖直排列。
每个块级元素至少生成一个块级盒（block-level Box）参与 BFC ，称为主要块级盒(principal block-level box)。一些元素，比如<li>，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。

注意：块级元素至少生成一个快级盒
Inline-level Box：当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本或图片，都是行内级元素。
行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文 IFC

注意：行内级元素生成行内级盒
flex container：当元素的 CSS 属性 display 的计算值为 flex 或 inline-flex ，称它为弹性容器。
display:flex这个值会导致一个元素生成一个块级（block-level）弹性容器框。
display:inline-flex这个值会导致一个元素生成一个行内级（inline-level）弹性容器框。
grid container：当元素的 CSS 属性 display 的计算值为 grid 或 inline-grid，称它为栅格容器。

快容器盒： 只包含块级盒，或者生成一个行内格式化上下文，只包含行内盒的叫快容器盒。

块容器盒要么只包含行内级盒，要么只包含块级盒。

**快盒：**同时是快容器盒的快级盒称为快盒

**行盒：**由行内格式化上下文产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。

需要注意的是 line-height用于设置多行元素的空间量。对于块级元素。它决定的是行宽盒子的最小高度。

**行距 = Line-height - font-size **

BFC

块格式化上下文它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

一、渲染规则

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；

外边距重叠
每一个盒子的左外边距应该和包含块的左边缘相接触。即使存在浮动也是如此，除非子盒子形成了一个新的BFC。

浮动盒子占据位置
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

互相不影响
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
BFC的区域不会与float box重叠；

不会忽略浮动盒子的位置

二、触发条件

根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
overflow 的值不为 visible的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

三、应用场景

阻止元素被浮动元素覆盖
清除内部浮动而造成的元素塌陷
防止外边距合并

为什么要清除浮动？ 子元素都产生浮动的情况下父元素没有指定高度就会造成高度为0的盒子也就是发生了 高度塌陷

清除浮动的六种方式

父元素也浮动
父元素加定位 position: absolute
父元素设置 overflow: hidden
给父元素一定的高度
末尾增加空元素并设置其为 clear: both clear的定义是：元素盒子的边不能与前面的浮动元素相邻。也就是虽然浮动元素高度坍塌，但是设置了clear: both的元素却将其高度视为仍然占据位置。
增加一个伪类在此添加 clear: both;

.box::after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

嵌套块元素，元素塌陷的问题（外边距坍塌）

形成原因： 1.父元素和子元素都有外边距但当子元素外边距大于父元素时 2.子元素中有margin-top或者margin-bottom值。父元素的高度会塌陷

解决办法：

为父元素定义 border: 1px solid transparent;
为父元素添加内边距
overflow: hidden;
浮动
绝对定位
父元素转为 display: inline-block

鼠标样式:

设置检索在对像上移动的鼠标采用何种系统预定义光标形状
cursor: "default(小白)/pointer(小手)/move(移动)/text(文本)/not-allowed(禁止)"

取消表单的轮廓线: outline: 0/none
防止文本域拉伸: resize: none
取消li的小圆点: list-style:none
取消链接下划线: text-decoration: none

禁止文字复制

// 禁止右键菜单
document.oncontextmenu = function(){ return false; };
// 禁止文字选择
document.onselectstart = function(){ return false; };
// 禁止复制
document.oncopy = function(){ return false; };
// 禁止剪切
document.oncut = function(){ return false; };

IFC

行内格式化上下文 IFC 的形成条件：块级元素中仅包含内联级别元素。

需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。

行内级格式化上下文用来规定行内级盒子的格式化规则。

一、渲染规则

内部的盒子会在水平方向，一个接一个地放置。
这些盒子垂直方向的起点从包含块盒子的顶部开始。
摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。（这表明是float不在行框内但又处在IFC中）
IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）
当 inline-level boxes （行内级元素）的总宽度少于包含它们的 line box（行框）时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对（display属性）inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。

注意这里的文字拉伸
当一个 inline box（行内盒子）超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box

二、应用场景

水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。

**值得注意**的是，设置一个块为 inline-block ，以单个封闭块来参与外部的 IFC，而内部则生成了一个 BFC。

可以参考每个元素都有两个盒子—— 外在盒子和内在盒子。此时外在盒子为行内级元素内在盒子为块级元素整个时候就会构成一个 div 包裹了一个行内级元素 p 但 p 内部又是一个块级元素的局面可以指定高度宽度等。这样满足了 IFC 的形成条件

// html
<div class="wrap">
    <p>
        1
    </p>
</div>
//css
.wrap {
    text-align: center;
    line-height: 300px;
    width: 100%;
    height: 300px;
}
p {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度 ( 这里表示父元素起码要有一定的高度 )，然后设置子元素 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

line-height + vertical-align

//html
<div class="wrap">
    <p>
        111111111
    </p>
</div>
//css
.wrap {
    line-height: 100px;
    width: 100%;
    height: 100px;
    background-color: #ccc;
}

p {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    background-color: #333;
    font-size: 12px;
}

需要注意： vertical-align: middle属性起作用的前提必须是作用在内联元素上。如果元素设置了 float: left / position: absolute 则该属性不能生效。因为 display: block

幽灵节点造成的影响：

水平垂直居中的几种形式

一、单行的文本，inline 或者 inline-block 元素；

水平居中
```
{
   text-align: center;
}
```
垂直居中

2.1 通过设置上下内间距padding一致达到垂直居中的效果
```
{
   padding-top: 10px;
   padding-buttom: 10px;
}
```
2.2 设置 height 和 line-height 一致达到垂直居中
```
{
   height: 100px;
   line-height: 100px;
}
```

二、固定宽高的块级盒子(垂直水平居中)

absolute + 负margin

// html
<div class="wrap">
   <div>
   </div>
</div>
//css
.wrap {
 height: 200px;
 width: 200px;
 // 相对定位
 position: relative;
 background-color: red;
}

.wrap div {
 height: 100px;
 width: 100px;
 background-color: #333;
 // 会找到最近的 position 属性并开始定位
 position: absolute;
 left: 50%;
 top: 50%;
 // 这个时候子元素 div 左上角就在中心点位置。在向上并向左偏移一半的距离保持在中间位置。
 margin: -50px 0 0 -50px;
}

absolute + margin auto

<div class="demo2">
     <div class="bg-ddd">absolute + margin auto</div>
</div>
//css
.demo2 {
 width: 200px;
 height: 200px;
 position: relative;
 background: red;
}
.demo2 div {
 width: 100px;
 height: 100px;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 background: blue;
}

absolute + calc

<div class="demo3 box">
     <div class="bg-ddd">absolute + calc</div>
</div>
//css
.demo3 {
  width: 200px;
 height: 200px;
 position: relative;
 background: red;
}
.demo3 div {
 width: 100px;
 height: 100px;
 position: absolute;
   //这和第一个方法一致 向左向上移动50% 后在减去子盒子一半距离
 left: calc(50% - 50px);
 top: calc(50% - 50px);
 background: blue;
}

三、不固定宽高的块级盒子(父元素要指定一定的大小)

absolute + transform

<div class="demo4 box">
     <div class="bg-ddd">absolute + transform</div>
   </div>
// css
.demo4 {
 position: relative;
   background: red;
}
.demo4 div {
 position: absolute;
 left: 50%;
 top: 50%;
 // translate(向X轴移动 向Y轴移动) 移动的百分比相对于自身宽高
 transform: translate(-50%, -50%);
   background: blue;
}

(line-height = height ) + vertical-align

<div class="demo5 box">
     <div class="bg-ddd">line-height + vertical-align</div>
</div>
.demo5 {
 line-height: 150px;
 // 水平居中
 text-align: center;
}
.demo5 div {
 //  IBF 
 display: inline-block;
 // 保持默认值
 line-height: initial;
 vertical-align: middle;
}

writing-mode

<div class="demo6 box">
     <div class="middle">
       <div class="child bg-ddd">writing-mode</div>
     </div>
   </div>
// css
.demo6 {
 width: 600px;
   height: 150px;
   //垂直方向自左而右的书写方式
 writing-mode: vertical-lr;
 text-align: center;
}
.demo6 .middle {
 display: inline-block;
   //水平方向自上而下的书写方式。
 writing-mode: horizontal-tb;
 text-align: center;
 width: 100%;
}
.demo6 .child {
 display: inline-block;
}

table-cell

<div class="demo7 box">
     <div class="bg-ddd">table-cell</div>
   </div>
// css
.demo7 {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 width: 600px;
   height: 150px;
}
.demo7 div {
 display: inline-block;
}

flex

    <div class="demo8 box">
      <div class="bg-ddd">flex</div>
    </div>
// css
.demo8 {
  display: flex;
    height: 150px;
    align-items: center;
    justify-content: center;
}

grid

<div class="demo9 box">
      <div class="bg-ddd">grid</div>
    </div>
// css
.demo9 {
    height: 150px;
  display: grid;
}
.demo9 div {
  align-self: center;
  justify-self: center;
}

float

绝对定位

和浮动元素一样，绝对定位也具有块状化、BFC、包裹性、脱离文档流、没有margin合并的特性。绝对定位完全脱离文档流且不会对周围元素产生任何影响。

绝对定位的包含块则是距离最近的position不为static的祖先元素。

其实一句话就可以表示两者之间的关系：当overflow: hidden元素在绝对定位元素和其包含块之间的时候，绝对定位元素不会被剪裁。

以下两种绝对定位元素不会被剪裁:

<div style="overflow: hidden;">
  <img src="big.jpg" style="position: absolute;">
</div>
<div style="position: relative;">
  <div style="overflow: hidden;">
    <img src="big.jpg" style="position: absolute;">
  </div>    
</div>

position: absolute的流体特性

当绝对定位元素水平方向或者垂直方向的两个定位属性同时存在时候，绝对定位元素在该方向上便有了流体特性。此时的 width/height 属性具有了自动撑满的特性。当设置margin 时候宽高不用指定会自动撑满。

// html
<div class="a">
	<div class="b">1</div>
</div>
.a {
    height: 100px;
    width: 100px;
}
.b {
    margin: 30px;
}

固定定位 position: fixed;

它相对于屏幕视口位置来开始定位。祖先元素设置 position: relative;并不会对其造成影响。注意：当父元素设置 transfrom 属性非 none 时，容器由该视口改为该祖先。

粘性定位 position: sticky;

层叠上下文

层叠等级
层叠顺序

值和单位

颜色关键字

transparent

1.1 如何利用其画出三角形
currentColor 关键字

媒体查询

你可以通过给 <link> 加上 media 属性来指定该样式文件只能对什么设备生效，不指定的话默认是 all，即对所有设备都生效：

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />

都支持哪些设备类型？

all：适用于所有设备；
print：适用于在打印预览模式下在屏幕上查看的分页材料和文档；
screen：主要用于屏幕；
speech：主要用于语音合成器。

需要注意的是：通过 media 指定的资源尽管不匹配它的设备类型，但是浏览器依然会加载它。

参考

[IFC、BFC、GFC 与 FFC 知多少----(chokcoco)][https://github.com/谈谈一些有趣的CSS题目（11）-- IFC、BFC、GFC 与 FFC 知多少 chokcoco/iCSS#56]
https://juejin.cn/post/6941206439624966152#heading-11
https://juejin.cn/post/6854573212337078285#heading-50
https://juejin.cn/post/6844903894313598989#heading-8

The text was updated successfully, but these errors were encountered:

xiaochengzi6 · 2023-05-09T09:48:31Z

消除“幽灵空白节点”的影响

终于找到并认识了“幽灵空白节点”，那么对于这种无法获取却又真实影响我们样式的“节点”，我们应该如何消除它带来的影响？

1、让vertical-align失效：vertical-align属性对于块级元素是无感的，因此我们只需要为元素设置dispaly为block即可;
2、修改vertical-align属性值：修改其默认值baseline值为其他属性值，使其不再相对基线对齐;
3、修改line-height的值：上面我们说过line-height的定义是两基线之间的距离，因此在上面例子中，图片下面的空隙，实际上是“幽灵空白节点”计算后的行高值和基线的距离，因此，只要line-height足够小，便可以消除图片下面的空隙。（注意这里是要在div上设置line-heght，然后让div的inline boxes继承line-height属性）

参考：https://juejin.cn/post/6986556064502120478

xiaochengzi6 added the css css 样式 label May 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css 基础 #73

css 基础 #73

xiaochengzi6 commented May 8, 2023 •

edited

Loading

xiaochengzi6 commented May 9, 2023

css 基础 #73

css 基础 #73

Comments

xiaochengzi6 commented May 8, 2023 • edited Loading

css 规则

css 的选择器

伪类选择器

伪元素

css 权重

css继承

默认继承的 ("Inherited: Yes") 的属性：

css 的文档流

css 的盒子模型

长文本处理

定位 position

显示与隐藏:

基本概念

元素的内在盒子和外在盒子

Box

BFC

清除浮动的六种方式

嵌套块元素，元素塌陷的问题（外边距坍塌）

鼠标样式:

IFC

水平垂直居中的几种形式

float

绝对定位

固定定位 position: fixed;

粘性定位 position: sticky;

层叠上下文

值和单位

颜色关键字

媒体查询

参考

xiaochengzi6 commented May 9, 2023

消除“幽灵空白节点”的影响

xiaochengzi6 commented May 8, 2023 •

edited

Loading