1.图片向下撑大3像素问题
在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法:
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;
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 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种方法:(不用做计算)
专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划) (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;默认值
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
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标签
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。