css面试笔记小结

CSS面试笔记

CSS面试文档题

说一下css盒模型

1. css盒模型包括标准模型和IE盒模型
2. 两个都包含content/padding/border/margin
   1. 区别是IE盒模型的width表示content+padding+border
   2. 标准盒模型的width只包含content

画一条0.5px的线

1. 给容器设置伪元素，设置绝对定位，宽高是200% ，边框是1px

div{
	background:black;//一定是background而非color
	width:100%;
	height:1px;
	transform:scaleY(0.5)
}

2. 利用线性渐变，一半有颜色，一般透明

link 标签和import标签的区别

1. link属于html标签，而@import是css提供的
2. 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
3. link是html标签，，因此没有兼容性，而@import只有IE5以上才能识别
4. link方式样式的权重高于@import

    <!-- CSS外部引用方式1 -->
    <link rel="stylesheet" type="text/css" href="CSS/028-外部样式表.css"/>
    
    <!-- CSS外部引用方式2 -->
    <!-- 
         <style type="text/css">
         @import url("css文件的路径");
         </style>
     -->

? transtion和animation的区别

1. nimation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
2. 区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from … to，而 animation可以一帧一帧的

说一下块元素和行元素

1. 块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度
2. 行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin会失效

position 属性 比较

1. 固定定位 fixed:元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
2. 相对定位 relative:如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3. 绝对定位 absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
4. 粘性定位 sticky:元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
5. 默认定位 Static:默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）。inherit: 规定应该从父元素继承 position 属性的值

浮动清除

1. 方法一：使用带 clear 属性的空元素在浮动元素后使用一个空元素如
   ，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
   或<hr class="clear" />来进行清理。
2. 方法二：使用 CSS 的 overflow 属性给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3. 方法三：给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
4. 方法四：使用邻接元素处理什么都不做，给浮动元素后面的元素添加 clear 属性。
5. 方法五：使用 CSS 的:after 伪元素结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮

css3新特性

CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size，background-origin 等；CSS3 2D，3D 转换如 transform 等

怎么样让一个元素消失

1. display:none;
2. visibility:hidden;
3. opacity: 0; 等

如何实现元素的垂直居中

1. 法一：父元素 display:flex,align-items:center;
2. 法二：元素绝对定位，top:50%，margin-top：-（高度/2）
3. 法三：高度不确定用 transform：translateY（-50%）
4. 法四：父元素 table 布局，子元素设置vertical-align:center

? display：table 和本身的 table 有什么区别

1. Display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致的语义化问题。之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table的嵌套性太多，没有 div 简洁

用的最多的 css 属性是啥

用的目前来说最多的是 flex 属性，灵活但是兼容性方面不强

设置一个元素的背景颜色，背景颜色会填充哪些区域

background-color 设置的背景颜色会填充元素的 content、padding、border 区域

? 知道属性选择器和伪类选择器的优先级吗

属性选择器和伪类选择器优先级相同

HTML和CSS笔记

css样式有哪些？

css样式有外部样式、内部样式、行内样式。优先级 外<内<行

link和import的区别

上面有

标签选择器

class="aa"
id="ss"

伪类选择

1. a:link{属性：属性值；}-访问之前-超链接的初始状态
2. a:visited{属性：属性值；}-访问后-超链接被访问后的状态
3. a:hover{属性：属性值；}-鼠标悬停-即鼠标划过超链接时的状态
4. a:active{属性：属性值；}超链接被激活的状态，即鼠标按键按下时超链接的状态
5. 使用顺序是link - hover - active - visited。必须按照隔着顺序

选择器的权重

行内样式>id>class

文字属性

名称	作用
font-size：	大小
font-family：	字体
color：	颜色
font-weight：	bolder(更粗的)、bold（加粗）、normal（常规）、lighter(细)
font-style：	倾斜–italic（倾斜字）、obliqque（更倾斜的字体）、normal(常规显示)
text-align：	文本水平对齐 left/right/center/justify(水平两端对齐，最多只对多行起作用)

列表属性

名称	作用	用法
list-style-type:	定义列表符合样式	disc(实心圆)/circle(空心圆)/square(实心方块) /none(去掉符号)
list-style-image:	将图片设置为列表符合样式	url();
list-style-position:	设置列表项标记的放置位置	outside列表的外面(默认值)/inside列表里面
list-style :	简写	none去除列表符号

