【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 减去多出来的内边距大小即可。

优先级

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

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行
相关推荐
ywf12152 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭2 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf8 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特8 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷8 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian9 小时前
前端node常用配置
前端
华洛9 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq9 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A10 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常10 小时前
被EdgeToEdge适配折磨疯了,谁懂!
前端