如何理解语义化：

对应的内容是用相应意思的标签，增加开发者和机器爬虫对代码的可读性。

块状元素和内联元素：
块状元素有：display:block/table；有div h1 h2 table ul ol p等，这些元素特点是独占一行。
内联元素：display:inline/inline-block；有span img input button等，内联元素不会独占一行，会挨着往后排，直到浏览器的边缘换行为止。
 
盒模型宽度计算：
  1. #div{
  2.         width:100px;
  3.         padding:10px;
  4.         border:1px solid #000;
  5.         margin:10px;
  6. }
offsetWidth = （内容宽度+内边距+边框），无外边距，因此#div的宽度是122px。
如果让offsetWidth等于100px，该如何做？
加一个：box-sizing:border-box;
 
CSS3中的盒模型有两种：标准盒模型、IE（替代）盒模型
 
两种盒子模型都是由 content+padding+border+margin构成，其大小都是由 content+padding+border决定的，
但是盒子内容宽/高度（即width/height）的计算范围根据盒模型的不同有所不同：
　　标准盒模型：只包含content
　　IE（替代）盒模型：content+padding+border
可以通过box-sizing来改变元素的盒模型：
　　box-sizing:content-box;标准盒模型（默认值）
　　box-sizing:border-box;IE（替代）盒模型
 
margin纵向重叠问题：
  1. p{
  2.             font-size:16px;
  3.             line-height:1;
  4.             margin-top:10px;
  5.             margin-bottom:15px;
  6. }
相邻元素的margin-top和margin-bottom会发生重叠
空内容的<p></p>也会重叠，会被忽略掉
所以AAA和BBB之间的距离是15px
 
