你知道的版心和你不知道的版心
第一天写代码的时候别人就告诉我说无论做什么平台只要是基于原生标签的都要使用版心，谁让浏览器的解析顺序是从上之下 从左至右呢
我们看到的内容在没有人为干预的情况下是基于浏览器左上角对齐的
深入一点的相对定位，基于自己原来的位置进行定位 自己走了还占着原来的位置，对于初级程序员来说简直不可理喻了
版心wapper 简称w 是在base.css文件中预定义的一个属性
你知道的是它的属性值可以设置 magin：0 auto； 可以设置内容区域公共宽度
你不知道的是当版心遭遇了脱标事件多么难受
假设我们定义版心magin：0 auto； width ：1200px 宽度为1200像素在document标准流中进行调用
这时候的版心是没有高度的
高度哪去了，高度由内容content撑开，假设内容子盒子是可以设置宽高的 子盒子设置浮动让块级block元素在一行显示
这时候父盒子也就是所谓的版心盒子在子盒子脱离标准流的情况下会恢复本来的面貌 也就是高度依然为零
那么下边的标准流会自动填充版心盒子的位置造成内容content重叠，使页面陷入混乱
你不知道的是在页面中 用户都有不喜欢的内容，这时候赋予用户删除特权无疑迎合了用户需求
使用js脚本 设置display：none；不占用标准流隐藏元素 下面的标准流会自动填充空白区域 提高了用户体验
即在一个不设高度且存在内容 内容存在高度的盒子 将内容不占位隐藏后面的内容会自动提升
你知道的版心和你不知道的版心相关推荐
- pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局
pc端常见的几种布局:分栏布局,通栏布局,版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度,让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的 ...
- 湖南大学计算机软件开发毕业论文,湖南大学研究生学位论文_学位论文各页均加页眉,在版心上边线隔一行1 5磅的加粗、细双线(粗线在上),其上居_东城文库...
以下为<湖南大学研究生学位论文>的无排版文字预览,完整格式请下载 下载前请仔细阅读文字预览以及下方图片预览.图片预览是什么样的,下载的文档就是什么样的. 湖南大学 研究生学位论文撰写规范 ...
- 平面设计中的网格系统pdf_全面掌握版式设计中的网格系统
网格系统大家并不陌生,它是设计师用来在画面中编排信息的骨架.网格系统是完成理性设计的一种手段,将版面通过格子分割,让各种视觉元素,条理清晰.主次分明.井然有序的排布在一个版面之中. 它能有效的强调出 ...
- 某个元素的距离页面的左边距_如何提高办公写作效率？先设置好页面上的这4类数据，准没错...
有人说,在体制内混的好,首先要文笔好. 这里要说的是,一个文笔好的人,可能在哪里都能混的好.#直言职场# 因为很多表达形式都需要以文字做雏形,进而进行各种形式的变换和转化. 就拿当下很热门的自媒体行业 ...
- 1-2 CSS常用样式笔记
文章目录 CSS常用样式 字体属性 文本属性 盒模型属性 宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用 清除默认样式 高度height应 ...
- web前端之CSS样式案例--博雅网页
前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. 版心 首页的版心如下: 这里我们要普及一个概念,叫"版心".版心是页面中主要内容所在的区域. ...
- HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- 前端学习笔记 - HTML+CSS
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
- 排版设计常用术语和常识
本篇文章主要介绍排版设计过程中涉及到专用术语介绍,对于从事出版工作及设计工作的人士来说掌握这些尤为重要,下面就让我们一起来了解.掌握这些知识吧! ∷ 封面(又称封一.前封面.封皮.书面) 封面印有书 ...
最新文章
- 总编下午茶：挑战者心态能否帮助微软重回云计算巅峰？
- python3 tensorflowprint错误_解决import tensorflow as tf 出错的原因
- 使用librdkafka的C++接口实现简单的生产者和消费者
- PHP内存管理 垃圾回收
- 甜蜜助攻！情侣之间，到底能有多甜甜甜甜甜甜甜甜
- pythonset是什么类型的游戏_Python集合（set）类型的操作
- java jdom_JAVA JDOM生成XML
- ServletConfig对象和ServletContext对象配置初始化参数
- 【LINQ】Linq to SQL -- Count/Sum/Min/Max/Avg 操作符
- .NET中过滤TextBox中输入的html标签
- 如何在macOS Big Sur的Voice Memos中使用增强录音和智能文件夹？
- textarea光标处插入文字
- 区块链 共识算法 分类
- Drools 规则引擎一文读懂
- 温州商学院计算机二级office考试时间,全国计算机二级最新报名通知，注意报名时间，千万别错过！...
- c语言pow的作用,c语言中pow函数的用法是什么？
- JQuery.validate验证表单后Ajax异步提交
- java个人博客源码ssm_基于SSM的个人博客系统源代码
- 【深度学习】(10) 自定义学习率衰减策略（指数、分段、余弦），附TensorFlow完整代码
- 《Android深度探索卷一》读书笔记六