首页 > 其他分享 >css面试题

css面试题

时间:2023-10-31 09:35:01浏览次数:37  
标签:BFC 浮动 面试题 元素 设置 居中 hidden css

1.css中的哪些单位

  绝对单位:

   px:像素单位

  相对单位:

    em: 相对父元素字体大小

    rem:相对根元素字体大小

2.居中的方式

1.水平居中

  1.设置盒子: margin:0 auto

  2.display:  flex

2.垂直居中

     1.vertical-align: middle 实现居中,1. display: inline-block才会生效 2.需要参考兄弟元素的中心点

     2.绝对定位实现+transform

     3.弹性盒子:1.flex 

                           2.grid

3.隐藏元素的方式总结

  1.完全隐藏:1.dispalay:none

                       2.hidden;

  2.视觉隐藏:1.visibility: hidden;

                        2.opacity:0

                        3.透明度设置

                        3.绝对定位,移除视口外

                        4.margin-left ,移除视口外

                        5.宽高设置 0

  3.语义隐藏:aria-hidden:true

 

4.浮动

  1.作用:文字环绕(文章中使用较多)

  2.特性

        1.脱离标准流(位置就空了)

        2.浮动元素相互贴靠性(宽度不够换行)

        3.宽度收缩

        4.清除浮动(副作用)

           1.父元素设置高度(大于浮动元素高度)

           2.clear

           3.隔墙法(空div元素设置清除浮动)

          4.内墙法(高度坍塌)

          5.父元素设置overflow:hidden (BFC)

          6.父元素设置伪元素,清除浮动

5.BFC

  1.BFC是一个独立的布局环境,BFC内部的元素布局与外部相互不影响

  2.BFC布局规则:

 3.BFC形成规则:

     1.float: right left

     2.positon: absoult fixed

     3.overflow: auto scroll hidden

     4.display : inline-block table-cell

4.作用:

   1.解决高度坍塌问题

   2.不会于浮动元素重叠

   3.外边距margin重叠 问题

     

 6.样式计算过程

   1.确定声明值

      2.层叠冲突

      3.使用继承

     4.使用默认值

标签:BFC,浮动,面试题,元素,设置,居中,hidden,css
From: https://www.cnblogs.com/shibiao9999/p/17797998.html

相关文章

  • 视频直播app源码,CSS div水平垂直居中和div置于底部
    视频直播app源码,CSSdiv水平垂直居中和div置于底部一、水平居中 .hor_center{  margin:0auto;}​二、水平垂直居中 .content{  width:360px;  height:240px;} .ver_hor_center{  position:absolute;  top:50%;  left:50%;  margi......
  • css控制table首列固定内容滚动
    tabletbody{display:block;height:500px;overflow-y:scroll;}tablethead,tbodytr{display:table;width:100%;table-layout:fixed;box-s......
  • 前端面试题整理(2.0)
    Watch与计算属性的选择在某些情况下,watch和计算属性可以达到相同的效果。如果需要在数据变化时执行异步操作或有副作用时,应该使用watch。而如果进需要根据数据进行简单的变换和计算,则更适合使用计算属性。什么是路由:前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。......
  • 利用CSS 实现环形百分比进度展示
    先看效果图: UI设计了这样的效果,已读人数占总人数的百分比,环形展示。这里可以用echarts图表,也可以用css实现,因为我是在小程序环境下,考虑到包大小体积,采用了css实现。核心就是一行代码:background-image:conic-gradient(#e9e9e930deg,transparent30deg);这个只是一个静......
  • SCSS的嵌套规则可以减少重复代码,那么如何在嵌套规则中使用父选择器?
    在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。以下是一个示例,展示了如何在嵌套规则中使用父选择器:.button{background-color:blue;&:hover{background-color:darkblue;}&.ac......
  • Java面试题小练(一)
    java面向对象的三大特征封装,继承,多态封装说明一个类行为和属性与其他类的关系,低耦合,高内聚;继承是父类和子类的关系,多态说的是类与类的关系封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据。外界对他的内部细节是隐藏的,暴露在外界的只是它......
  • css 多列布局
    1.1多列布局这里感谢小甲鱼,毕竟编程是小甲鱼带入坑了鱼C-Web-CSS-速查1.1.1column-count定义:column-count属性指定某个元素应分为的列数。column-count:number|auto;值说明number列的最佳数目将其中的元素的内容无法流出auto列数将取决于其他属性。......
  • CSS 动画
    1.1过渡transitiontransition:background-size2scubic-bezier(0,.98,.33,1.1);steps()函数可以配合使用steps(5,end)1.2变形transform1.2.1旋转rotate()函数可以配合使用transition:2s;transform:rotate(-180deg);向左旋转,2s旋转1180deg(度)transit......
  • 面试题:MySQL事务的ACID如何实现?
    大家好,我是【码老思】,事务是一个数据库绕不开的话题,今天和大家一起聊聊。事务是什么?事务(Transaction)是并发控制的基本单位。所谓的事务呢,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位。在介绍事务的特性之前,我们先看下MySQL的逻辑架构,如......
  • 超全面!23年秋招1000+道Android中大厂面试题集锦(含答案)
    前言整理这些面试题源于在微信群和几个刚入职的小伙伴们的一次讨论,很多小伙伴谈了自己的面试经历和体会,很多人最初鄙视刷题党,觉得开发技能最重要,但在短暂的面试过程中很挫败。转而去看面试题,但是网上面试题太多但又不全,查找很不方便,多是看过的又看,看十道才能看到面试的题目,极大的浪......