盒子模型

可视宽(高)=border+padding+width(height)

1> padding内填充(padding在元素的边框以内,内容之外,padding会显示元素的背景) Top|right|bottom|left

2>Margin:(边框以外,不显示元素的背景) Top|right|bottom|left

margin合并的问题(相邻两个元素上下margin是叠加,取最大值显示) Margin传递问题 (子元素的margin会传递给父级)

解决margin(塌陷)传递的问题 border overflow float 解决margin合并的问题 绕过这个bug

Margin-left:auto(注意下距离左侧auto,会把剩下的空余距离全都占掉) Margin-right同理 Margin:0 auto;居中

box-sizing 盒模型解析模式 Content-box 标准盒模型 width/height=border+padding+content Border-box 怪异盒模型 width/height=content

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android知识总结——Path常用方法解析 - 简书

前言:开发过程中很容易忘记一些API的使用方法,网上搜索或者在源码里找也很难短时间内筛选出自己需要的,遂自己将这些知识总结一番

1143
来自专栏深度学习之tensorflow实战篇

R语言高级绘图命令(标题-颜色等)

plot(x)          以x的元素值为纵坐标、以序号为横坐标绘图 plot(x,y)        x(在x-轴上)与y(在y-轴上)的二元作图 ...

6606
来自专栏非著名程序员

Android 自定义View高级特效,神奇的贝塞尔曲线

? (这就是贝塞尔曲线 ) 投稿作者:一口仨馍/csdn 原文链接: http://blog.csdn.net/qq_17250009/article/de...

5619
来自专栏编程

你不知道的前端算法之热力图的实现

本文作者:TalkingData 可视化工程师李凤禄 编辑:Aresn inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效...

2729
来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

1.4K7
来自专栏较真的前端

深入研究CSS字体度量及CSS 盒子

1703
来自专栏jojo的技术小屋

原 CSS3 filter

作者:汪娇娇 日期:2016.10.9 其实之前几乎都没用过filter属性,就算知道也只是在脑中留了点浅浅的印象,直到最近因为项目的原因,才对filter进行...

2083
来自专栏懒人开发

(10.5)James Stewart Calculus 5th Edition:Conic Sections

832
来自专栏为数不多的Android技巧

Xfermode in android

Xfermode有三个实现类:AvoidXfermode, PixelXorXfermode以及PorterDuffXfermode。 前两个类因为不支持硬件加...

2074
来自专栏计算机视觉与深度学习基础

Leetcode 221. Maximal Square

Given a 2D binary matrix filled with 0's and 1's, find the largest square conta...

21010

扫码关注云+社区

领取腾讯云代金券