margin负值问题：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>margin负值问题</title>
  5.     <style>
  6.         .box1{
  7.             width: 500px;
  8.             height:100px;
  9.             border:1px solid #000;
  10.             padding:10px;
  11.         }
  12.         .left{
  13.             width: 50px;
  14.             height:50px;
  15.             float:left;
  16.             border:1px solid red;
  17.             margin-left:-10px;
  18.             margin-right:-20px;
  19.         }
  20.         .right{
  21.             width: 50px;
  22.             height:50px;
  23.             float:left;
  24.             border:1px solid blue;
  25.         }
  26.         .box2{
  27.             width: 500px;
  28.             height:200px;
  29.             border:1px solid #000;
  30.             padding:10px;
  31.         }
  32.         .top{
  33.             width: 50px;
  34.             height:50px;
  35.             border:1px solid red;
  36.             margin-top:-10px;
  37.             margin-bottom:-20px;
  38.         }
  39.         .bottom{
  40.             width: 50px;
  41.             height:50px;
  42.             border:1px solid blue;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47. <h2>测试 margin-left、margin-right为负值</h2>
  48. <div class="box1">
  49.    <div class="left"></div>
  50.    <div class="right"></div>
  51. </div>
  52. <h2>测试 margin-top、margin-bottom为负值</h2>
  53. <div class="box2">
  54.     <div class="top"></div>
  55.     <div class="bottom"></div>
  56. </div>
  57. </body>
  58. </html>

margin-top 和 margin-left 负值，元素向上、向左移动

margin-right 负值，右侧元素左移，自身不受影响

margin-bottom 负值，下方元素上移，自身不受影响
 
BFC理解与应用：

  1. <style>
  2.         .left{
  3.             float:left;
  4.         }
  5.         .bfc{
  6.             overflow: hidden;
  7.         }
  8. </style>
  9. <div class="bfc">
  10.     <img class="left" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  11.     <p class="bfc">文字文字文字文字文字文字文字文字</p>
  12. </div>

什么是BFC？如何应用

BFC全称是 Block format context，块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域。
BFC是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
其中比较重要的布局规则有内部box垂直放置，计算BFC高度的时候浮动元素也参与计算。
 
BFC具有一些特性：
　　1.块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
　　2.在BFC中上下相邻的两个容器的margin会重叠，创建新BFC可以避免外边距重叠。
　　3.计算BFC的高度时，需要计算浮动元素的高度。
　　4.BFC区域不会与浮动的容器发生重叠。
　　5.BFC是独立的容器，容器内部元素不会影响外部元素。
　　6.每个元素的左margin值和容器的左border相接触。

形成BFC的常见条件：
根元素，即HTML元素
float不是none。设置元素为float，该元素就有了BFC
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block、table-cel、table-caption等
BFC的常见应用：
清除浮动（让父元素的高度包含子浮动元素）
去除边距重叠现象
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行
 
手写clearfix：

  1. /*手写clearfix*/
  2. .clearfix:after{
  3.             content:'';
  4.             display: block;
  5.             clear:both;
  6. }
  7. /*
  8. *zoom:1;兼容IE低版本
  9. */
圣杯布局和双飞翼布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>float布局</title>
  6.     <style>
  7.         .box1{
  8.             padding:0;
  9.             margin:0;
  10.         }
  11.         .box1 header,.box1 footer{
  12.             height:20px;
  13.             background:#ccc;
  14.             text-align:center;
  15.         }
  16.         .box1 .main{
  17.             padding-left:100px;
  18.             padding-right:200px;
  19.         }
  20.         .box1 .content{
  21.             height:50px;
  22.             background:#666;
  23.             float:left;
  24.             width: 100%;
  25.             margin-right:-100%;
  26.         }
  27.         .box1 .left{
  28.             height:20px;
  29.             background:yellow;
  30.             width: 100px;
  31.             float:left;
  32.             margin-left:-100px;
  33.         }
  34.         .box1 .right{
  35.             width:200px;
  36.             height:20px;
  37.             background: aquamarine;
  38.             float:left;
  39.             margin-left:100%;
  40.         }
  41.         /*手写clearfix*/
  42.         .clearfix:after{
  43.             content:'';
  44.             display: block;
  45.             clear:both;
  46.         }
  47.         /*
  48.         *zoom:1;兼容IE低版本
  49.         */
  50.     </style>
  51. </head>
  52. <body>
  53. <!--圣杯布局-->
  54. <div class="box1">
  55.     <header>header</header>
  56.     <div class="main clearfix">
  57.         <div class="content">content</div>
  58.         <div class="left">left</div>
  59.         <div class="right">right</div>
  60.     </div>
  61.     <footer>footer</footer>
  62. </div>
  63. <!--双飞翼布局-->
  64. <style>
  65.     .box2{
  66.         padding:0;
  67.         margin:0;
  68.     }
  69.     .box2 #main{
  70.         width: 100%;
  71.         height:200px;
  72.         background:#ccc;
  73.  
  74.     }
  75.     .box2 #main-wrap{
  76.         margin:0 200px 0 100px;
  77.     }
  78.     .box2 #left{
  79.         width:100px;
  80.         height:100px;
  81.         background:#0000FF;
  82.         margin-left:-100%;
  83.     }
  84.     .box2 #right{
  85.         width:200px;
  86.         height:100px;
  87.         background:red;
  88.         margin-left:-200px;
  89.     }
  90.     .col{
  91.         float:left;
  92.     }
  93. </style>
  94. <div class="box2">
  95.     <div id="main" class="col">
  96.         <div id="main-wrap">main</div>
  97.     </div>
  98.     <div id="left" class="col">
  99.         left
  100.     </div>
  101.     <div id="right" class="col">
  102.         right
  103.     </div>
  104. </div>
  105. </body>
  106. </html>
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏优先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC页面
圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin
flex布局实现一个三点色子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex布局</title>
  6.     <style>
  7.         .box{
  8.             width: 100px;
  9.             height:100px;
  10.             border:1px solid #000;
  11.             display: flex;
  12.             justify-content: space-around;
  13.             align-items:flex-start;
  14.         }
  15.         .item{
  16.             width: 20px;
  17.             height:20px;
  18.             background:#000;
  19.             border-radius:50%;
  20.         }
  21.         .item:nth-child(2){
  22.             align-self:center;
  23.         }
  24.         .item:nth-child(3){
  25.             align-self:flex-end;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div class="box">
  31.     <div class="item"></div>
  32.     <div class="item"></div>
  33.     <div class="item"></div>
  34. </div>
  35. </body>
  36. </html>

常规使用属性：

flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴对齐方式

absolute和relative定位：
relative根据自身定位
absolute依据最近一层的定位元素定位，定位元素有：absolute、relative、fixed、body
 
居中对齐的实现方式：
水平居中
inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50% 加 margin-left：负值
垂直居中
inline元素：line-height的值等于height值
absolute元素：top:50% 加 margin-top:负值   这个方法需要知道元素的宽高
absolute元素：top:50%;left:50%;transform:translate(-50%,-50%)
absolute元素：top,left,bottom.right都设置为0 加 margin:auto
 
line-height如何继承：
写具体数值，如30px，则继承该值（比较好理解）如下代码，答案是30px

  1. body{
  2.             font-size:20px;
  3.             line-height:30px;
  4. }
  5. p{
  6.             font-size:16px;
  7. }
写比例，如2或1.5，则继承该比例（比较好理解）如下代码如果是2，答案是32px

  1. body{
  2.             font-size:20px;
  3.             line-height:2;
  4. }
  5. p{
  6.             font-size:16px;
  7. }
写百分比，如200%，则继承计算出来的值（考点）如下代码如果是200%，答案是40px

  1. body{
  2.             font-size:20px;
  3.             line-height:200%;
  4. }
  5. p{
  6.             font-size:16px;
  7. }
网页视口尺寸：
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
document.body.clientHeight body高度
 

前端面试题整理——HTML/CSS的更多相关文章

  1. 前端面试题整理（css）

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  2. 最近面试前端面试题整理（css部分）

    对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 测试 </div> ...

  3. 前端面试题整理—HTML/CSS篇

    1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...

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

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

  5. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  6. 前端面试题（HTML/CSS）

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

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

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

  8. 2019届校招前端面试题整理——HTML、CSS篇

    前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...

  9. 【web前端面试题整理03】来看一点CSS相关的吧

    前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

随机推荐

  1. Go之Logrus用法入门

    Go之Logrus用法入门 Logrus是Go (golang)的结构化日志程序,完全兼容标准库的API日志程序. Logrus is a structured logger for Go (gola ...

  2. Tableau学习Step6一如何制作炫彩地图

    Tableau学习Step6一如何制作炫彩地图 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一.统计地图概述 1.1 统计地图的基本概念 统计地图的本质:数据的正确对应 将数据信息和地理 ...

  3. JZ-007-斐波那契数列

    斐波那契数列 题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0,第1项是1). n<=39 题目链接: 斐波那契数列 代码 publi ...

  4. LeetCode-086-分隔链表

    分隔链表 题目描述:给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前. 你应当 保留 两个分区中每个节点的初始相对 ...

  5. 学习linux(centos7)记录的笔记

    此随笔用于记录学习<linux鸟哥的私房菜>过程中1.遇到的问题及解决的过程 2.有必要记录的重要内容 3.对应书上操作的记录 开始于2021年6月18号 一个磁盘的分区通过格式化后成为一 ...

  6. 2021-08-02(console、comfrim)

    1.console对象 1.输出信息: console.info()别名 console.log(); 2.复合类型表格展示 console.table(obj) || console.table(A ...

  7. mysql卡顿问题查找和解决方法

    mysql卡顿问题查找和解决方法 版权一.所遇问题        写在前边的废话:今天面试阿里的时候问到过类似问题,以前做调优的时候都是现查现用,缺乏总结,面试时答得也不好,今天趁此机会做一个梳理,知 ...

  8. OpenCascade极简环境搭建（QT环境）

    现在网上关于OpenCascade(OCCT)的环境搭建几乎都是下载源码,然后实时MinGW来编译生成源码.但是,官方有提供Windows平台下的可执行文件,如果想快速了解OpenCascade(OC ...

  9. CF1601C题解

    赛时一小时,赛后十分钟. 题意:给定一个序列 \(a\) 和一个集合 \(b\),问将 \(b\) 中所有元素插入 \(a\) 后逆序对最少是多少. 观察样例解释,发现 \(b\) 已经被排序过了,于 ...

  10. Python：用pyinstrument做性能分析

    导引 在计算密集型计算或一些Web应用中,我们常常需要对代码做性能分析.在Python中,最原始的方法即是使用time包中的time函数(该函数以秒为计时单位): from time import s ...