美文网首页
盒模型基础问题

盒模型基础问题

作者: 羞涩的涩 | 来源:发表于2016-05-11 18:53 被阅读44次

盒模型包括哪些属性

  • margin 外边距,有四个方向
  • top 上
  • right 右
  • bottom 下
  • left 左
  • padding 内边距,有四个方向
  • top 上
  • right 右
  • bottom 下
  • left 左
  • border 边框,有四个方向
  • top 上
  • right 右
  • bottom 下
  • left 左
  • content 内容

盒模型的宽带=左外边距+左边框宽度+左内边距+内容+右内边距+右边框宽度+右外边距


text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align: center的作用是让元素内容水平居中,主要作用于块级元素、表单格元素里的行内元素组成的内容(对块级元素本身不起作用).
能够让块级元素内所有的由行内元素(a、span、img、input....)组成的内容水平居中。

如果遇到一个属性想知道兼容性,在哪查看?

在这个链接http://caniuse.com/ 框内查询其兼容性。

IE 盒模型和W3C盒模型有什么区别?

盒模型的计算方法有两种

  • IE盒模型
  • W3C盒模型

它们的区别在于对width的计算。如下图:


我是图

从图上可以看出W3C的盒模型里width宽度只包含了内容,而IE盒模型的宽度包括了padding和border宽度。这就造成了我们计算空间大小时在不同的浏览器下会造成偏差。

所以我们要使用<!DOCTYPE html>
声明避免进入IE盒模型。

参考博客:
http://blog.csdn.net/sunhengzhe/article/details/46679595


  • 本博客版权归羞涩的涩和饥人谷所有,转载请注明出处

相关文章

  • 盒模型基础问题

    盒模型包括哪些属性 margin 外边距,有四个方向 top 上 right 右 bottom 下 left ...

  • 盒模型

    盒模型 盒模型基础属性 widthmin-widthmax-width heightmin-heightmax-h...

  • 2019-04-05

    CSS基础样式&盒模型&字体图标 1.IE 盒模型和W3C盒模型有什么区别? IE盒模型的width包括conte...

  • CSS布局模型(5.11)

    1.回顾盒模型 布局模型 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础...

  • CSS布局模型

    一、概述: 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • 盒子模型

    CSS中由一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析.CSS中每一个元素都是一个盒模型,包...

  • 弹性盒模型Flex指南

    弹性盒模型Flex指南 Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助...

  • css布局模型

    布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  • css盒模型基础

    1.盒模型简介

  • W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,...

网友评论

      本文标题:盒模型基础问题

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