dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 775|回复: 0

[Html/Css] css重点知识和bug解决方法

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3995

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3995

    发表于 2020-4-4 16:00:01 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    .图片向下撑大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.样式引入的方式有哪几种
    [HTML] 纯文本查看 复制代码
    外部引入            <link rel="stylesheet" type="text/css" href=""/>        
                        <style>
                             @import url("global.css")
                            </style>
                        内部引入            <style></style>
                        行内样式引入        <div style="">
    8.transition过渡动画使用的过程中要注意一些什么?
                    1.必须跟hover一起使用
                    2.在hover的时候添加过渡,鼠标滑上去有过渡效果,移开就没有
                        给他本身加的时候,鼠标滑上去有过渡效果,移开也有
    9.用边框写出一个箭头超右的三角形
    [AppleScript] 纯文本查看 复制代码
     div{
                    border-top:10px solid transparent
                    border-right:10px solid transparent
                    border-bottom:10px solid transparent
                    border-left:10px solid red
                    width: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种方法:(不用做计算)
    [HTML] 纯文本查看 复制代码
    (1).box{
                    width:500px;
                    height:500px;
                    position:relative;
                }
                .box1{
                    width:200px;
                    height:200px;
                    position:absolute;
                    left:0;
                    right:0;
                    bottom:0;
                    left:0;
                    margin:auto;
                }
    
    (2).box{
                    width:500px;
                    height:500px;
                    display:flex;                 //弹性盒
                    justify-content:center;  //水平居中
                    align-items:center;       //垂直居中
                }
                .box1{
                    width:200px;
                    height:200px;
                }
    
    (3)box{
                    width: 500px;
                    height: 500px;
                    background: red;
                    position: relative;
                }
                .box1{
                    width: 200px;
                    height: 200px;
                    background: green;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
    12.当子元素使用margin-top,导致父元素整个下移的解决方案:
    [AppleScript] 纯文本查看 复制代码
         overflow:hidden
                        把margin改成padding
                        border-top:1px solid rgba(0,0,0,0)
                        给父元素或者子元素浮动
    13.子元素都设置float,父元素没有设置高度,出现高度塌陷的问题,解决方案:
    [HTML] 纯文本查看 复制代码
    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.透明度的属性是什么?请也写上它的兼容写法?
    [HTML] 纯文本查看 复制代码
    opcity:0.3;
                        filter:alpha(opcity=30)

    15.什么是BFC?BFC的触发条件有哪些?
    [HTML] 纯文本查看 复制代码
     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不需要触发任何事件
    22.em和rem是什么?移动端为什么要用rem这个单位?
                        em是相对于最近的父元素的字号大小,1em=16px
                        rem 是 root em是相对于根元素字号的大小, 1rem=16px
    23.响应式网页设计有哪些特点?
                    1、网站必须建立灵活的网格基础;  
                    2、引用到网站的图片必须是可伸缩的
                    3、不同的显示风格,需要在Media Query上设置不同的样式
                    4、meta标签





    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2025-2-2 04:55 , Processed in 0.098318 second(s), 33 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表