最开始的 base.html 是第一个,发现在顶部有一个宽度约 0.5cm的空白且无法定位到后,按照 bootstrap/base.html 的样式重写了一份,就没有空白了。
但是对于这2个html,观察了浏览器最终渲染的html页面,并没有发现代码上存在差异,所以不知道为什么会有这样的一处空白,请了解的人指教。
有空白的 base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ===== Mobile viewport optimized ===== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- ===== Meta Tags - Description for Search Engine purposes ===== -->
<meta name="description" content="Movify - Movies, Series & Cinema HTML Template">
<meta name="keywords" content="movies, series, online streaming, html template, cinema html template">
<meta name="author" content="GnoDesign">
<!-- ===== Website Title ===== -->
<title>{% block title %}{{ title|default }}{% endblock title %}</title>
<!-- ===== Favicon & Different size apple touch icons ===== -->
<link rel="shortcut icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-retina.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-retina.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-pro.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-6-plus.png') }}">
<link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/images/icon-hd.png') }}">
<link rel="icon" sizes="128x128" href="{{ url_for('static', filename='assets/images/icon.png') }}">
<!-- ===== Google Fonts ===== -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
{% block css %} <!--css模块区域-->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/settings.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/layers.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/navigation.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/magnific-popup.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/jquery.mmenu.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/owl.carousel.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/responsive.css') }}">
{% endblock %}
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- =============== START OF PRELOADER =============== -->
<div class="loading">
<div class="loading-inner">
<div class="loading-effect">
<div class="object"></div>
</div>
</div>
</div>
<!-- ================= END OF PRELOADER =============== -->
<!-- =============== START OF RESPONSIVE - MAIN NAV =============== -->
<nav id="main-mobile-nav"></nav>
<!-- ================= END OF RESPONSIVE - MAIN NAV =============== -->
<!-- =============== START OF WRAPPER =============== -->
<div class="wrapper">
<!--引入网页的底部模板-->
{% include "header.html" %}
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ message }}</div>
{% endfor %}
{% block content %}
{% block page_content %}{% endblock %}
{% endblock %}
<!--引入网页的底部模板-->
{% include "footer.html" %}
</div>
<!-- =============== END OF WRAPPER =============== -->
<!-- =============== START OF GENERAL SEARCH WRAPPER =============== -->
<div class="general-search-wrapper">
<form class="general-search" role="search" method="get" action="#">
<input type="text" placeholder="Type and hit enter...">
<span id="general-search-close" class="ti-close toggle-search"></span>
</form>
</div>
<!-- =============== END OF GENERAL SEARCH WRAPPER =============== -->
<!-- ===== Start of Back to Top Button ===== -->
<div id="backtotop">
<a href="#"></a>
</div>
<!-- ===== End of Back to Top Button ===== -->
{% block js %}<!--js模块区域-->
<!-- ===== All Javascript at the bottom of the page for faster page loading ===== -->
<script src="{{ url_for('static', filename='assets/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.ajaxchimp.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.mmenu.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.inview.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.countTo.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.countdown.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/owl.carousel.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/isotope.pkgd.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/headroom.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>
<!-- ===== Slider Revolution core JavaScript files ===== -->
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.tools.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.revolution.min.js') }}"></script>
<!-- ===== Slider Revolution extension scripts ===== -->
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.actions.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.carousel.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.kenburn.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.layeranimation.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.migration.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.navigation.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.parallax.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.slideanims.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.video.min.js') }}"></script>
{% endblock %}
</body>
</html>
没有空白的 html
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{ title|default }}{% endblock title %}</title>
{%- block metas %}
<meta charset="UTF-8">
<!-- ===== Mobile viewport optimized ===== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- ===== Meta Tags - Description for Search Engine purposes ===== -->
<meta name="description" content="Movify - Movies, Series & Cinema HTML Template">
<meta name="keywords" content="movies, series, online streaming, html template, cinema html template">
<meta name="author" content="GnoDesign">
{%- endblock metas %}
<!-- ===== Favicon & Different size apple touch icons ===== -->
<link rel="shortcut icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-retina.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-retina.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-pro.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-6-plus.png') }}">
<link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/images/icon-hd.png') }}">
<link rel="icon" sizes="128x128" href="{{ url_for('static', filename='assets/images/icon.png') }}">
{%- block styles %}
<!-- ===== Google Fonts ===== -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/settings.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/layers.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/navigation.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/magnific-popup.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/jquery.mmenu.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/owl.carousel.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/responsive.css') }}">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
<!-- =============== START OF PRELOADER =============== -->
<div class="loading">
<div class="loading-inner">
<div class="loading-effect">
<div class="object"></div>
</div>
</div>
</div>
<!-- ================= END OF PRELOADER =============== -->
<!-- =============== START OF RESPONSIVE - MAIN NAV =============== -->
<nav id="main-mobile-nav"></nav>
<!-- ================= END OF RESPONSIVE - MAIN NAV =============== -->
<!-- =============== START OF WRAPPER =============== -->
<div class="wrapper">
<!--引入网页的底部模板-->
{% include "header.html" %}
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ message }}</div>
{% endfor %}
{% block content %}
{% block page_content %}{% endblock %}
{% endblock %}
<!--引入网页的底部模板-->
{% include "footer.html" %}
</div>
<!-- =============== END OF WRAPPER =============== -->
<!-- =============== START OF GENERAL SEARCH WRAPPER =============== -->
<div class="general-search-wrapper">
<form class="general-search" role="search" method="get" action="#">
<input type="text" placeholder="Type and hit enter...">
<span id="general-search-close" class="ti-close toggle-search"></span>
</form>
</div>
<!-- =============== END OF GENERAL SEARCH WRAPPER =============== -->
<!-- ===== Start of Back to Top Button ===== -->
<div id="backtotop">
<a href="#"></a>
</div>
<!-- ===== End of Back to Top Button ===== -->
{% block scripts %}
<!-- ===== All Javascript at the bottom of the page for faster page loading ===== -->
<script src="{{ url_for('static', filename='assets/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.ajaxchimp.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.magnific-popup.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.mmenu.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.inview.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.countTo.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/jquery.countdown.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/owl.carousel.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/isotope.pkgd.min.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/headroom.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>
<!-- ===== Slider Revolution core JavaScript files ===== -->
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.tools.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.revolution.min.js') }}"></script>
<!-- ===== Slider Revolution extension scripts ===== -->
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.actions.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.carousel.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.kenburn.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.layeranimation.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.migration.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.navigation.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.parallax.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.slideanims.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.video.min.js') }}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}