补充

补充重要知识

防脱发神器

一图胜千言

使用border-box控制尺寸更加直观,因此,很多网站都会加入下面的代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

颜色的alpha通道

颜色的alpha通道标识了色彩的透明度,它是一个0~1之间的取值,0标识完全透明,1标识完全不透明

在css中使用rgba可以为颜色添加alpha通道

.alpha {
  /* 一个完全透明的颜色,等同于 transparent */
  color: rgba(0, 0, 0, 0);
  /* 一个完全不透明的颜色,等同于rgb */
  color: rgba(0, 0, 0, 1);
  /* 一个半透明的颜色 */
  color: rgba(0, 0, 0, 0.5);
}

rgba还可以有多种书写方式,例如rgba(0, 0, 0, 0.5)还可以写为:

  • rgb(0 0 0 / 50%)
  • #00000080

尺寸的百分比

绝大部分可以书写尺寸的地方,都可以书写百分比

百分比是一个相对单位,其相对于元素的参考系,比如:

  • 普通元素的参考系为父元素的内容区域
  • 绝对(固定)定位元素的参考系为父元素中第一个定位元素的padding区域

下面罗列常见的百分比情况

css属性 百分比相对于 备注
width 参考系的宽度
height 参考系的高度 参考系高度受本身宽度影响时,设置无效
padding 参考系的宽度
border 参考系的宽度
margin 参考系的宽度

最大最小宽高

  • 最大宽度:max-width,最大高度:max-height
  • 最小宽度:min-width,最小高度:min-height

当一个元素的尺寸会自动变化时,设置最大最小宽高,可以让它不至于变得过小或过大。

在实际开发中,我们通常为PC端的页面设置一个最小宽度,通常此宽度为设计稿的宽度

html {
  min-width: 1226px;
}

又或者,我们会为页面中的所有图片设置一个最大宽度,让其不至于超过容器

img {
  max-width: 100%;
}

什么时候使用绝对定位

下面三个条件满足任何一个时,使用绝对定位:

  1. 元素出现在一个天马行空的位置
  2. 元素是否存在,不影响其他元素的排列
  3. 单个元素在某个区域内水平垂直居中

fixed和absolute的区别

fixed是绝对定位的一种特殊情况,它们的参考系不一样

  • absolute参考有定位的父元素
  • fixed参考视口(viewport)

伪类选择器

css伪类选择器大全:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类 含义
:link 选中未访问过的超链接
:visited 选中已访问过的超链接
:hover 选中鼠标移入的元素
:active 选中鼠标按下的元素
:focus 选中聚焦的表单元素
:disabled 选中被禁用的表单元素
:checked 选中被选中的表单元素
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child(an+b) 选中第「an+b」个子元素
a和b是常量,n的值会从0开始依次递增
:first-of-type 选中第一个指定类型的子元素
:last-of-type 选中最后一个指定类型的子元素
:nth-of-type(an+b) 选中第「an+b」个指定类型的子元素
a和b是常量,n的值会从0开始依次递增

contenteditable属性

该属性是一个布尔属性,可以设置到任何元素上,它可以让该元素变为可编辑的状态

在实际开发中,通常用于制作富文本框

image-20211124171230964

table 元素

table元素用于表达一个表格,受CSS3的影响,现在已经很少使用了

posted @   Kyou12138  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示