首页 > > 网页制作 > css >

css重点知识和bug解决方法

2019-12-21 16:00:35来源：博客园阅读 ()

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="">

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
               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种方法：(不用做计算)

（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，导致父元素整个下移的解决方案：
                   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不需要触发任何事件

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

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

原文链接:https://www.cnblogs.com/xbwk/p/12075886.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有