css前段知识点分享

ops/2024/12/22 12:51:12/

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.ppmy.cn/ops/107436.html

相关文章

文件包含PHP伪协议利用方法

首先我们需要把配置文件php.ini 在 php.ini ⾥有两个重要的参数 allow_url_fopen 、allow_url_include&#xff1b; allow_url_fopen:默认值是 ON。允许 url ⾥的封装协议访问⽂件&#xff1b; allow_url_include:默认值是 OFF。不允许包含 url ⾥的封装协议包含⽂件&#x…

CTF 竞赛密码学方向学习路径规划

目录 计算机科学基础计算机科学概念的引入、兴趣的引导开发环境的配置与常用工具的安装Watt Toolkit&#xff08;Steam&#xff09;、机场代理Scoop&#xff08;Windows 用户可选&#xff09;常用 Python 库SageMathLinux小工具 yafuOpenSSL Markdown编程基础Python其他编程语言…

李沐在上海交通大学的演讲回顾:大语言模型的现状与未来

引言 近日&#xff0c;知名人工智能专家李沐回到了母校上海交通大学&#xff0c;并进行了题为“大语言模型的现状和未来”的演讲。这次演讲不仅回顾了大语言模型的发展现状&#xff0c;还分享了李沐在创业过程中积累的经验与见解。本文将对李沐的演讲内容进行全面梳理&#xf…

目标检测-YOLOv8

YOLOv8 YOLOv8 是 YOLO 系列的最新版本&#xff0c;它在 YOLOv7 的基础上进行了多项改进&#xff0c;主要侧重于进一步提升推理速度、检测精度以及模型的通用性。与之前版本相比&#xff0c;YOLOv8 引入了新的技术和优化策略&#xff0c;使其在多个方面更具优势。 相比 YOLOv…

【Python123题库】#研究生录取数据分析A #图书数据分析(A)

禁止转载&#xff0c;原文&#xff1a;https://blog.csdn.net/qq_45801887/article/details/140082198 参考教程&#xff1a;B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 研究生录取数据分析A图书数据分析&#xff08;A&…

和服务端系统的通信

首先web网站 前端浏览器 和 后端系统 是通过HTTP协议进行通信的 同步请求&异步请求&#xff1a; 同步请求&#xff1a;可以从浏览器中直接获取的&#xff08;HTML/CSS/JS这样的静态文件资源)&#xff0c;这种获取请求的http称为同步请求 异步请求&#xff1a;js代码需要到服…

最新车型库大全|阿里云实现调用API接口

整体请求流程&#xff1a; 介绍&#xff1a; 本次解析通过阿里云云市场的云服务来实现查询车型库大全查询&#xff0c;首先需要选择一家可以提供查询的商品。 [探数API]车型库查询_API专区_云市场-阿里云 步骤1: 选择商品 如图点击免费试用&#xff0c;即可免费申请该接口数…

【2024高教社杯全国大学生数学建模竞赛】B题模型建立求解

目录 1问题重述1.1问题背景1.2研究意义1.3具体问题 2总体分析3模型假设4符号说明&#xff08;等四问全部更新完再写&#xff09;5模型的建立与求解5.1问题一模型的建立与求解5.1.1问题的具体分析5.1.2模型的准备 目前B题第一问的详细求解过程以及对应论文部分已经完成&#xff…