• css重点知识和bug解决方法


    1.图片向下撑大3像素问题

    在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法:

    1.1给图片添加display:block;

    1.2给图片添加float:left;

    1.3 给图片添加vertical-align:middle;

    1.4 给他的父元素加font-size:0;

    2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中?

    给父元素添加宽高,添加行高 添加 text-align:center
    给图片添加 :vertical-align:center

    3.元素的类型分类哪几种?各自都有什么特点?

    块元素 独占一行,竖着排,能设置宽高
    行内元素 默认情况下文本一行显示,不能设置宽高
    行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点
    可变元素 添加float:left 相当于display:block

    4.如何实现一个元素消失和出现?

    display:none display:block
    opcity:0; opcity:1;

    5.单行文本溢出显示省略号怎么实现?
    添加width;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    6.定位的属性值有哪几个?分别有什么特点?
    position:absolute 绝对定位, 脱离文档流
    在有父元素或者父元素没有设置定位的情况下,它的参照物是整个浏览器
    如果父元素设置了相对定位,那么它的参照物就是它的父元素
    position:relative 相对定位, 不脱离文档流
    它的参照物是它原来的位置
    position:fixed 固定定位, 脱离文档流
    position:sticky 粘性定位 脱离文档流
    它的参照物是整个浏览器

    7.样式引入的方式有哪几种
    外部引入

    <link rel="stylesheet" type="text/css" href=""/>        
    <style>
             @import url("global.css")
    </style>

    内部引入

    <style></style>

    行内样式引入

    <div style="margin: 10px auto; "></div>

     

    8.transition过渡动画使用的过程中要注意一些什么?
    1.必须跟hover一起使用
    2.在hover的时候添加过渡,鼠标滑上去有过渡效果,移开就没有,给他本身加的时候,鼠标滑上去有过渡效果,移开也有

    9.用边框写出一个箭头超右的三角形

    div{
    	border-top:10px solid transparent
    	border-right:10px solid transparent
    	border-bottom:10px solid transparent
    	border-left:10px solid red
    	0;
    	height:0;
     }

    10.可以取负值的css属性有哪些?
    text-indent
    z-index
    margin-top
    margin-left
    background-position
    left right bottom top
    text-shadow
    box-shadow等等

    11.一个未知宽高的盒子在另一个盒子里面 水平垂直居中 的3种方法:(不用做计算)

    1)
    .box{
        500px;
        height:500px;
        position:relative;
    }
    .box1{
        200px;
        height:200px;
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
    }
    
    (2)
    .box{
        500px;
        height:500px;
        display:flex;                 //弹性盒
        justify-content:center;  //水平居中
        align-items:center;       //垂直居中
    }
    .box1{
        200px;
        height:200px;
    }
    
    (3)
    .box{
         500px;
        height: 500px;
        background: red;
        position: relative;
    }
    .box1{
         200px;
        height: 200px;
        background: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    12.当子元素使用margin-top,导致父元素整个下移的解决方案:
    overflow:hidden
    把margin改成padding
    border-top:1px solid rgba(0,0,0,0)
    给父元素或者子元素浮动

    13.子元素都设置float,父元素没有设置高度,出现高度塌陷的问题,解决方案:
    1.给父元素设置height 遇到自适应用不了,
    2.添加overflow:hidden/auto
    3.给浮动的元素下面添加一个空盒子,给空盒子添加 clear:both;
    4.万能清除法

    .clear:after{
      content:"";
      clear:both;
      display:block;
      height:0;
      overflow:hidden;
      visibility:hidden;
    }
    .clear{
      zoom:1;
    }

    5. 给父元素也添加float
    6. 给父元素添加display:table

    14.透明度的属性是什么?请也写上它的兼容写法?
    opcity:0.3;
    filter:alpha(opcity=30)

    15.什么是BFC?BFC的触发条件有哪些?
    bfc直译为块级格式化上下文,是一个独立的渲染区域。具有BFC特性的元素可以看作是一个隔离了的独立容器,容器里面的内容不会影响到外面的元素
    使用了float:left/right position为absolute/fixed display为inline-block,table-cell,table-caption,flex,inline-flex,overflow为hidden,auto等等 都是BFC

    16.如何解决margin上下值发生重叠的问题?
    给任何一个子元素添加一个父元素,并让这个父元素成为bfc区域里面的元素,所以就需要给父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。

    17.怪异盒是怎么产生的?它有什么特点?如何由W3C标准盒模型变成怪异盒模型?
    产生原因:DOCTYPE的缺失在IE8以下会触发怪异盒模式
    特点:padding值不会计算在元素原有的宽高之上
    border值不会计算在元素原有宽高之上
    变成怪异盒模型:添加属性box-sizing:border-box;
    box-sizing:content-box;默认值

    18.哪些属性可以被继承?
    1、字体系列属性

    font-family:字体样式
    font-weight:字体的粗细
    font-size:字体的大小
    font-style:字体的类型

    2、文本系列属性
    text-indent:文本缩进
    text-align:文本水平对齐
    line-height:行高
    letter-spacing:单词之间的间距
    text-transform:控制文本小:uppercase、lowercase、capitalize
    color:文本颜色
    列表
    list-style

    19.图片整合是用什么技术实现的?图片整合技术有哪些优势?

    css Sprites
    用background-position 来进行背景图片定位技术

    20.移动端布局的方式有哪些?
    流式布局 等比缩放布局或混合布局 等比缩放布局可以用rem vw来实现

    21.transition和animation之间有什么共同点和不同点?
    相同点:都是随着时间改变元素的属性值
    不同点:

    1.transition需要跟hover一起使用
    2.animation不需要触发任何事件

    vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

    22.em和rem是什么?移动端为什么要用rem这个单位?
    em是相对于最近的父元素的字号大小,1em=16px
    rem 是 root em是相对于根元素字号的大小, 1rem=16px

    23.响应式网页设计有哪些特点?
    1、网站必须建立灵活的网格基础;
    2、引用到网站的图片必须是可伸缩的
    3、不同的显示风格,需要在Media Query上设置不同的样式
    4、meta标签

  • 相关阅读:
    Android测试工具 UIAutomator入门与介绍
    C#异步编程
    懒得找,存个笔记:easyui combogrid 下拉+关键字搜索
    mssql replace
    序列化类型为XX的对象时检测到循环引用
    shell脚本运行python命令
    python技巧
    边缘检测测评标准
    mybatis 手动生成可执行sql
    Linux如何扩容物理文件系统分区
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13761203.html
Copyright © 2020-2023  润新知