美文网首页
前端总结--页面布局问题(1)

前端总结--页面布局问题(1)

作者: zhenlanTJU | 来源:发表于2019-01-17 16:31 被阅读0次

margin:0 auto在不同场景下生效条件如下:         

块级元素:给定要居中的块级元素的宽度。         

行内元素:①设置display:block;②给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置)         

行内块元素:设置display:block。(如input、button、img等元素,自带宽度可以不用设置其宽度)  

 注: ①可以通过对块级元素设置 text-align:center;的方式来实现内联元素(如文本、图片)居中         ②margin:0 auto;可以使盒子居中,text-align:center;可以使此盒子内的内联元素居中,故有时需要两者结合使用才能使得盒子及其中文本一起居中。 

相关文章

  • 前端总结--页面布局问题(1)

    margin:0 auto在不同场景下生效条件如下: 块级元素:给定要居中的块级元素的宽度。 行内元素:①设置di...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • 前端面试重点——居中问题

    前端面试重点——居中问题 在页面布局开发中,居中问题是我们经常碰到的问题,掌握居中问题对于解决页面布局非常重要,同...

  • 菜鸟上路之前端知识整理笔记(6)

    一、前端菜鸟常见问题总结 1、布局好之后,在浏览器里面打开验证页面的时候,出现盒子模型消失,或重叠的现象。通常来讲...

  • css-grid布局

    css布局是前端页面无法避免的一个问题,经典的圣杯布局,水平/垂直居中问题等,我们以前用到的tabel布局,浮动布...

  • 前端页面中几种常用的flex布局

    以下是前端开发中,常见的几种页面布局,使用flex实现 1.布局一 2.布局2 3.布局3

  • 面试成功锦囊之页面布局

    说起前端开发,首先会想到页面布局,作为资深前端来说,用页面布局来谈前端可能会认为太浅显,但作为前端开发中最基础的技...

  • 微网站开发技术点

    基于html5的移动web页面搭建技术总结 1.技术要点 1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的...

  • 回顾经典的css布局结构--圣杯和淘宝双飞翼

    前端页面的三栏布局为常见的展现结构,中间栏(main)的宽度不确定,左右两栏的宽度固定。本文总结回顾经典的圣杯布局...

  • 前端页面设计(三)

    前端页面布局 (1)静态文件 新建statics目录(存放css/fonts/imgs/js/plugins) s...

网友评论

      本文标题:前端总结--页面布局问题(1)

      本文链接:https://www.haomeiwen.com/subject/biiidqtx.html