美文网首页
CSS布局--盒子模型的初步思考

CSS布局--盒子模型的初步思考

作者: 海吃鱼 | 来源:发表于2017-08-22 13:44 被阅读0次

还是之前的九宫格练习,今天完善它的时候想把九宫格(div里面的div)居中,先是按搜索到的方案使用margin:0 auto,不起作用。思考了一下,其实根本没必要用margin。

用这个例子来理解一下盒子模型。在div里面,不论是文字还是图片还是div,所有元素都被包含于content里面,元素从左往右,从上往下依次排列,没有元素默认状态下就在content里面居中。要在content里居中,要用到position(定位),这个下次再继续研究。这次我们采用padding来解决。

元素居中并不意味着一定要在content里面居中,只要看起来居中即可。譬如,如果元素位于content的左上,那么我们令content往右下移位适当距离,就可以让元素在文档中居中。所以我们给padding-left和padding-top设置合适的值就可以解决居中问题了。

相关文章

  • CSS布局--盒子模型的初步思考

    还是之前的九宫格练习,今天完善它的时候想把九宫格(div里面的div)居中,先是按搜索到的方案使用margin:0...

  • CSS flex弹性盒子布局

    CSS 弹性盒子布局 是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型...

  • Flex布局

    CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中...

  • CSS盒子模型

    CSS盒子模型 1.盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页...

  • 2019-01-03

    一、css 1.css引入方式(3+1) 2.盒子模型(w3c盒子模型+ie盒子模型) 3.浮动(float:布局...

  • css梳理

    [TOC] CSS单词梳理 CSS的核心知识: 定位 + 布局 + 盒子模型 + 背景 + ...

  • 前端开发-CSS盒子模型

    css盒子模型是css中一个重点也是难点,因为这个盒子模型与定位属性会设计到布局的问题盒子模型具有1.边框(bor...

  • css盒子模型

    css盒子模型是css中一个重点也是难点因为这个盒子模型与定位属性会设计到布局的问题盒子模型具有1.边框(bord...

  • 第八章 Web应用开发技术 JavaScript

    布局的核心概念: 1、CSS采用盒子模型来处理每个HTML元素,布局就是控制每个盒子的具体位置。 2、CSS中包含...

  • 第四周 弹性盒子模型

    CSS3弹性盒子模型 基本概念: Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS...

网友评论

      本文标题:CSS布局--盒子模型的初步思考

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