背景属性

名称	作用	用法
background-color	背景颜色	red…
background-image	背景图片	url()
background-repeat	背景图片的平铺	no-repeat不平铺/repeat平铺/repeat-x（x轴平铺）/repeat-y（y轴平铺）
background-position	背景图片的定位	水平位置 垂直位置；可以给负值
background-attachment	背景图片的固定	scroll(滚动)/fixed(固定)

浮动元素-float

浮动属性float: left right none。
作用1：定义网页中其它文本如何环绕该元素显示
作用2：让竖着的东西横着来
浮动挡不住文字

清除浮动-clear

1. 使用clear属性清除浮动： clear:none/right/left/both
2. overflow: hidden;

.aa{
    height: 200px;
}

盒子模型

padding：内边距, 背景色延伸
border：边框, 背景色延伸
margin：外边框, 背景色不延伸

1. 2个值：上下，左右
2. 3个值：上，左右，下
3. 4个值：上，右，下，左：顺时针方向

盒模型外边距特性-float

1. 兄弟关系：关于浮动float，浮动就是漂浮到另一个层面上，没有上设置浮动的就接着原来的陈列
2. 浮动的时候垂直方向：外边距取最大值
3. 水平方向：外边距进行合并处理，相加
4. 父子关系：
   1. 如果父盒子没有外边框，在垂直方向上：子盒子和父盒子都可以控制盒子的整体移动。在水平方向上个自控制
   2. 如果父盒子有外边框，则父子移动相互独立

溢出属性-overflow

容器的溢出属性：overflow

1. visible:默认值，溢出内容会显示在元素之外
2. hidden:溢出内容隐藏 (常用)
3. scroll：滚动，溢出的内容以滚动的方式显示
4. auto：（常用）如果有溢出会添加滚动条，没有溢出正常显示
5. inherit:规定应该遵从父元素继承overflow属性的值
6. overflow-x:x轴溢出(xy连在一起用)
7. overflow-y:y轴溢出

元素显示类型-display属性

1. 块元素特点：
   1. 独占一行，自上而下排列
   2. 可以直接添加宽高
   3. 一般情况下作为其他元素的容器
   4. div p ul li ol li dt dd h1-h6等
2. 内行元素：
   1. 行内元素一出生就带有display属性（只占有字的那部分）
   2. 不能直接添加宽高，大小是由内容撑开

display属性

1. display:block;
   1. 作用：将元素转成块状元素，拥有块状元素特点。
   2. 补充：大部分块状元素，默认的display的值都是block;
2. display:inline;
   1. 作用：将元素转成内联元素，拥有内联元素的特点。
   2. 补充：大部分内联元素，默认的display的值inline;
3. display:none;
   1. 作用：将当前隐藏，并不占据空间。
4. display:inlink-block;
   1. 同时具备内联元素和块状元素的特点
   2. 例如:img input等
5. display:flex;
   1. 弹性布局
   2. 行内元素变成块元素，可以设置宽和高
   3. 只有一个元素的时候，margin: auto; 自动居中

定位的属性-position

position:属性;
使用方法是：写完属性后就确定了是什么定位，然后再下面写具体位置，通过top/left/right/bottom来确定位置，例如top:100px;left:100px;

语法	说明	文档流	偏移位置(top/left/right/bottom)
position:static;	默认值	默认	默认 (不能用上面四个方向) 下面四个都需要设置上面的四个位置关系
position:absolute;	绝对定位	脱离	a:当没有父元素后者父元素没有定位，参照物是浏览器窗口的第一屏.b:有父元素且父元素有定位，父元素
position:relative;	相对定位	不脱离	自己的初始位置
position:fixed	固定定位	脱离	浏览器当前窗口,固定在某个位置不动
position:sticky	粘性定位		可以做吸顶效果，粘性定定位是css3.0新增加的，兼容不好

注意，一般父盒子是相对定位，子盒子是绝对定位，因为相对定位是相对于自身，绝对定位是相对于屏幕

制作三角形型

1. 方法一：设置宽高都为0。然后把边框设置为一边有颜色，其他三遍透明
2. 方法二：设置border:20px solid transparent;然后再设置border-top:20px solid red;

层级-z-index

