Lavrena's Notes

Appearance

CSS知识点梳理 ​

种类：行内样式 内联样式 外部样式

样式表优先级：行内样式 >内联样式 = 外部样式

选择器 ​

通配符选择器 ​

用来清除HTML的默认样式

css
* {
    color： #999;
}

元素选择器 ​

对某种元素统一设置样式，不能差异化设置样式

类选择器 ​

选中页面上所有类名为xxx的元素

ID选择器 ​

根据元素的id值，精准地选中某个元素，id不能重复

并集选择器 ​

类名1,类名2,类名3

交集选择器 ​

标签+类名 两个类名组合

css与html元素间的关系

  • 父元素与子元素: 子元素是父元素直接包裹的元素
  • 后代元素
  • 兄弟元素

后代选择器 ​

选中父元素里面的所有符合要求的元素 ul li

子代选择器 ​

选中父元素直接包裹的元素 div>a

兄弟选择器 ​

div+p 与div紧紧相邻的元素 div~p div的所有兄弟p元素

属性选择器 ​

[title] 选中具有title属性的元素 input[type=’checkbox‘] 选中input元素中type=checkbox的元素 title=’’ title^=’’ title$=’’ title*=’’

伪类选择器 ​

像类，但不是类，对元素特殊状态的描述

a标签的特殊状态 选中没有访问过的 a:link 选中访问过的元素 a:visited

