来写一下css阶段测试

往底层挖矿
110 阅读14分钟

  1. 写出常用的 css 选择器 必须8个以上

    • 类选择器，通过.classname选择，改变样式
    • id选择器，通过#id选择，进行行为操作
    • 标签选择器，通过html标签进行选择，逗号分隔，选择多个标签设置相同样式
    • 后代选择器，通过空格分隔标签父级和后代
    • 属性选择器，通过[属性名="属性值"]选择
    • 通用选择器，*表示，设置全局样式
    • 兄弟选择器，通过+选择两个相邻兄弟标签
    • 父子选择器，div>p，选择div里面的p标签
    • 伪类选择器
      • a:link超链接并未被访问过
      • a:visited超链接已被访问过
      • a:active激活超链接
      • a:hover鼠标停留
      • a:focus元素获取焦点
    • 常用结构伪类选择器
      • E:fisrt-child
      • E:last-child
      • E:nth-child(n)
      • E:nth-last-child(n)
      • E:nth-of-type(n)
      • E:nth-last-of-type(n)
      • E:first-of-type
      • E:last-of-tye

  2. 谈谈什么是 css 的层叠性
    css层叠性首先会想到z-inedex属性，z-index的属性值为数字，属性值大的会压盖属性值小的元素，另外设置除了static属性值之外的position属性值，脱离文档流的元素会压盖标准流的元素。css层叠性还包括层叠上下文和层叠层级以及层叠的顺序 层叠上下文---position属性的设置为非static时和z-index属性时会产生层叠上下文，特殊的css3属性也opacity等也会产生层叠上下文，最大的层叠上下文是<html></html>的根层叠上下文 层叠层级---层叠层级的对比是在相同的层叠上下文中进行对比 Dlees0.png 层叠的顺序---层叠顺序指的是元素发生层叠时按照特定的顺序在z轴上垂直显示

  3. 谈谈什么是 css 的继承性
    css三大特性之继承性，即子元素继承父元素的特性，在css属性值中inherit关键字允许显示的声明继承性，all的简写属性可以一次性控制所有属性的继承all：revert。一般可继承颜色，文字，字体间距、行高和对齐方式

  4. 列出我们常用的 html 的空标签有哪些 空标签指的是单标签，没有闭合的标签，可以允许不成对的存在。如<br>,<img>,<input>,<link>

  5. 说说你对盒子模型的理解
    一个完整的盒子模型包括内容区域+内边距+边框+外边距组成，又分为标准盒子模型和怪异盒子模型

    • 标准盒子模型计算方式为内容的宽高+两侧内边距+两侧边框
    • 怪异盒子模型计算方式直接将高宽设置为整体尺寸，通过缩小内容区域来实现其它属性值的宽高设置

  6. margin 凹陷的原理分析
    问题一：垂直并列的上下两个box盒子，上盒子的下外边距和和下盒子的上外边距会出现重叠现象，选择两个盒子最大的外边距为准 问题二：父盒子嵌套子盒子，只为子盒子设置margin值，父盒子会跟着向下塌陷子盒子的设置的margin值 解决办法：border、overflow：hidden，padding，position：fixed，利用伪元素添加空元素

  7. 你所知道的清除浮动的方法

    • 使用空标签设置clear：both
    • 为父级添加伪元素
    .clearfix:after {
    content: '.';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
    • overflow：hidden

  8. position设置absolute对元素造成了什么影响 给元素设置position:absolute绝对定位，让元素脱离文档流，利用left，right，bottom，top与最近一个数值为非position:static的父级元素进行定位，并会层叠标准流的元素，可以通过设置z-index进行层次分级

  9. 什么是标准流？ 标准流指的是html标签元素在布局过程中按照从上往下，从左往右的方式进行排列，互相之间不会出现重叠的现象。通常标准流中会出现空白折叠现象，元素高度不齐，底边对齐，以及内容自动换行，标准流中的元素分为块级与行内元素，可通过display属性进行相互转换

  10. CSS优先级算法如何计算

    1. 外部样式>内部样式>内联样式
    2. 最接近元素的样式优先级越高 类名为 son 的 div 的 color 为 blue
    <div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div>
</div>
    1. 直接样式比选择器样式高 类名为 son 的 div 的 color 为 blue
    <div style="color: red">
   <div class="son" style="color: blue"></div>
</div>
    1. 根据选择器优先级计算 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 根据排序赋予每个选择器一个权值，值越大优先级越高
    2. 拥有!important属性是最高级，!important只对某条属性有效
    3. 优先级高的属性覆盖优先级低的属性，后写的属性会覆盖前面的属性，自己写的属性会覆盖浏览器的自带属性，前提是优先级要高

  11. 请说明文字行高属性的写法? 以及行高值与文字的关系怎么样的? line-height设置行高，每行文本都会形成一个行内盒子，line-height指定行盒子的高度，行高大于字体高度的时候就会形成上下均等半铅空的空白区域，把行高设置为字体大小是文字在行内盒子中呈现剧中效果

  12. 解释下面样式的意思? font: 14px/28px "宋体";
    14表示字体大小/28px设置行高，使用宋体样式，font简写在一个声明中设置所有的简写属性，设置顺序如下：

    • font-style
    • font-variant
    • font-weight
    • font-size/line-height
    • font-family

  13. 盒模型中设置div元素左外边距10像素,右外边距10像素；上外边距7像素,下外边距7像素,用两个值写出样式代码? margin：7px 10px 通常设置top bottom left right四个值的写法为：

    1. 四个值：上 右 下 左
    2. 三个值： 上 左右 下
    3. 两个值： 上下 左右
    4. 一个值：四个方向

  14. 如何利用外边距让div水平居中? 一般情况,上面div的下边距为10像素，下面div的上边距为7像素,两个元素实际距离是多少?，另一种情况,左面div右边距10像素,右面div左边距9像素,两个元素的实际距离又是多少? 给盒子设置宽度，样式设置为margin: 0 auto;上下div的因为外边距塌陷造成实际距离为10px，选两者最大的距离为实际外边距，假设左右两个div处在同一个盒子中，在标准流的实际距离为19px

  15. 行内元素与块级元素都有哪些区别?

    • 行业元素按从左往右水平方向一行排列，块级元素独占一行
    • 块级元素可以包含行内元素，行内元素包含文本和其他行内元素
    • 行内元素设置宽高无效，可以设置line-height，margin上下无效，padding上下无效
    • 行内元素和块级元素使用display转换

  16. 写出不同定位的属性名,以及它们的参考点? 通过position属性，可以设置4种不同类型的定位

    • static：默认值，作为文档流的一部分正常排列
    • relative：相对定位，参照自身位置进行偏移，保留原有位置的空间
    • absolute：绝对定位，参照最近的父级元素进行定位，脱离文档流
    • fixed：固定定位，参照可视浏览器窗口定位

  17. 写出H5表单中新添加的表单项类型(至少5个),以及像必填,占位,自动获焦,禁止,只读,最大长度等属性单词(至少5个)? 新增表单类型：

    • email（自动验证email格式）
    • url（自动验证url格式）
    • number（只能输入数字）
    • range（类似音量滑动条）
    • 日期时间类型（time/week/month/datatime等）
    • search类型（用于输入查询关键字）

    新增属性单词：

    • autofocus属性（可设置值为true（自动获取焦点）和false（不自动获取焦点）
    • pattern属性（用于设置正则表达式）
    • placeholder属性（文本占位符号，提示文本）
    • required属性（是否必要填写，属性值为true和false）
    • min、max 和 step 属性（min允许的最小输入值，max允许输入最大值，step合法输入的数字间隔
    • readonly="readonly"表单只读，disabled="disabled"表单禁用

  18. 写出10个伪类选择器,要求有英文同时有中文说明

    1. E:first-child 第一个子元素
    2. E:last-child 最后一个元素
    3. E:nth-child(n) 第n个
    4. E:nth-last-child(n)倒数第n个
    5. E:nth-child(odd)顺数是奇数的子元素
    6. E:nth-child(even)顺数是偶数的子元素
    7. E:nth-of-type(n)第n个同级兄弟元素E
    8. E:nth-child(an + b)n是从零开始的计数器，b是偏移值
    9. E:before 在E元素前插入一个元素
    10. E:after 在E元素后插入一个元素
    11. E:first-letter 选择到E容器内的第一个字母
    12. E:first-line 选择到E容器内的第一行文本

  19. 如何设置宽,高的具体计算方式? 并且说明怎样的设置具体代表什么 使用calc()计算宽高，例如width: calc(100% - 10px)；括号里面代表一个数学表达式，运算符前后都要留一个空格，任何长度值都可以使用calc()计算，使用标准的数学运算优先级规则，支持+，-，*，/

  20. 简述给元素设置动画的语法? 使用@keyframes规则用于创建动画 @keyframes 动画名称 { /*关键帧，也可以用百分比表示，动画可使用transform过渡实现*/ form {动画开始} to {动画结束} } 把动画捆绑到元素上 div { animation: 动画名称 5s(完成一次动画花费时间) linear(动画曲线，根据时间的运动速度) 2s(延迟2秒播放) 2(播放次数) alternate(轮流方向播放); }

  21. 什么是flex布局 flex布局是flexble box弹性盒子的意思，把设置flex属性的元素看作一个容器，容器中的所有子元素称为项目，容器存在水平主轴和垂直交叉轴。项目默认沿着水平主轴排列。通过设置垂直方向为主轴，可改变项目的排列方向

  22. 如何设置flex布局 .box{display: flex;} .box{display: inline-flex;}

  23. flex的父级容器属性

    • flex-direction属性决定主轴的方向
    • flex-wrap属性定义，如果一条轴线排不下，如何换行
    • justify-content属性定义了项目在主轴上的对齐方式
    • align-items属性属性定义项目在交叉轴上如何对齐
    • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

  24. flex的子级容器属性

    • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
    • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大,如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
    • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
    • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
    • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  25. 代码实现：flex实现内容宽度等分

//HTML代码：
    <div class="color_container">
        <div title="紫色" style="background-color: rgb(121, 56, 106);"></div>
        <div title="蓝色" style="background-color: rgb(57, 107, 179);"></div>
        <div title="绿色" style="background-color: rgb(152, 203, 104);"></div>
        <div title="黄色" style="background-color: rgb(251, 220, 4);"></div>
        <div title="橙色" style="background-color: rgb(243, 121, 32);"></div>
        <div title="红色" style="background-color: rgb(202, 33, 40);"></div>
    </div>

//css
<style>
.color_container {
    width: 100%;
    height: 22px;
    display: flex;
    flex-direction: row
}
.color_container>div{
    height: 22px;
    flex: 1;
}
</style>
  1. 代码实现：flex --- 左右布局，一侧定宽，一侧自适应撑满
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex;/*设为伸缩容器*/  
  flex-flow:row;/*伸缩项目单行排列*/  
}  
.stable{  
  width:200px;/*固定宽度*/  
  border:1px solid  #ccc;  
  margin:20px;  
}  
.change{  
  flex:1;/*这里设置为占比1，填充满剩余空间*/  
  border:1px solid #ff4400;  
  margin:20px;  
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定宽度200px</div>  
    <div class="change">changeable 可变宽度</div>  
  </div>  
</body>  
</html>
  1. 代码实现：flex --- 位置高度上下左右居中
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            *{
                margin: 0 ;
                padding: 0;
            }
        span{
            border: 1px solid #333;
        }
        div{
                display: flex;
                justify-content:center;/*x轴对齐方式*/
                align-items:center;     /*y轴对滴方式*/
                height: 100vh;        /**屏幕高度百分百*/
        }        
    </style>
</head>
<body>
    <div><span>内容所在区域</span></div>
</body>
</html>
  1. em、rem、meta标签的基本概念
  • em 相对长度单位 相对参照物为父元素的font-size em有继承性 没有设置font-size时, 浏览器会有一个默认的em设置
  • rem 相对参照物为根元素html, 相当于参照物固定不变比较好计算 没有设置font-size时, 浏览器有一个默认的rem 有兼容性问题, 并不是所有浏览器都支持rem, IE8及以下的浏览器都不支持
  • <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
    <meta> 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

  1. rem 和 em 的区别 rem和em都是相对单位，主要的区别是浏览器相对谁来转化px值，因为继承，em相对于父元素转化为px值，rem相对于根元素。

  2. rem实现适配的原理 rem实现原理就是把每个不同的屏幕划分为相同的份数，让同一个元素在不同的屏幕上占据相同的比例空间，1rem等于根元素html的font-size值

  3. rem布局的优点

    • 能等比例适配所有屏幕
    • 避免重复的代码
    • 有利于后期代码修改

  4. rem布局的缺点

    • 兼容性，在pc端rem对于ie9和ie10 的兼容性不是很好
    • 计算，每次pc端的页面变化都要重新计算大小

  5. 什么是媒体查询 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。媒体类型：all，print，screen，speech。逻辑操作符：and，not，only，逗号用于将多个媒体查询合并为一个规则

    //语法
@media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }

  6. 说一下你所了解的移动端Web页面适配方案有哪些

    • 百分比方案 使用 百分比% 定义 宽度，高度 用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。
    • rem方案 rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 的一种实现方式。
    • vh/vw方案 视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口 vw : 1vw 等于 视口宽度 的 1% vh : 1vh 等于 视口高度 的 **1% ** vmin : 选取 vw 和 vh 中 最小 的那个 vmax : 选取 vw 和 vh 中 最大 的那个
    • flex布局方案 Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
    • 基于媒体查询的响应式设计 响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。

  7. 请写明这行代码的含义<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> name="viewport"表示移动端视口 width=device-width宽度等于设备宽度 initial-scale=1.0初始的缩放比例 user-scalable=no用户是否可以放大缩小

avatar
文章
阅读
粉丝