层级，配合着position定位使用 越大越靠上显示，也可以设置负值。z-index: 3;
注意：在父子关系中层级关系失效，如果需要，一般在子盒子上设置z-index：负数。兄弟关系可以没有影响

锚点

锚点作用：页面不同区域的跳转，使用a链接

 <ul>
        <li>
           <a href="#1"> 京东秒杀</a>
        </li>
        <li><a href="#2">双11</a></li>
        <li><a href="#3">频道优选</a></li>
    </ul>
    <div id="1">
        京东秒杀
    </div>
    <div id="2">
        双11
    </div>
    <div id="3">
        频道优选
    </div>

精灵图

精灵图是一种网页背景图片的处理方式 它将多个零星的背景图像都集中到一张大图中去，然后用这张大图应用于网页，这样 当用户访问网页时 就只需向服务器请求一次，然后通过改变背景图片的位置来显示你所需要的那个小图片
图片的定位使用background-position:-** -**。定位的位置是负值是因为图片动，所以才是负值。

宽高自适应

1. auto和100%区别：
   1. auto是在屏幕内操作，如果有边框，则内部的content缩小，边框不会超出屏幕,会自动适应屏幕。
   2. 100%指的的content+padding，如果添加border就会超出屏幕

伪元素-::

1. div::first-letter，对文本首字母操作
2. div::first-line，对文本第一行操作
3. div::before，对文本前操作
4. div::after，对文本后操作

窗口自适应

窗口自适应就是为了设置高度占满全屏，只需要在html,body中设置样式为和hight:100%就行

html,bady{
  height:100%
}

calc(** - **) 用于动态计算，加减乘前后都要有空格

表单

<input type="radio" name="a" checked>表单，需要设置不同的name，这样才能进行单元，

1. checked表示默认
2. disabled禁用功能
3. readonly只读功能
   <input type="checkbox" name="a" id="1">表示多选框，相同的name为一组，但是同一组的id不能相同

 <!-- select支持的属性
                1.size 显示出来几个选项。默认size的值为1
                2.multiple 多选，需要按住crul或者shift键

             option  支持的属性
                1.value 提供给后端需要用的value值
                2.selected 默认选中
        -->
        <select size="3" multiple>
            <option value="liaoning" selected>辽宁</option>
            <option value="henan">河南</option>
            <option value="yunnan">云南</option>
            <option value="shandong">山东</option>
        </select>

H5新增元素

H5新增语义化标签

语义化标签

1. section 中间栏 表示页面中的一个内容区块
2. article 独立块 表示一块与上下文无关的独立的内容
3. aside 侧边栏 在article内容相关的辅助信息
4. header 标题栏 表示页面中一个内容区块或整个页面的标题
5. footer 底部栏 表示页面中一个内容区块或整个页面的脚注
6. nav 导航栏 表示页面中导航链接部分
7. figure 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或者最后一个子元素的位置）
8. main 表示页面中的主要的内容（ie不兼容）

音频视频标签

    <h1>音频</h1>
    <!-- controls：音频控制栏
         loop：循环
         autoplay:自动播放    
         muted：静音播放
         当有静音的时候就会自动播放，否则第一次进入的时候有autoplay不会自动播放
    -->
    <audio src="../jiejie.wav" controls></audio>

    <!-- controls：音频控制栏
         loop：循环   
         muted：静音播放
        
    -->

    <!-- poster海报：视频封面图片 -->
    <video src="../图片/104/movie.mp4" controls  poster="../图片/104/poster.jpg"></video>
    

增强表单

1. Type=“color” 生成一个颜色选择表单
2. tel 换气拨号盘表单
3. search 产生一个搜索意义的表单
4. range 产生一个滑动条表单
5. number 产生一个数值表单
6. email 限制用户必须输入email类型
7. url 限制用户必须输入url类型
8. date 限制用户必须输入日期
9. month 限制用户必须输入月类型
10. week 限制用户必须输入周类型
11. time 限制用户必须输入时间类型
12. datetime-local 选择本地时间

css3层级选择器

 /* 子代选择器 */
        .box>li{
            border: 1px solid yellow;
        }

        /* +：表示当前元素的后面的第一个兄弟元素，只能往后查找 */
        .child+li{
            background-color: yellow;
        }

        /* ~；表示当前元素的后面所有的亲兄弟 */
        .child~li{
            background-color: red;
        }
        