动态伪类a:linka:visiteda:hover悬浮状态a:active`

input:facus 获取属于输入状态的元素

结构伪类:first-child:last-child:nth-child(an+b)

按类型选择 :first-of-type:last-of-type:nth-of-type(an+b)

div>p:nth-last-child(2) 选中div中倒数第n个儿子py元素 按照所有兄弟 div>p:nth-last-of-type(2) 选中div中倒数第n个的儿子p元素 按照所有同类型的兄弟 span:only-child 选中的是没有兄弟span元素 span:only-of-type 选中的是没有同类型兄弟的span元素 :root 选中的是根元素 div:empty 选中的是没有内容的div元素 空格也算内容

否定伪类:not() 选中排除括号里面条件的元素

UI伪类:checked 获取被勾选的元素 :disabled 选中被禁用的元素 :enabled

目标伪类:target 选中锚点所指向的元素

语言伪类 :lang() 根据所指定的语言选中元素 看lang属性的值

伪元素选择器 ​

VSCode操作：输入lorem60 生成一串60个词的文本

对元素中的一种特殊位置

div::first-letter 选中div中的第一个字符 div::first-line 选中div中第一行文字 div::selection 选中的是被鼠标选择的文字 input::placeholder 选中input中的提示文字

p::before p元素的内容之前 随后创建一个子元素 p::after p元素的内容之前 随后创建一个子元素

选择器优先级 ​

通过不同的选择器，选中相同的元素，并且为相同样式设置不同的值时，就发生了样式的冲突，到底用哪个样式，就要看优先级了

（行内）> ID选择器 > 类选择器 > 元素选择器 > 通配选择器

权重 a: ID选择器的个数 b: 类、伪类、属性选择器个数 c: 元素、伪元素的个数

像素和颜色 ​

像素 ​

cm mm px 更精确的单位 是个相对单位

颜色 ​

  • 名称：red、blue…英文名
  • RGB：
    • rgb(100%,0,0) rgb(255,0,0)
    • rgba(255,0,0,0.5) 加透明度
    • 值越大 颜色越浅
  • HEX 16进制的RGB #ff0000
    • HEXA IE不支持 #ff0000
  • HSL：hsl(色相，饱和度，亮度) hsla(色相，饱和度，亮度，透明度)

字体 ​

浏览器默认字号和最小字号 16px 12px 可以通过body给页面设置统一字号

字体族 ​

font-family 可以指定系统内已经安装的字体 名称最好用英文 兼容性更好 可以设置多个字体，按照从左到右的顺序依次查找，找到就用，没有找到就用后面的，且通常都在最后写上serif(衬线字体)或sans-serif （非衬线字体）

font-style 风格 ​

font-weight 粗细 ​

复合属性 font: 加粗 斜体 大小 字体族

文本颜色 color设定

文本修饰 文本间距 letter-spacing: 20px 字母间距 单词间距 word-spacing 对中文不起作用

文本修饰 text-decoration：underline wary red; 删除线 下划线 上划线

文本缩进 text-indent: fontSize*2

文本对齐 text-align: left/center/right

font-size ​

由于字体设计原因，文字最终呈现的大小不一定与font-size一致，可能大，可能小

通常情况下，文字相对字体设计框并不是垂直居中的，通常都靠下一些

line-height 行高 ​

应用场景：

  1. 单行文本 垂直居中
  2. 多行文本 调整行间距

vertical-align

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式 在div里面不能直接控制元素里面的文字垂直居中（不能控制块元素）

CSS三大特性 ​

层叠性 ​

如果发生了样式冲突，那就会根据一定的规则，进行样式的层叠

继承性 ​

元素会自动拥有其父元素、或其祖先元素上所设置的样式 优先继承离得近的

background-color 不能继承

优先级 ​

!important > 行内 > id选择器 > 类选择器 > 元素选择器 > * > 继承的样式 并集选择器的每一部分权重是分开计算的

列表相关属性 ​

list-style

边框相关属性 ​

表格的独有属性 ​

背景 ​

水平方向（left,center,right），垂直方向(top,center,bottom)

和鼠标相关的属性 ​

cursor 鼠标的图标可以自定义：URL ()

盒模型 ​

常用长度单位 ​

em:第二种长度单位，相对于当前元素 或其父元素的font-size的倍数 rem:相对于根元素的font-size的倍数 ％：相对于父元素的百分比

元素的显示模式 ​

  • 块元素：独占一行，默认宽度撑满整个父元素，高度由内容撑开
  • 行内元素：不独占一行，一行内容满了之后才会换行，宽高都由内容撑开，CSS不直接设定宽高
  • 行内块元素：inline-block

修改元素显示模式 display

盒模型 ​

盒模型组成 ：content padding border margin （从内到外）

背景颜色会填充padding和border区

盒子总大小content + padding +border Margin不影响盒子大小，只影响位置

content ​

padding ​

行内元素设置上下内边距，不是很理想 padding不可以为负值

border ​

margin ​

应用场景：改变盒子的位置，相对于父元素 行内元素 设置上下边距是无效的 margin可以为负值

margin的塌陷问题 ​

现象：在父元素里面，给第一个子元素设置margin-top或者给最后一个子元素设置margin-boottom,会作用到父元素身上

解决办法一：给父容器加边框或padding（会影响容器的整体大小，不推荐） 解决办法二：overflow:hidden;

margin的合并问题 ​

两个兄弟元素，上下排列，给第一个元素设置margin-bottom,给第二个元素设置margin-top，这两个元素的间距 会被合并

处理内容的溢出 ​

overflow: auto

隐藏元素的两种方式 ​

  • display:none 隐藏后不占位
  • visibity:hidden 隐藏后仍占位

样式的继承 ​

有的样式会被继承，元素如果本身设置了样式，就使用本身设置的样式；但如果本身没有设置样式，就会从父元素开始一级一级继承（继承就近原则）

会继承的css属性：字体属性、文本属性（除vetical-align）、文字颜色等

不会继承的属性：边框、背景、内边距、外边距、宽高、溢出方式等

能继承的属性，都是不影响布局的

元素的默认样式 ​

一般的元素都存在默认样式，比如body、h1、p、a….. 重置某个元素的默认样式，要先选中这个元素

重置默认样式 normalize.css - npm (npmjs.com)

元素之间的空白问题 ​

存在于行内元素、行内块元素 给父元素font-size:0

行内块的幽灵空白问题 行内块元素与文本的基线对齐，而文本的基线与文本最底层之间是有一定距离的 解决方案

  1. 给行内块设置vertical，值不为baseline即可
  2. 若父元素只有一张图片，设置图片为display:block
  3. 给父元素设置font-size: 0 如果该行内块内部还有文本，需要单独设置font-size

浮动 ​

定位 ​

  • 固定定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 定位的层级
  • 定位的特殊应用

布局 ​

假设设计稿总宽度1920，版心的宽度就在960-1200 版心是内容区的最大宽度 版心的存在意义是让页面上所有的内容都可以水平居中 是页面的基础设置

适用于导航条、头部等布局

布局小技巧 ​

  • 行内元素、行内块元素、可以被父元素当作文本处理
  • 如何让子元素，在父亲中水平居中
    • 若子元素为块元素，给父元素加：margin: 0 auto
    • 若子元素为行内元素、行内块元素，给父元素加text-align: center
  • 如何让子元素在父亲中垂直居中
    • 若子元素为块元素，给子元素加margin-top，值为：（父元素content - 子元素盒子总高）/ 2
    • 若子元素为行内元素、行内块元素 让父元素的height=line-height，每个子元素都加上vertical-align:middle 补充：若想绝对垂直居中，父元素的font-size设置为0

CSS3新特性 ​

CSS3新增： 长度单位、盒子属性、背景属性、边框属性、文本属性、渐变、web字体/字体图标、2D/3D变换、过渡、动画、多列布局、伸缩盒模型、响应式布局

BFC ​