当前位置: 首页 > article >正文

css前段知识点分享

1. 什么是css?

 

层叠样式  结构化文档添加样式的计算机语言,CSS 文件扩展名为 .css。

 

2. 为什么把 CSS 的 link 标签放在 head 标签之间?

 

将CSS link标签放在head之间有助于确保页面正确的加载顺序 

 

 

 

3. css引入方式有几种?有什么区别?

 

内联方式在 HTML 中的 style 属性中添加 CSS。

 

链接方式在HTML 头部的标签引入外部的 CSS 文件。

 

嵌入方式在 HTML 头部中的 style标签下写 CSS 代码。

 

 

 

 

 

4. css选择器有几种?选择器的优先级是怎样的?

 

  ID选择器  类选择器  标签选择器    通配符选择器 组合选择器  继承选择器

 

伪类选择器

 

选择器的优选级:

 

important >ID选择器 > 类选择器 > 标签选择器> 通配符选择器 > 继承选择器

 

5. 行内,块状,行内块元素之间如何进行转换?

 

对display进行修改 

 

块级元素转行内元素: display:inline

 

行内元素转块级元素:display:block

 

行内元素转行内块元素:display:inline-block

 

6. 行内块元素之间的间隙怎么去除?

 

1.取消标签间的空格       

 

2.取消标签闭合

 

3.字体大小设置为 0

 

4.使用负数的外边距和边框

 

7. 定位有几种,他们的特点分别是什么?是相对于什么进行定位的?

 

fixed  固定 相对于浏览器窗口固定。

 

sticky 粘性用户的滚动位置来定位。

 

static 静态  HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

 

relative 相对相对定位元素的定位是相对其正常位置。

 

absolute 绝对绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>;

 

 

 

 

 

8. 如何将一个元素,固定到网页的底部?

 

position:fixed  将元素的定位方式设置为固定定位

 

Bottom:0; 将元素的底部与浏览器窗口底部对齐

 

Width:100%;将元素宽设为100水平方向填满窗口

 

 

 

9. 请列举几种隐藏元素的方法 ?(至少三种)

 

display:none; 

 

元素会变得不可见 而且不会占用空间

 

Visibility:hidden;  简单隐藏某个元素 但空间还在

 

Overflow:hidden; 溢出隐藏

 

 

 

 

 

10. 如何使用css将多出范围的字变为...?

 

 

 

text-overflow: ellipsis;(诶李破赛zi) //将文本溢出显示为(…)

 

white-space: nowrap; //强制显示为一行

 

overflow: hidden;//溢出隐藏

 

 

 

11. 有哪几种方法可以使html元素脱离文本流? 

 

float浮动  absolute 绝对定位  fixed  固定定位

 

12. CSS中哪些属性可以继承?

 

以下是一些常见的CSS属性,它们可以继承:

 

 

 

字体属性(font)

 

文本属性(text)

 

颜色属性(color)

 

列表属性(list)

 

表格布局(table-layout)

 

元素可见性(visibility)

 

 

 

 

 

12. width: auto 和 width: 100% 的区别?

 

1.width:auto

 

auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度

 

2.width:100%

 

100%子元素的宽度和父元素的宽度相等,并不包括子元素内外边距和边框的值,

 

14. 说一下你对 box-sizing 属性的了解

 

盒模型中的内边距与边框也是有尺寸的,为避免其和页面布局产生影响,可使用box-sizing: border-box;设置盒模型,


http://www.kler.cn/a/294660.html

相关文章:

  • Ubuntu20.4系统编译瑞芯微RK3568 SDK
  • 【GPTs】MJ Prompt Creator:轻松生成创意Midjourney提示词
  • 【C++】 list 与 string 基础与实现字符串操作
  • 灵活就业,真的等同于失业吗?“三无人员”如何齐短板获贷款
  • Linux系统的网络设置
  • Selenium+Pytest自动化测试框架 ------ 禅道实战
  • pytest运行方式及前置后置封装详解
  • Docker 进阶构建:镜像、网络与仓库管理
  • mariadb容器
  • 8阶段项目:五子棋(附带源码)
  • 服务器数据恢复—infortrend存储中RAID6数据恢复案例
  • 资料分析系统课-刘文超老师
  • ​T​P​三​面​
  • SIGMOD-24概览Part7: Industry Session (Graph Data Management)
  • Wni11 下 WSL 安装 CentOS
  • Datawhale X 李宏毅苹果书 AI夏令营-深度学习进阶task3:批量归一化
  • 牛客小白月赛100(A,B,C,D,E,F三元环计数)
  • 【手撕数据结构】二叉树的性质
  • 香橙派修改MAC
  • 【代码随想录训练营第42期 Day48打卡 - 单调栈 - LeetCode 739. 每日温度 496.下一个更大元素 I 503.下一个更大元素II
  • VitePress 自定义主题:打造专属文档网站
  • 了解elementUI的底层源码, 进行二次开发
  • 云服务器内网穿透连接云手机配置ALAS
  • OpenCV图像分割教程
  • P11019 「LAOI-6」[太阳]] 请使用最新版手机 QQ 体验新功能
  • 基于Spring的规则引擎EasyRule应用