垂直居中在面试中经常见到的题目。总结几种,希望大家多多指教。 。。。。<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative; //父集相对定位 } .box1{ width:50px; hei ...
分类:
Web程序 时间:
2017-09-20 00:40:33
阅读次数:
202
已知布局为如下: 不知道宽和高的情况下: 方法一: 方法二: 固定宽和高 方法二 ...
分类:
其他好文 时间:
2017-09-18 19:48:53
阅读次数:
143
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 一:背景色background-color 属性 二:背景图像 background-image 属性 三:背景重复background-repeat 属性 属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通 ...
分类:
Web程序 时间:
2017-09-17 21:05:54
阅读次数:
279
结论: 1:水平结构第一个盒子的 右边距等于 左边盒子的margin-right +右边盒子的margin-left;【相加】 2:垂直结构第一个盒子的 下边距等于 上边盒子的margin-bottom和下边盒子的margin-top比较一下,【取最大值】 3:包含结构子元素的margin-left ...
分类:
Web程序 时间:
2017-09-16 16:03:33
阅读次数:
222
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ position: absolute; background: red; /* width:200px; ...
分类:
其他好文 时间:
2017-09-13 09:49:51
阅读次数:
182
在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position 2. flex 3. translate 4. calc 本文介绍的四种方法全部由以下实例验证通过,且加了兼容性 ...
分类:
Web程序 时间:
2017-09-10 20:40:54
阅读次数:
289
为什么会居中?期初我也不明白,但是看到下面的代码我就知道了,这是博主曾经写过一个水平垂直居中的技巧,就是利用空白标签实现这个效果,只不过这里换成了伪类元素。点赞.dialog_container:after {display: inline-block;content: ”;width: 0;hei ...
分类:
其他好文 时间:
2017-09-10 20:39:27
阅读次数:
135
<body> <div> <img src="1.jpg" alt="haha"> </div> </body> 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。 <style type="tex ...
分类:
其他好文 时间:
2017-09-09 19:05:59
阅读次数:
184
1. 请用div+css写出文字水平垂直居中,图片水平垂直居中的样式及布局。2. 请用div+css写出左侧固定(width:200px),右侧自适应的页面布局。3. 请写出至少五种css浏览器兼容性的写法。4. jquery的绑定事件有几种方式 ,请举例说明其优缺点。5. 请写出至少三种js浏览器 ...
分类:
其他好文 时间:
2017-09-05 01:38:36
阅读次数:
171
1.父元素设置display:table;子元素设置display:table-cell; 缺点:IE7不支持,而且子元素会填满父元素,不建议使用 2.使用css3 transform:translate(-50%; -50%) 缺点:兼容性不好,IE9+ 3.使用flex布局 缺点:兼容性不好,I ...
分类:
其他好文 时间:
2017-08-28 23:44:51
阅读次数:
208