作为一个前端小白,这是我面试前端职位的题目之一,没有实践经验,误打误撞,最后还是错了!
今天难得有时间,认真思考了一下。答案不一定最佳的解决方案,但是能实现同等效果。
问题描述:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为200px,中间那个DIV充满剩余的宽度。
这个题目是我当时做的第一个题目,看完题目就把答案写出来了:不就是一个float:left;的事情吗...
分类:
Web程序 时间:
2015-08-04 17:13:34
阅读次数:
184
四. float布局上下文下的水平垂直居中float + -50%DEMO链接代码: 居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中居中 .wrap{ float: left; width: 100%; ...
分类:
Web程序 时间:
2015-08-03 07:49:58
阅读次数:
217
代码:
效果图:
路人甲:OK?等高了??
路人丙:不是吧?
路人乙:你这是在逗我?
xiaomogg:
效果有点惨,不过这的确是已经做了登高处理的
为什么“登高”,看起来却不等高
请留意代码处红框处
padding-bottom:99px;
margin-bottom:-99px;
路人甲:这说明不了什么问题!!
路人乙:快进入主题吧...
分类:
Web程序 时间:
2015-08-02 10:20:04
阅读次数:
104
1、display block块级元素(div、p等) inline 行内元素(a、span等) 常见的例子:把li修改成inline ,制作成水平菜单2、max-width 来适应不同浏览器窗口大小,IE7+都支持这一属性3、box-sizing:border-box 将元素设置这一属性时,元.....
分类:
Web程序 时间:
2015-08-02 07:46:37
阅读次数:
149
1、使用可弹出伸缩窗调整了之前的页面布局,使用这种布局使整个界面看起来更加清爽也更简洁2、以上图左侧面板为例,实现比较简单,只需了解html和css布局就大致差不多了html代码:
...
分类:
Web程序 时间:
2015-08-01 06:28:12
阅读次数:
188
CSS 布局对我来说,既熟悉又陌生。我既能实现它,又没有很好的了解它。所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法。本文小白,仅供参考。但也要了解下浮动,定位等。一、一列布局1. 居中定宽这算是最简单且最容易实现的布局了吧。列出最核心的 CSS 代码:body{text...
分类:
Web程序 时间:
2015-07-31 01:15:55
阅读次数:
128
只使用css实现 有两种方式,一种是通过相对定位,再绝对定位获取父亲元素的高度,一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 1 2 3 4 5 Document 6 7 8 9 26 实现一,通过 ...
分类:
Web程序 时间:
2015-07-31 01:04:56
阅读次数:
136
三. absolute布局上下文下的水平垂直居中50% + -50%原理很简单,就是利用left:50%将盒子的左边先置于父容器的中点,然后再将盒子往左偏移盒子自身宽度的50%,这里有三种具体实现: 水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中 水平垂直居中水...
分类:
Web程序 时间:
2015-07-27 14:41:41
阅读次数:
134
一、BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Bo...
分类:
其他好文 时间:
2015-07-27 00:07:16
阅读次数:
269
Box:是网页布局的对象和基本单位。box分为如下三类:-block-level块级-inline-level 行级-run-in css3中才有BFC:块级格式化上下文。BFC布局规则:1.内部的Box会在垂直方向,一个接一个的放置。2.Box垂直方向的距离有margin决定。属于同一个BFC的两...
分类:
Web程序 时间:
2015-07-26 17:19:17
阅读次数:
90