网站建设平台官网河间米各庄,帮您做网站,淮安做网站卓越凯欣,在线制作图片的免费软件从最简单的盒子开始思考
先把实际应用摆出来#xff1a;
margin#xff1a;居中#xff0c;控制边距。
padding#xff1a;控制边距。
border#xff1a;制作三角形。 盒子分为内容盒子#xff0c;内边距盒子#xff0c;边框和外边距。
如果想让块级元素居中#…从最简单的盒子开始思考
先把实际应用摆出来
margin居中控制边距。
padding控制边距。
border制作三角形。 盒子分为内容盒子内边距盒子边框和外边距。
如果想让块级元素居中需要使用margin-leftauto;margin-rightauto;
如果宽度没有高度没有这样的居中是无效的。 例如图中的效果因为宽度没有高度没有浏览器自动绘制宽度横跨浏览器高度为零。一旦宽度有比如500px 我们会发现margin会自动填充以使得盒子居中注意这里是指内容盒子居中。那么如果我们去掉水平的auto又会发生什么呢 我们发现内容边框是从左往右绘制的marginpaddingborder不设置是不会显示的那么内边距和外边距同时为auto它们有没有优先级 如上图为了严谨一点我们将padding水平部分和margin水平部分的代码顺序也调换了代码调换也是浏览器调试时候的小技巧。
所以综上padding水平和margin水平同时存在的时候margin水平要先于padding水平。 而后我们发现无论在任何情况下padding水平设置auto无效。
所以水平方向只有margin在内容盒子居中方面有贡献。
那么垂直方向的margin又是干嘛的呢
设置了一遍。
貌似一点用处都没有。。。
