1、如何让一个盒子水平垂直居中

 //已知宽高

 <div class="div1"></div>

 <style>

     .div1{

         width:400px;

         height:400px;

         position:absolute;

         left:50%;

         top:50%

         margin:-200px 0 0 -200px;

     }

 </style>

 //未知宽高

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .div1{

             position: absolute;

             left: 0;

             top: 0;

             bottom: 0;

             right: 0;

             margin: auto;

             border: 1px solid #000;

             width: 400px;

             height: 400px;

         }

     </style>

 </head>

 <body>

     <div class="div1"></div>

 </body>

 </html>

 //未知宽高方法二：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .div1{

             position: absolute;

             left: 50%;

             top: 50%;

             transform: translate(-50%,-50%);

             border: 1px solid #000;

             width: 400px;

             height: 400px;

         }

     </style>

 </head>

 <body>

     <div class="div1"></div>

 </body>

 </html>

2、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

 // 方法一：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .div1{

             width: 100px;

             height: 200px;

             background-color: #ccc;

             float: left;

         }

         .div2{

             background-color: #ff0;

             margin-left: 100px;

             height: 200px;

         }

     </style>

 </head>

 <body>

     <div class="div1"></div>

     <div class="div2"></div>

 </body>

 </html>

 //方法二：

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .div{

             display: flex;

             flex-direction: row;

             align-items: center;

         }

         .div1{

             flex-basis: 100px;

             background-color: #ccc;

             height: 300px;

         }

         .div2{

             background-color: #ff0;

             height: 300px;

             flex-grow: 1;

         }

     </style>

 </head>

 <body>

 <div class="div">

     <div class="div1"></div>

     <div class="div2"></div>

 </div>

 </body>

第138天：Web前端面试题总结（编程）的更多相关文章

  1. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  2. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  3. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  4. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  5. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  6. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  7. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  8. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  9. 【web前端面试题整理06】成都第一弹，邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

随机推荐

  1. 20155224 2016-2017-2 《Java程序设计》第4周学习总结

    20155224 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 第六章主要学习了子类与父类的继承. 先定义一个程序,另一程序可继承他 如: publ ...

  2. Wiki版产品需求---产品需求文档到底是谁的？产品到底是谁的？

    在听了测试的一通唠叨之后,"内部实现一堆逻辑,只有一句话的需求文档","文档那么简单,我们怎么测试啊",心中突然想起来自己曾经干的一件当时觉得还不错的事情,但是 ...

  3. PostgreSQL 使用 LDAP 认证方式

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  4. cogs2554 [福利]可持久化线段树

    cogs2554 [福利]可持久化线段树 原题链接 每次修改复制一遍就行了... 1A!!! // It is made by XZZ #include<cstdio> #include& ...

  5. 洛谷 P1941 飞扬的小鸟

    洛谷 P1941 飞扬的小鸟 原题链接 首先吐槽几句 noip都快到了,我还不刷起联赛大水题! 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节 ...

  6. 阿里IPO法律咨询费达1580万美元 为Facebook六倍

    据路透社报道,阿里巴巴集团周五在 IPO (首次公开招股)更新文件中披露,将向美国盛信律师事务所(Simpson Thacher)以及其他为 IPO 提供咨询服务的律师事务所支付 1580 万美元的法 ...

  7. 产品需求文档(PRD)的写作 【转】

    产品需求文档(PRD)的写作   一.文章的摘要介绍 无论我们做什么事都讲究方式方法,写产品需求文档(以下称PRD文档)也是如此,之前我通过四篇文章分享了自己写PRD文档的一些方法,而这一篇文章主要是 ...

  8. USACO 2.4.4 Bessie Come Home 回家（最短路）

    Description 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一只速度最快 ...

  9. P4tutorial实战

    Tutorial样例实战 GitHub仓库地址 参考博客 实验一:SIGCOMM_2015/Sourse_Routing 实验环境: OS:Ubuntu16.04 bmv2:behavioral-mo ...

  10. HashMap和HashTable源码分析

    HashMap HashMap是一个实现了Map接口的Hash表.提供所有Map的操作,并且允许null key和null value.HashMap几乎等同于HashTable,只不过HashMap ...