前端面试题整理——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:我这里挑一点来做就好了, ...
随机推荐
- laravel7 搜索分页
html: <form action="{{url('http://www.yanbing.com/fang/index')}}" method="get" ...
- gitee的使用
git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...
- Django基础三之路由、视图、模板
Django基础三之路由.视图.模板 目录 Django基础三之路由.视图.模板 1. Django 请求和返回周期 1.1 路由层之路由匹配 1.2 有名分组 1.3 无名分组 2. 反射解析 3. ...
- prometheus虚拟化安装脚本
在线安装下载链接:https://files.cnblogs.com/files/blogs/705493/online_prometheus.sh 离线安装下载链接:https://files.cn ...
- Mysql等保部分加固
一.等保要求:操作系统和数据库系统管理用户身份标识应具有不易被冒用的特点,口令应有复杂度要求并定期更换. 实施步骤: 启用口令复杂审核(5.6.6版本以上,才有此模块功能,需要重启mysql). 查看 ...
- LINUX系统、磁盘与进程的相关命令
ps ef:完整显示当前系统中所有运行的进程 kill 停止或杀死进程.9表示强制杀掉进程或任务 df 显示磁盘空间使用情况 du 用于显示指定目录下的文件以及子目录所占磁盘空间的大小. 与磁盘有关的 ...
- dfs:10元素取5个元素的组合数
#include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...
- 【freertos】005-启动调度器分析
前言 本节主要讲解启动调度器. 这些都是与硬件相关,所以会分两条线走:posix和cortex m3. 原文:李柱明博客:https://www.cnblogs.com/lizhuming/p/160 ...
- java 基础知识(四)
自己写一个简单的Map 清浅池塘 程序员,专栏:Java那些事儿唯一作者,咨询前请先点详细资料 130 人赞同了该文章 许多许多年以前,在自学Java的时候,笔者曾经写过一个简单的Map,当年很有 ...
- 请说说Struts1和Struts2的区别?
特性 Struts1 Struts2 Action Struts1.x要求Action类要扩展自一个抽象基类.Struts1.x的一个共有的问题是面向抽象类编程而不是面向接口编程. Struts2 ...