前端面试题整理——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:我这里挑一点来做就好了, ...
随机推荐
- （第一章第四部分）TensorFlow框架之张量
系列博客链接: (一)TensorFlow框架介绍:https://www.cnblogs.com/kongweisi/p/11038395.html (二)TensorFlow框架之图与Tensor ...
- 面向对象编程(C++篇2)——构造
目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...
- python库安装中Microsoft Visual C++ is required解决方法
在用pycharm过程中,用pip去安装一些第三方包的时候会出现如下错误,缺少C++编译器,因为有些程序需要使用,没有C++接口会报错,查阅相关资料及自己的解决方案 error: Microsoft ...
- SQL从零到迅速精通【规则和约束】
1.[创建规则] 为stu_info表定义一个规则,指定其成绩列的值必须大于0,小于100,输入语句如下. USE test_db; GO CREATE RULE rule_score AS @sco ...
- laravel 框架 知识点
get 方法返回一个包含 Illuminate\Support\Collection 实例的结果,其中每一条记录都是 PHP stdClass 对象的一个实例.你可以通过对象属性的方式来获取每个字段的 ...
- 被广泛使用的OAuth2.0的密码模式已经废了，放弃吧
最近一直有同学在问,OAuth2密码模式为啥Spring Security还没有实现,就连新的Spring Authorization Server也没有这个玩意儿. 其实这里可以告诉大家,OAuth ...
- itertools.chain()and itertools.product()操作+pandas.DataFrame.transform
- SpringBoot学习入门之Hello项目的构建、单元测试和热部署等（配图文，配置信息详解，附案例源码）
前言: 本文章主要是个人在学习SpringBoot框架时做的一些准备,参考老师讲解进行完善对SpringBoot构建简单项目的学习汇集成本篇文章,作为自己对SpringBoot框架的总结与笔记. 你将 ...
- vue3-插槽作用域的使用
当我们在父组件定义了一个数组, data() { return { name: ["lkx", "msx"] } } 想把它传到子组件处理后 props: { ...
- SpringMVC工作流程 --通透较详细
SpringMVC工作流程 SpringMVC工作流程 流程说明(重要): (1)客户端发送一个http请求给前端控制器(DispatcherServlet): (2)前端控制器(DispacherS ...