盒模型 边距 缩写 注意问题

当四个边距都相同,或者上下相同并且左右相同的时候可以使用缩写,另外左右相同的时候也可以使用缩写,但是如果仅仅是上下相同,则不可以使用缩写;

例如:

左右相同:margin:10px 15px 11px

如果上下边距都是10px,但是也用缩写的时候:margin:10px 15px 11px,就跟上边一样,所以,这个时候是错误的;

边距合并:

margin在左右方向上是叠加的,但是上下方向上却是叠加的,取两个当中最大值;

IE6下的margin  bug

IE6会在特定的条件下,将设置的横向margin值变成两倍,条件:

1.元素必须浮动(float);

2.元素必须具有横向margin

padding是没有自适应的,只有margin才有,margin:0 auto;

盒模型 边距 缩写 注意问题

时间: 2024-10-08 19:35:25

盒模型 边距 缩写 注意问题的相关文章

盒模型-外边距合并

1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="

盒模型——内边距

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>postion</title>        <style>            .box1{                /*                 *使用width来设置盒子内容的宽度                 * height来

盒模型——外边距

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>postion</title>        <style>            .box1{                width:200px;                height:200px;                backgr

你真的了解盒模型么

说到前端, 大家第一反应是不是都是vue.react.webpack等这些大大小小的框架或者工具, 但其实这些都是和js相关的, 真正的样式会被大家忽略.其实真正呈现给大家看到华丽的页面, 都是样式才让他们多了那份色彩.那么大家觉得简单的css样式, 真的简单么? 让我们一起来看下, 开启css的入坑之旅, 今天一起跟大家简单聊聊盒模型的相关问题...... 盒模型 百度知道对此的解释, 很有意思, 在此引用一下 CSS盒子模型, 内容(CONTENT)就是盒子里装的东西; 而填充(PADDIN

web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}

盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 10p

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

关于盒模型的外边距padding和内边距margin

边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 padding: 10px 20px 30ox;三个值代表 上.左右.下 padding: 10px 20px;两个值代表  上下/左右 padding: 10px;一个值代表四个方向一致 /* 外边距 */ margin:20px 30px 30px 30px;若有四个值代表 

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

flexbox-CSS3弹性盒模型flexbox完整版教程

原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开发 | 精选推荐•CSS3 | flexbox | 弹性布局•16928View19 文章目录 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子.是新手入门flexbox的一个优秀教