前端面试题整理——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:我这里挑一点来做就好了, ...
随机推荐
- c/c++（c++和网络编程）日常积累（三）
asio::transfer_all() 有空研究一下这个字段 malloc和new的区别 https://blog.csdn.net/weixin_39411321/article/details/ ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- Java 将XML转为PDF
可扩展标记语言(XML)文件是一种标准的文本文件,它使用特定的标记来描述文档的结构以及其他特性.通过将XML转换为PDF,能够便于文件传输及共享.本文,将介绍通过Java代码来实现该格式转换的方法. ...
- Git更新本地仓库及冲突"Commit your changes or stash them before you can merge"解决
Git中从远程的分支获取最新的版本到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge git fetch origin mastergit log ...
- [ Skill ] print println printf fprintf sprintf lsprintf
https://www.cnblogs.com/yeungchie/ 几种 print 函数的差异 print 接收任意的数据类型,并打印到 CIW print( 12345 ) ; 12345 pr ...
- pandas常用操作详解(复制别人的)——数据透视表操作：pivot_table()
原文链接:https://www.cnblogs.com/Yanjy-OnlyOne/p/11195621.html 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表 ...
- 《Shader入门精要》第11章-11.3.1流动的河流中的offset.x的解释
在我学习入门精要的时候,经常遇到不解释api,甚至是关键代码的实现原理. 11.3.1流动的河流中的offset.x的sin函数查了一下好像大家也都是书上原话直接复制,现在好不容易想明白了希望能帮到和 ...
- 今天我自己第一次写了一个Windows批处理bat脚本，一起学习一下吧。
今天我自己第一次写了一个Windows批处理bat脚本,备注一下 事情原由:自己使用Java开发了一个加解密的工具.但是当把工具给别人使用的时候,别人还需要把代码编译打包, 然后还需要看一下代码里面的 ...
- 网站SQL注入防御实战
SQL注入作为直接威胁web业务的最严重攻击行为,已经被大多数的网站管理员所了解,这种通过HTTP标准端口,利用网页编码不严谨,提交精心构造的代码实现对数据库非授权访问的攻击方法,已经被越来越多的sc ...
- Java基础——System类
System包含几个有用的类字段和方法,因为成员都是静态的所以不能被实例化,可以直接通过类名调用 System类的常用方法: 方法名 说明 public static void exit(int st ...