HTML+CSS面试题集锦（二）

最新推荐文章于 2024-10-29 20:22:03 发布

玲玲酱

最新推荐文章于 2024-10-29 20:22:03 发布

阅读量1.4k

点赞数

分类专栏：面试题文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/110099734

版权

本文详细介绍了CSS中@import与link的区别、选择器的多种类型，包括基本选择器、层次选择器、结构伪类选择器和伪元素选择器。还讨论了CSS的盒子模型、浮动与清除浮动的方法、行内元素设置宽高的方式以及块级元素的居中策略。此外，文章涵盖了CSS3新特性、BFC概念、浏览器兼容性和性能优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分

@import和link的区别

1）所属范围：
@import是css语法，只能导入样式
link是html的标签，不仅可以加载样式，还可以定义rel属性
rel =''stylesheet''表示调用外部样式表
2）加载顺序：
页面加载的时候，link标签引入的css被同时加载
@import引入的css在页面加载完毕后再被加载
3）兼容性：
@import 需要兼容IE5+
link标签，不存在兼容性问题

css在html中的应用

1）行内样式（存在于标签之中，用style属性设置）

<p style="color:red">这是行内样式<p>

2）嵌入样式（也称内联样式，存在于title标签下的style标签中）

<style type="text/css">
     p{
         color:red;
     }
</style>

3）外部样式（也称外联样式，存在于一个外部文件中）

<link rel="stylesheet" href="css文件名.css">

优先级：!important > 行内样式 > id > class > 标签 > 通配符 > 继承 > 默认

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="CSS文件.css">
   
    <style type="text/css">
        p{
            color: red;
        }
 
        #content{
            color: blue;
        }
 
        .content{
            color: yellow !important;
        }
    </style> 
</head>
<body>
     <p class="content" id="content" style="color:pink">这是行内样式</p>
</body>
</html>

这段代码目前显示为黄色，将!important内容注释后，会显示粉色（设置的行内样式颜色）

选择器有哪几种

一、基本选择器

1）通配符选择器

书写格式：* {声明块}；

功能：所有标签都应用其样式，在消除默认的样式时可以更加方便

*{
     padding:0px;
     margin:0px;
  }

2）元素选择器
书写格式：标记名{声明块}

p{
   color:red;
}

<p>这是p标签</p>

3）类选择器
书写格式：.类名{声明块}

类选择器的规范：
a：点号开始
b：包含字母，数字，下划线，连字符（减号）
c：点后面必须是字母
d:大小写敏感（区分大小写）

4）ID选择器（最好预留给JS用）
书写格式：#ID名{声明块}
特点：名字唯一（即身份证号）

5）组合选择器、并集选择器
书写格式：元素名，ID名，类名{声明块}
没有顺序要求
二、层次选择器

1：子类选择器

书写格式：父元素A>子元素B{声明块}

article>section{
    color:gray;
}

2: 后代选择器
书写格式：祖先元素A+“空格”+后代元素B+ {声明块}

article p{
    color:slateblue;
}

3:兄弟选择器
书写格式：兄弟元素A+"+"+兄弟元素B{声明块}
注：AB之间不能有其他的元素

h1+p{
    color:blue;
}

4:通用选择器
书写格式：兄弟元素A+"~"+兄弟元素B{声明块}
选中的是A元素后面的所有兄弟元素

h1~p{
    color:yellowgreen;
}

三、结构伪类选择器

1;选中某些（0到多个）元素
书写格式：元素A:nth-child(n)

header>nav:nth-child(5){
    color:hotpink;
}

2:选中第一个元素
书写格式：元素A:first-child{}

header>nav:first-child{
    color:goldenrod;
}

3:选中最后一个元素
书写格式：元素A:last-child{}

nav:last-child{
    color:goldenrod;
}

最低0.47元/天解锁文章