css - 小记二（隐藏三元素、meta viewport）

最新推荐文章于 2023-08-09 13:32:07 发布

置二

最新推荐文章于 2023-08-09 13:32:07 发布

阅读量264

点赞数 1

分类专栏：【CSS 相关】文章标签： css 前端面试

本文链接：https://blog.csdn.net/weixin_42675488/article/details/85371355

版权

【CSS 相关】专栏收录该内容

9 篇文章 1 订阅

订阅专栏

学习文献
渐变+渐变2	移动端rem换算
	掘金—大厂的面试文
LESS CSS 框架简介	css3动画的用法
	CSS布局 ——从display，position， float属性谈起【谦行】
	——
文章目录：
	1、display：none；visibility：hidden；opacity：0；的区别；
	2、前端html5新增的特性及语义化标签、meta viewport相关；
	3、position属性值的区别；
	4、浮动的问题和解决
	5、BFC
	6、css盒子模型到底的思想是什么

html5 — 《head》:

bootstrap 框架下手机屏幕不缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

keywords（关键词），description（内容摘要），有利于seo优化
<meta name="Keywords" content="马尼亚,商贸">
<meta name="description" content="马尼亚商贸">

PS：3个标签按重要性来分：title＞description＞keywords

浏览器滚动轴：
在这里插入图片描述

一、display：none；visibility：hidden；opacity：0；的区别：

直观理解：
display:none 属性	不占据空间，只会把元素隐藏起来，因为是直接隐藏，所以会改变页面的排版/结构；
visibility:hidden 属性	会依然占据空间，元素会被隐藏，但是不会消失，隐藏后不会改变html原有结构；
opacity:0;	改变元素的透明度，元素隐藏，依然占据空间，隐藏后不会改变页面结构；

opacity 对于其他二者，他是可以能点击的，而其他二者却不能；
display:none隐藏产生reflow和repaint(回流与重绘)；地址：回流
而visibility:hidden没有这个影响前端性能的问题；（postition: absolute;visibility:hidden; 隐藏）；

二、前端html5新增的特性及语义化标签： html5标签正确书写方式

标签	描述
< hrader>< /header>	`定义了文档的头部区域`，会和h1-h6标签和hgroup标签组合，包含一个搜索框、导航栏、logo等栏目
< footer>< /footer>	定义了文档的尾部区域，通常用来表示文档的作者信息、相关链接，版权资料等
< nav>< /nav>	定义了文档的导航，通常只用于页面的主要导航，侧边栏导航不适用；
< section>< /section>	定义文档中的节（section、区段）或一个文档中的组成部分，和父标签是从属关系。article和section之间允许相互嵌套；
< article>< /article>	用来定义一个文档中自成一体的东西，常article标签里面有header、footer等标签。也可以自己嵌套使用；`是一个容器元素`
< aside>< /aside>	通常包含在article标签中作为主要内容的附属信息部分，aside和article常常组合使用
	——
< detailes>< /detailes>	用于描述文档或文档某个部分的细节
< summary>< /summary>	标签包含 details 元素的标题
< dialog>< /dialog>	定义对话框，比如提示框
< hgroup>< /hgroup>	用来定义一个文档中标题组。多个h1-h6标签可以放在hgroup标签里面；
< !DOCTYPE HTML> 对字母大小写不敏感

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, email@gmail.com”/>    网页作者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

1、什么是HTML语义化？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时能让浏览器的爬虫和机器更好的解析；

2、为什么要语义化？
（a )、为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构，一目了然；
（b）、有利于提高用户体验，例如title、alt 用于解释名词或者解释图片信息、label标签的活用；
（c）、有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息：
爬虫依赖于标签来确定上下文和各个关键字的权重；
（d）、方便其他设备解析，以更加有意义的方式渲染网页；
（e）、便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化；

三、position属性值的区别：

属性值	定义
static（静态定位）	默认值。没有定位，元素出现在正常的文档流中；
reative （相对对位）	生成相对定位元素，脱离正常的文本流，但其在文本流中的位置依然存在；
absolute （绝对定位）	生成绝对定位元素，相对于static 定位外的第一个父元素进行定位，而这个`父层并不一定是其直接父层`。如果其父层中都未定义absolute或relative，则其将相对body进行定位；
fixed （固定定位）	生成绝对定位的元素，相对于浏览器窗口进行定位；
浮动、绝对定位和相对定位 -元素脱离文档流	——

四、浮动的问题和解决：

浮动会造成父元素高度塌陷！

.clearfix:after {
    content: ".";     /**//*内容为“.”就是一个英文的句号而已。如果不写在Firefox旧版本下会有问题。*/
    display: block;   /**//*加入的这个元素转换为块级元素。*/
    clear: both;     /**//*清除左右两边浮动。*/
    visibility: hidden;      /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
    height: 0;     /**//*高度为0；*/
    overflow: hidden;
}
/**//*这是针对于IE6/7的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
.clearfix { zoom:1;}   

/** 添加after和before双伪元素： */
.clearfix:after,.clearfix:before{ content:"";display:table;}
.clearfix:after{clear:both}
.clearfix{*zoom:1}

1、浮动的本质：让div块级元素（行内元素）在一行显示。float
2、清除浮动的本质：解决父级元素，因子元素浮动而内部高度为零
3、元素浮动以后，不站有原来的位置，脱离标准流。

五、理解CSS中的BFC(块级可视化上下文)：

BFC也是HTML中的一个盒子，一个看不见的盒子；其是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

满足条件即可形成BFC
	1、float属性不为none.；
	2、position属性不为static和relative；
	3、display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex；
	4、overflow属性不为visible；
–	–
具体表现：
	float: left: 使元素左浮动，并且其他元素对其环绕
	display: table : 在响应式布局中会有问题
	overflow: scroll : 可能会出现你不想要的滚动条
	————
最好用的：	overflow: hidden: 消除溢出部分