HTML+CSS面试整理

最新推荐文章于 2024-10-03 10:42:46 发布

qq_46037802

最新推荐文章于 2024-10-03 10:42:46 发布

阅读量153

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_46037802/article/details/127247979

版权

对canvans了解多少

Canvas，它是画布
Canvas元素用于在网页上绘制2D图形和图像

Canvas使用的场景有：1，动画；2，H5游戏；3，图表。

说一说样式优先级的规则是什么？

！important>行内>id选择器>class、伪类、属性>伪元素、标签>通配符

页面导入样式时，使用 link 和@import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

HTML5变化

新的语义化元素

header footer nav main article section

删除了一些纯样式的标签

哪些元素可以自闭合？
- 表单元素 input
- img
- br, hr
- meta, link
  
  浮动
  
  从三个方面回答：1、浮动的作用：常用于图片，可以实现文字环绕图片。2、浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。3、解决塌陷问题：流行用法：父元素中添加overflow:hidden、给父元素添加高度、建立空白标签
  
  添加clear、或者在父级添加伪元素::after{content:'',clear:both,display:table}。
  
  水平垂直居中的方法
  
  方法一:利用定位
```
.parent {
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            /* 父盒子开启相对定位 */
            position: relative;
        }
.child {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* 父盒子开启绝对定位 */
        position: absolute;
 
        top: 50%;
        /* 相当于父盒子上边界走父盒子高度的50% */
        left: 50%;
        /*相对于父盒子左边界走父盒子宽度的50%*/
        margin-top: -100px;
        /*向上走回自身高度的一半*/
        margin-left: -100px;
        }
```

方法二 :利用margin:auto



- [ ] > 1.    /* 父盒子设置相对定位 */
  >            .parent {
  >                width: 500px;
  >                height: 500px;
  >                border: 1px solid #000;
  >                position: relative;
  >            }
  >            /* 子盒子设置绝对定位，将top，left，right，bottom设置为0 设置margin为auto  通过计算所得，能实现垂直居中。 */
  >            .child {
  >                width: 100px;
  >                height: 100px;
  >                border: 1px solid #999;
  >                position: absolute;
  >                margin: auto;
  >                top: 0;
  >                left: 0;
  >                right: 0;
  >                bottom: 0;
  >            }

方法三:利用display:table-cell

.parent { width: 500px; height: 500px; background-color: blanchedalmond; /* 会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果 */ display: table-cell; / vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。/ vertical-align: middle; / text-align运用在块级元素中，使其中的文本对齐。事实上这句话的意思是运用在块级元素中text-align会使其包含行内元素对齐。/ text-align: center; } .child { width: 200px; height: 200px; background-color: aqua; display: inline-block; }

方法四:利用display:flex

    .parent {
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 从轴居中 */
            align-items: center;
        }
   .child {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

  .parent {
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
            /*父盒子添加边边框,防止外边距塌陷*/
            border: 1px solid transparent;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-top: 150px;
            margin-left: 150px;

方法六: 利用transform(变换)实现居中

.parent {
        width: 500px;
        height: 500px;
        background-color: blanchedalmond;
        position: relative;
    }
 
    .child {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        margin: auto;
        top: 50%;
        left: 50%;
        /* translate中的%百分比相对的是自身的 也就是向左向上走自身的%50来实现居中效果 */
        transform: translate(-50%, -50%);
        }

Flex布局

flex-direction：是沿着主轴的排列布局，默认是水平向右

row:默认水平向右
row-reverse:水平向左
column:垂直向下
column-reverse：垂直向上

flex-wrap：伸缩盒子是否卷起

nowrap：不卷起，挤在一行 wrap：卷起，多出来的开始排列在第二行 wrap-reverse：wrap反方向卷起

justify-content

如何分配主轴上的空白空间

可选值

flex-start 元素按照主轴起边排列

flex-end 元素按照主轴终边排列

center 元素居中排列

space-around 空白分布到元素两侧

space-between 空白分布到元素中间

space-evenly 空白分布到元素单侧

align-items :

元素在辅轴上如何对齐

元素间的关系

可选值:

stretch 默认值，将元素的长度设置为相同的值

flex-start 元素不会拉伸，沿着辅轴起边对齐

flex-end 沿着辅轴的终边对齐

center 居中对齐

baseline 基线对齐

align-content 辅轴空白空间的分布

可选值

flex-start 元素按照主轴起边排列

flex-end 元素按照主轴终边排列

center 元素居中排列

space-around 空白分布到元素两侧

space-between 空白分布到元素中间

space-evenly 空白分布到元素单侧 */

两栏布局：即左侧固定 + 右侧自适应布局

三栏布局的实现方式

1、利用浮动

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
.left {
  float: left;
  width: 300px;
  height: 400px;
  background-color: limegreen;
}

.right {
  float: right;
  width: 200px;
  height: 400px;
  background-color: yellowgreen;
}

.center {
  height: 400px;
  margin: 0 200px 0 300px;
  background-color: tomato;
}

2.绝对定位

.wrapper {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  top: 0;

  width: 300px;
  height: 500px;

  background-color: lightgreen;
}

.right {
  position: absolute;
  right: 0;
  top: 0;

  width: 200px;
  height: 500px;

  background-color: lightskyblue;
}

.center {
  height: 500px;
  margin: 0 200px 0 300px;
  background-color: tomato;
}

3、利用 flex 布局

.wrapper {
  display: flex;
  height: 500px;
}

.center {
  order: 1;
  flex-grow: 1;
  background-color: tomato;
}

.left {
  width: 300px;
  height: 500px;
  background-color: lightgreen;
}

.right {
  order: 2;
  width: 200px;
  height: 500px;
  background-color: lightskyblue;
}

4.圣杯布局**