属性选择器

    /* 属性选择器 */
        /* []表示只要有括号里面的属性的都会被选择出来 */
        [class]{
            background-color: yellow;
        }
        div[class]{
            background: red;
        }
        div[class=box1]{
            border: 3px solid green;
        }
        /* ~=：只要是包含box1就会显示下面效果
        <div class="box1 box3">555</div>
         */
        div[class~=box1]{
            border: 3px solid green;
        }
        /* 模糊匹配
            class^="b"或者不带双引号都可以
            class^="b" 以某个字符开头的
            class$="b" 以某个字符结尾的
            class*="b" 包含某个字符
        */
        div[class*="1"],p[class*="1"]{
            background: pink;
        }

伪类选择器

1. div:last-child
2. li:nth-child(2)通过指定数字进行设置第几个
3. div:target：目标伪类选择器
4. UI伪类选择器
   1. input:enabled。非禁用状态（用于form表单中）
   2. input:disabled。禁用状态（用于form表单中）
   3. input:focus。focus焦点：会匹配此选择器（用于form表单中）
5. 否定伪类选择器
   1. li:not(:first-child)。否定伪类选择器 :not()

阴影

1. 文本阴影
   1. text-shadow: 10px 10px 3px yellow , 10px -10px 2px red;
   2. 阴影 text-shadow: 水平方向位移 垂直方向位移 模糊程度 颜色 写多个阴影的时候只需要用“，”隔开就行
2. 盒子阴影
   1. box-shadow:水平方向位移 垂直方向位移 (阴影大小) 模糊程度 颜色 (内 inset 或外阴影。默认外阴影)

弹性盒-display:flex

1. display:flex;
2. flex-direction: column;修改主轴为竖直排列
   1. row;主轴为水平排列
   2. row-reverse；主轴水平反向排列
   3. column-reverse;主轴垂直方向反向排列
3. justify-content:调整主轴对齐方向
   1. flex-start 左对齐
   2. center 居中对齐
   3. flex-end 右对齐
   4. space-between 两端对齐
   5. space-around 距离环绕
4. align-items:调整侧轴对齐方向。同上
5. flex-wrap: wrap;折行显示 如果没有折行显示，使用 display: flex;就会在一行里面显示
6. align-content:行间距。属性同上

怪异盒模型-box-sizing

1. box-sizing:content-box;标准盒模型 width:content
2. box-sizing: border-box;怪异盒模型 width=content+padding+border

移动端布局

css像素:设备的独立像素。物理分辨率:设备真正的像素。设备像素比=物理像素/css像素

响应式布局

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验

