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. 任意flex控件导出图片

    任意flex控件导出图片   flex导出图片功能通常是: 思路1:客户端将UIComponent转化为BitmapData,再转为ByteArray,将ByteArray上传到服务端,服务端发送文件 ...

  2. 2017-2018-1 20155315 《信息安全系统设计基础》加分作业：实现mypwd

    学习pwd命令 man pwd查看 pwd命令用于显示当前工作目录,是Linux下最常用的命令之一.在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. 环境变量OLDPWD表示 ...

  3. 20155327 2016-2017-2 《Java程序设计》第10周学习总结

    20155327 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 Java的网络编程 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. ...

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

    20155327 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 浏览教材,根据自己的理解每章提出一个问题 1.JAVA SE中JVM,JRE与JDK分别是什 ...

  5. 【SQLSERVER】索引的维护优化

    一.索引的利弊   优点: 1.大大加快数据的检索速度: 2.创建唯一性索引,保证数据库表中每一行数据的唯一性: 3.加速表和表之间的连接: 4.在使用分组和排序子句进行数据检索时,可以显著减少查询中 ...

  6. day 7 __new___

    1 __new__方法 创建对象 实质是:调用父类的__new__方法创建的对象 class Dog(object): def __init__(self): print("---init方 ...

  7. Zigbee系列（概览）

    Zigbee技术特点 低速率: 数据传输速率只有20~250kb/s, 2.4GHZ提供250kb/s, 915MHz对应40kb/s, 868Mhz对应20kb/s 低功耗:睡眠模式设备使用电池供电 ...

  8. Qt-QML-Canvas-雷达扫描仪表简单

    使用QML实现的雷达仪表的实现,主要实现了余晖扫描的实现,其他的还是比较简单的,后面可能会加入目标标识,目前的功能仅仅是一个假的扫描雷达 来看代码 /* 作者:张建伟 时间:2018年4月27日 简述 ...

  9. 自动化运维工具saltstack02 -- 之SaltStack的配置管理

    SaltStack的配置管理 1.配置管理说明 配置管理,顾名思义及配置与管理, salt-master的配置文件编写格式之YAML语法说明: 数据的结构通过缩进来表示,每一级用两个空格来表示缩进,如 ...

  10. iOS开发之多线程技术—GCD篇

    本篇将从四个方面对iOS开发中GCD的使用进行详尽的讲解: 一.什么是GCD 二.我们为什么要用GCD技术 三.在实际开发中如何使用GCD更好的实现我们的需求 一.Synchronous & ...