【CSS】(标准流部分)易忘知识点汇总

一、元素

块元素

常见的块元素

复制代码
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素

常见的行内元素:

复制代码
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行内块元素

常见的行内块标签

复制代码
<img />、<input />、<td>

二、图片背景

背景图片位置

样式名称:

​ background-position 属性可以改变图片在背景中的位置

使用方式:

​ 参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

背景图片固定

样式名称:

​ background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式:

背景样式合写

背景合写样式:

​ background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式:

背景总结

三、常忘样式表达

表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法:

css 复制代码
 border-collapse:collapse; 

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

圆角边框

在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法:

css 复制代码
 border-radius:length;    
  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
  • 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
  • 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

盒子阴影

CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。

语法:

css 复制代码
 box-shadow: h-shadow v-shadow blur spread color inset; 

四、其他

:focus 伪类选择器

定义:

​ :focus 伪类选择器用于选取获得焦点的表单元素。

​ 焦点就是光标,一般情况 类表单元素才能获取

例子:

水平居中和垂直居中

//line-height: 60px 设置成块内标签一样的高度,能实现字体垂直居中

//text-align: center;放在父级标签上,能实现行内元素水平居中对齐

内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后,发生了 2 件事情:

  1. 内容和边框有了距离,添加了内边距。
  2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响:

  • 如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
  • 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案:

​ 如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。

优先级

当同一个元素指定多个选择器,就会有优先级的产生。

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行
相关推荐
郭老二4 小时前
【前端】vue3:编译步骤
前端
不在逃避q5 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁5 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9855 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易5 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师7 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174467 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈7 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen8 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒8 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端