@media screen and (min-width:1000){
            body{
                background: yellow;
            }
        }
        @media screen and (max-width:1000px) and (min-width:500px){
            body{
                background-color: red;
            }
    /* 竖屏检测：当屏幕的宽小于高的时候就会切换  */
            /*orientation:portrait 竖屏
                     ：landscope横屏 */
        @media screen and (orientation:portrait){
            div{
                width: 33.33%;
            }
        }

rem/rm/px

1. px:50px
2. em:相对单位，相对于父元素的字体大小
3. rem:相对单位，相对于根元素（html）字体大小

// 动态计算的作用就是为了适配不同的手机屏幕，这里的375指的是当前手机的尺寸，，换算成别的，则换算比例就不一样，大小也会跟着变
// fontsize的动态计算，这个指的是html中的font-size的值
        document.documentElement.style.fontSize=document.documentElement.
        clientWidth/375*16+'px'
        //fontsize=当前设备的css布局宽度/物理分辨率*基准font-size

vh和vw

这两个可以直接在使用，就可以占满全屏

div{
            height: 100vh;
            width: 100vw;
            background-color: yellow;
        }

100%和100vw的关系

• 没有滚动条的时候100vw=100%
• 有滚动条的时候：100vw包含滚动条，
• 100%不包含滚动条，刨除滚动条后剩下的空间

渐变

线性渐变-linear-gradient

background: linear-gradient(90deg,red,green);

径向渐变-radial-gradient

background: radial-gradient(red 50%,yellow 60%);

重复渐变-repeating-linear-gradient

background: repeating-linear-gradient(red,yellow 10%,green 20%);

动画过渡属性-transition

transition:all 2s linear 0s;
（属性，事件，过渡类型，延迟）
这个动画不支持display:none block属性隐藏以及显示

1. linear：规定以相同速度开始至结束的过渡效果
2. ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
3. ease-in：规定以慢速开始的过渡效果
4. ease-out：规定以慢速结束的过渡效果
5. ease-in-out：规定以慢速开始和结束的过渡效果
6. cubic-bezier(0.075, 0.82, 0.165, 1)：bezier 贝赛尔曲线

平移-translate

 /* 方法一：x轴平移  y轴平移  */
            transform: translateX(-100px) translateY(100px);
            /* 方法二：*/
            transform: translate(100px,100px);

缩放-scale

/* 表示从左上角开始缩放 */
transform-origin: left top;
 transform: scale(1.5);

旋转-rotate

transform: rotate(0deg);

先位移和先缩放不一样 ，先缩放，则后面的位移距离也会跟着缩放最好把位移放在前面

倾斜-skewY

1. skewX 拽着横轴右下角
2. skewY 拽着纵轴左上角
3. skew(**deg，**deg) x轴，y轴
4. transform: skewY(30deg);

关键帧动画

 div {
            width: 200px;
            height: 200px;
            background: red;
            /* animation: key2 2s linear 1s  infinite; */
            animation-name: key2;
            /* 过渡时间 */
            animation-duration: 2s;
            /* 过渡类型 */
            animation-timing-function: linear;
            /* 延迟时间 */
            animation-delay: 1s;
            /* 循环次数 */
            animation-iteration-count: infinite;
            /* 动画的运行：running运行，paused暂停 */
            animation-play-state: running;
            /* 是否反向 */
            animation-direction: alternate;
        }

        div:hover {
            animation-play-state: paused;
        }

        /* 关键帧 */
        @keyframes key1 {
            from {
                width: 200px;
                height: 200px;
                background: red;
            }

            to {
                width: 400px;
                height: 600px;
                background: aqua;
            }
        }

        /* 可以做制作多个关键帧 */
        @keyframes key2 {
            0% {
                width: 200px;
                height: 200px;
                background: red;
            }

            25% {
                width: 300px;
                height: 200px;
                background: grey;
            }

            100% {
                width: 400px;
                height: 600px;
                background: aqua;
            }
        }

 animation: run 1s linear forwards;
            /* 动画的状态 none
                         forwards:保留在最后画面
                         backwards：保留在第一帧状态
                          */

B站css面试笔记

介绍一下css盒模型

1. css盒模型有两种
2. 两者的区别
3. 通过css如何转化盒模型：box-sizing:border-box怪异盒模型。content-box标准盒模型

line-height和height

1. height：就是元素的高度值，高度不变
2. line-height：每行文字的高，如果文字换行，则整个盒子的高度会增加（行*行高）

css选择符有哪些？哪些属性可以继承

1. css选择符
   1. 通配（*）
   2. id选择器（id)
   3. 类选择器（#）
   4. 标签选择器(div/p/h1…)
   5. 相邻选择器（+）
   6. 后代选择器（ul li）
   7. 子元素选择器（>）
   8. 属性选择器（[]）
   9. 伪类选择器
2. 哪些属性可以继承
   1. 文字系列：font-size color line-height text-align
3. 哪些属性不可继承
   1. border padding margin

css优先级算法怎么计算

1. !important>内联样式>id>class>标签>通配(*)
2. css权重计算
   1. 内联样式（style） 权重值：1000
   2. id选择器 100
   3. 类选择器 10
   4. 标签&伪类元素选择器 1
   5. 通配（> + *) 0

一个盒子不给宽高，如何水平居中

1. 弹性盒display:flex
2. position+translate

对BFC规范的理解（块级格式化上下文）

1. BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
   1. BFC原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素
   2. 如何触发
      1. float的值非none
      2. overflow的值非visible
      3. display的值为inline-block
      4. position的值为absolute

在网页中应该使用奇数还是偶数的字体？为什么？

1. 用偶数。让文字在浏览器表现更好看
2. 方便开发，转换px方便

什么是css reset

是一个css文件，用来重置css样式的

css精灵图的优缺点

1. 是什么？把多个小图标合并成一个大图片。
2. 优点:减少了http请求次数，提高了浏览器的性能。
3. 缺点：当位置发生改变，导致维护比较差。