前端面试题整理——HTML/CSS
如何理解语义化：
对应的内容是用相应意思的标签，增加开发者和机器爬虫对代码的可读性。
#div{
width:100px;
padding:10px;
border:1px solid #000;
margin:10px;
}
p{
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值问题</title>
<style>
.box1{
width: 500px;
height:100px;
border:1px solid #000;
padding:10px;
}
.left{
width: 50px;
height:50px;
float:left;
border:1px solid red;
margin-left:-10px;
margin-right:-20px;
}
.right{
width: 50px;
height:50px;
float:left;
border:1px solid blue;
}
.box2{
width: 500px;
height:200px;
border:1px solid #000;
padding:10px;
}
.top{
width: 50px;
height:50px;
border:1px solid red;
margin-top:-10px;
margin-bottom:-20px;
}
.bottom{
width: 50px;
height:50px;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>测试 margin-left、margin-right为负值</h2>
<div class="box1">
<div class="left"></div>
<div class="right"></div>
</div>
<h2>测试 margin-top、margin-bottom为负值</h2>
<div class="box2">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
<style>
.left{
float:left;
}
.bfc{
overflow: hidden;
}
</style>
<div class="bfc">
<img class="left" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<p class="bfc">文字文字文字文字文字文字文字文字</p>
</div>
什么是BFC？如何应用
/*手写clearfix*/
.clearfix:after{
content:'';
display: block;
clear:both;
}
/*
*zoom:1;兼容IE低版本
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float布局</title>
<style>
.box1{
padding:0;
margin:0;
}
.box1 header,.box1 footer{
height:20px;
background:#ccc;
text-align:center;
}
.box1 .main{
padding-left:100px;
padding-right:200px;
}
.box1 .content{
height:50px;
background:#666;
float:left;
width: 100%;
margin-right:-100%;
}
.box1 .left{
height:20px;
background:yellow;
width: 100px;
float:left;
margin-left:-100px;
}
.box1 .right{
width:200px;
height:20px;
background: aquamarine;
float:left;
margin-left:100%;
}
/*手写clearfix*/
.clearfix:after{
content:'';
display: block;
clear:both;
}
/*
*zoom:1;兼容IE低版本
*/
</style>
</head>
<body>
<!--圣杯布局-->
<div class="box1">
<header>header</header>
<div class="main clearfix">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</div>
<!--双飞翼布局-->
<style>
.box2{
padding:0;
margin:0;
}
.box2 #main{
width: 100%;
height:200px;
background:#ccc; }
.box2 #main-wrap{
margin:0 200px 0 100px;
}
.box2 #left{
width:100px;
height:100px;
background:#0000FF;
margin-left:-100%;
}
.box2 #right{
width:200px;
height:100px;
background:red;
margin-left:-200px;
}
.col{
float:left;
}
</style>
<div class="box2">
<div id="main" class="col">
<div id="main-wrap">main</div>
</div>
<div id="left" class="col">
left
</div>
<div id="right" class="col">
right
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.box{
width: 100px;
height:100px;
border:1px solid #000;
display: flex;
justify-content: space-around;
align-items:flex-start;
}
.item{
width: 20px;
height:20px;
background:#000;
border-radius:50%;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
常规使用属性：
flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴对齐方式
body{
font-size:20px;
line-height:30px;
}
p{
font-size:16px;
}
body{
font-size:20px;
line-height:2;
}
p{
font-size:16px;
}
body{
font-size:20px;
line-height:200%;
}
p{
font-size:16px;
}
前端面试题整理——HTML/CSS的更多相关文章
- 前端面试题整理（css）
1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...
- 最近面试前端面试题整理（css部分）
对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 测试 </div> ...
- 前端面试题整理—HTML/CSS篇
1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...
- 【web前端面试题整理02】前端面试题第二弹袭来，接招！
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
- 常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
- 前端面试题（HTML/CSS）
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
- 【web前端面试题整理06】成都第一弹，邂逅聚美优品
前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...
- 2019届校招前端面试题整理——HTML、CSS篇
前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...
- 【web前端面试题整理03】来看一点CSS相关的吧
前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
随机推荐
- django程序在windows服务器上发布
django程序在windows服务器上发布 参考文献:https://www.cnblogs.com/djangocn/p/10227006.html 1.安装 IIS 和 GCI 打开服务器管理器 ...
- 07-Spring整合Mybatis
Spring之整合Mybatis 整合核心思路 由很多框架都需要和Spring进行整合,而整合的核心思想就是把其他框架所产生的对象放到Spring容器中,让其成为Bean. 比如Mybatis,Myb ...
- Solon 1.6.30 发布，更现代感的应用开发框架
相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
- laravel 实现详情分页
选择合适的PHP框架及前端框架布局页面(10分) 首先展示出分类列表,每个分类下只显示3条信息,无需分页 (30分) 在列表页 点击文章标题进入详细页面,对应的文章点击量+1(30分) 在详细页面点击 ...
- mysql 获取当前时间和时间戳
mysql 获取当前时间为select now()运行结果: 2012-09-05 17:24:15 mysql 获取当前时间戳为select unix_timestamp(now()) 运行结果:u ...
- sql server数据库如何存储数组，int[]float[]double[]数组存储到数据库方法
原文地址:https://www.zhaimaojun.top/Note/5475296 将数组存储到数据库的方法 (本人平时同csharp编写代码,所以本文中代码都是csharp代码,有些地方jav ...
- 移动APP开发框架盘点2：Web移动前端框架大全
前言 自上次发布了<移动APP开发框架盘点>后,时间已经过去了三年, 为什么突然又写一篇续集呢?是因为有一个非常有意思的发现. 开源项目其实有一个成熟周期,这个周期大概是三年左右,自Rea ...
- SQL存储过程的学习01
虽工作多年,但是sql的存储过程一致都没怎么用过,今天来按照博客https://www.cnblogs.com/applelife/p/11016674.html来学习一下(我使用postgre sq ...
- kafka分布式的情况下，如何保证消息的顺序?
作者:可期链接:https://www.zhihu.com/question/266390197/answer/772404605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- Java编程：Lock
在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方 ...