css是前端必须掌握的技能之一。其中的box模型,如图所示:

大体就是border、margin、padding和content,概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象,或许您还难以回答上来。下面来看看几个容易搞错的css盒子模型细节。

问题一:嵌套块级元素时,子元素margin的参考标准是?具体来说就是父元素的content-box,padding-box还是border-box?

来看以下的例子:

        #box3
{
width:400px;
height:400px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
overflow:hidden;
}
#box3_3
{
width:200px;
height:200px;
margin:20px;
padding:20px;
border:20px solid #0f0;
background-color:#f00;
}

可以清楚看到,子元素margin以包含元素content-box为参考

问题二:overflow:hidden隐藏的是超出哪里的部分呢?具体来说就是超出content-box,padding-box还是margin-box会被隐藏?

依然来看一个例子,css如下:

        #box1
{
width:100px;
height:100px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
overflow:hidden;
}
#box1_1
{
width:200px;
height:200px;
background-color:#f00;
}

通过以上例子可以知道。overflow:hidden,隐藏超出padding-box的部分

问题三:position:absolute定位参考点是什么?

我们都知道,当给一个元素应用position:absolute绝对定位后。会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素左上角的偏移距离。那么这个左上角具体是指父元素哪里呢?元素本身又以哪个点来定位呢?

        #box2
{
position:relative;;
width:400px;
height:400px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
}
#box2_2
{
position:absolute;
left:auto;
top:auto;
width:100px;
height:100px;
padding:20px;
border:10px solid #0f0;
background-color:#f00;
}

子元素有margin 子元素无margin left/top为默认值 left/top为0

通过点击上面的按钮,可以得到以下结论:

  • 元素自身的参考点是最外围的盒子,即margin-box,无margin则为border-box,以此类推。
  • left/top指定值后,参照父元素的padding-box左上角
  • left/top为默认值,子元素还在原来的位置上,即相对于父元素的content-box左上角

问题四:元素的背景覆盖到哪个区域,border-box?padding-box还是margin-box?

这里要区分background-color和background-image两种情况。

  • 1.对于背景颜色,颜色会填满border-box。
  • 2.对于背景图片,默认会填充padding-box。左上方从padding-box的区域开始填充,右侧和下侧会超出到border-box的区域,但不会超出到margin-box
  • 3.在css3中,可以通过background-origin更改背景图片的填充区域

来看以下css,

        #box4
{
width:100px;
height:100px;
margin:20px;
padding:20px;
border:20px dotted;
background-color:#ccc;
overflow:hidden;
}
#box5
{
width:400px;
height:300px;
margin:20px;
padding:20px;
border:20px dotted;
background-color:lightblue;
background-image:url('https://images0.cnblogs.com/i/207603/201404/151302359783891.png');
background-repeat:no-repeat;
overflow:hidden;
}
background-origin: border-box padding-box content-box

几个容易出错的css盒子模型细节的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  3. 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  4. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  5. 标准的CSS盒子模型?与低版本IE的盒子模型有什么不同的?

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  6. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  7. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  8. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  9. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

随机推荐

  1. asp.net中遍历界面上所有控件进行属性设置

    * 使用方法: *  前台页面调用方法,重置:    protected void Reset_Click(object sender, EventArgs e)        {           ...

  2. 【C++对象模型】构造函数语意学之一 默认构造函数

    默认构造函数,如果程序员没有为类定义构造函数,那么编译器会在[需要的时候]为类合成一个构造函数,而[需要的时候]分为程序员需要的时候和编译器需要的时候,程序员需要的时候应该由程序员来做工作,编译器需要 ...

  3. kmeans算法的matlab实践

    把图像中所有的像素点进行RGB聚类分析,然后输出看结果 img = imread('qq.png'); %取出R矩阵,并将这个R矩阵拉成一列 imgR = img(:,:,1); imgR = img ...

  4. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  5. [POJ] #1001# Exponentiation : 大数乘法

    一. 题目 Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 156373   Accepted: ...

  6. CodeForces 689D Friends and Subsequences (RMQ+二分)

    Friends and Subsequences 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/H Description Mi ...

  7. POJ 3312 Mahershalalhashbaz, Nebuchadnezzar, and Billy Bob Benjamin Go to the Regionals (水题,贪心)

    题意:给定 n 个字符串,一个k,让你把它们分成每组k个,要保证每组中每个字符串长度与它们之和相差不能超2. 析:贪心策略就是长度相差最小的放上块. 代码如下: #pragma comment(lin ...

  8. HDU 4489 The King’s Ups and Downs (DP+数学计数)

    题意:给你n个身高高低不同的士兵.问你把他们按照波浪状排列(高低高或低高低)有多少方法数. 析:这是一个DP题是很明显的,因为你暴力的话,一定会超时,应该在第15个时,就过不去了,所以这是一个DP计数 ...

  9. properties.load(in); 引出的中文乱码问题

    /** * Reads a property list (key and element pairs) from the input byte stream. * The input stream i ...

  10. linux 查看当前所在目录的全路径

    有时候,使用linux的shell的时候需要查看当前位置的全路径,可以使用 pwd命令 当然,知道了该命令就可以通过man pwd来查看该命令的全部帮助手册.