CSS基础、重点和难点

最新推荐文章于 2024-03-29 09:39:27 发布

林剑河

最新推荐文章于 2024-03-29 09:39:27 发布

阅读量684

点赞数 2

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/ljhljh1/article/details/106141069

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、css基础

1. 样式层叠优先级：内联>内部样式表>外部样式表>默认值

2. 选择器优先级：!important>内联>id选择器>伪类>类选择器>标签选择器>通用选择器*（!important要写在分号的前面）

3. 外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">

4. 内部样式表：<style type="text/css"> p {margin-left:20px;} </style>

5. css注释：/* xxx */

6. css选择器：

id选择器：#xxx

class选择器：.xxx

分组选择器：h，p，#xxx{}

后代选择器：.aaa p{}（aaa下的所有p标签，包括孙子元素）

子元素选择器：.aaa > p{}（aaa下的子p标签）

相邻兄弟选择器：.aaa + p{}（aaa后的第一个兄弟元素）

普通相邻兄弟选择器：.aaa ~ p{}（aaa后的所有兄弟元素）

7. 常用伪类：:first-child，:hover，nth-child(n)，:checked

8. 常用伪元素：::before，::after，

9. background属性简写：background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-color 使用的背景颜色，background-image 使用的背景图像。

background-repeat 如何重复背景图像，background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-position 背景图像的位置，background-size 背景图片的尺寸。

background-origin 背景图片的定位区域，background-clip 背景的绘制区域。

10. text-indent：首行缩进

11. word-wrap：break-all，换行

12. text-shadow(box-shadow)： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

13. a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

14. border-collapse: collapse;把table的边框变成一条线

15. 盒子模型：box-sizing默认是content-box，ie模型是border-box

标准盒模型：盒子总宽度=width(content)+padding+border+margin

IE盒模型：盒子总宽度=width(content+padding+border)+margin

16. visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用未隐藏之前一样的空间。该元素虽被隐藏，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不占用空间，该元素不但被隐藏，原本占用的空间会从页面布局中消失。

17. 定位：position，z-index解决重叠问题

static：默认

fixed：相对于浏览器窗口是固定位置，脱离文档流，会和其他元素重叠

relative：相对其正常位置，原本所占的空间不会改变，会和其他元素发生重叠，常用做absolute定位的父容器

absolute：相对于最近的已定位父元素，脱离文档流，和其他元素重叠

18. 媒体查询（不同屏幕大小的样式，用于兼容）：@media screen and (min-width: 480px) {}或者<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

需要声明<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

19. 可继承样式：font-size, font-family, color，不可继承样式：border, padding, margin, width, height

20. object-fit: cover;头像裁剪和居中

21. 上下居中：

①文字上下居中：height: 20px;line-height: 20px;

②用定位：position: relative;top: 50%;transform: translateY(-50%);

③用弹性布局：父元素display:flex;align-items: center; (垂直居中)

22. 水平居中：

①文字水平居中：text-align: center;

②用定位：position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);上下水平居中

③用弹性布局：父元素display:flex;justify-content: center; (水平居中)

23. 获取所有选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/css.css" />    
        <style>
        .css01{
            background-image: url(img/01.png);
        }
        </style>
        <script>
        // 无论link还是<style></style>，从前往后依次是0，1，2……
        alert(document.styleSheets[0].rules[0].style.backgroundImage);
        alert(document.styleSheets[1].rules[0].style.backgroundImage);
        </script>
    </head>

    <body>
        <input type="file" id="inputFile" onchange="GetFilePath()" />
    </body>
</html>

二、面试问题

1. 用css创建三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

2. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。

firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

3. 对BFC规范(块级格式化上下文：block formatting context)的理解：

① BFC规定了内部的Block Box如何布局。定位方案：

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边，与包含块border box的左边相接触。

BFC的区域不会与float box重叠。

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也会参与计算。

②满足下列条件之一就可触发BFC

根元素，即html

float的值不为none（默认）

overflow的值不为visible（默认）

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

4. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
① 浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素（内联元素）会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

② 清除浮动的方式：

父级div定义height

最后一个浮动元素后加空div标签并添加样式clear:both。

包含浮动元素的父标签添加样式overflow为hidden或auto。

父级div定义zoom

5. 浏览器解析CSS选择器：从右向左解析，第一步就可以筛选掉大部分的节点

6. style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE 下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

7. a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)，<p>里面不可以嵌套<div>、<h1>~<h6>

林剑河

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、重点和难点

1、css基础样式层叠优先级：内联>内部样式表>外部样式表>默认值选择器优先级：!important>内联>id选择器>伪类>类选择器>标签选择器>通用选择器* 外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css"> 内部样式表：<style type="text/css"> p {margin-left:20px;}
复制链接

扫一扫