精华内容
下载资源
问答
  • HTML布局,对元素设置内边距padding和外边距margin, padding 的是元素实际内容和元素边框之间的距离,的是边框和内容...2.给背景添加样式时,padding的样式是被渲染的,margin是不会被渲染的 使用方式:...

    在HTML布局中,对元素设置内边距padding和外边距margin,

    padding 指的是元素实际内容和元素边框之间的距离,指的是边框和内容之间的留白区域

    margin 指的是元素实际内容区域以外,加入的留白区域

    padding和margin区别

    1.padding会计入到元素的大小当中

    2.在给背景添加样式时,padding的样式是被渲染的,margin是不会被渲染的

    使用方式:

    margin:遵循的规则是 上 右  下 左,在表达的过程中,存在省略,

    比如:

    1.完整的margin样式

    //上边留白 10px 右边留白 30px  下边留白 20px  左边留白 30px
    margin: 10px 30px 20px 30px;

    2.margin表达式中只包含了三个,则是,省略了左留白,在左留白省略时,采用右留白的值,例如:

    //上留白 10px 右留白 20px 下留白 30px 省略了左留白 做采用 右留白 填充 也就是 左留白也是20px 
    margin: 10px 20px 30px;

    3.margin表达式,只包含了两个样式,

    //例如只设置了 两个样式 也就是 上留白 和下留白一样 10px  左留白和右留白的样式一样都是 30px
    margin: 10px 30px;

    4.在样式中,留白的边距都是一样时,通常只会保留一个值。

    //简单的就是 四周留白全部都是 10px
    margin: 10px;

    5.还有一种,不设置留白,直接设置auto

    //上下的留白空间是10px 左右是居中
    margin: 10px auto;

    padding的样式写法和margin的使用方式一样。

    <html>
    <head>
    	<style type='text/css'>
    	*{
    		padding: 0;
    		margin: 0;
    	}
    	body{
    		background: gray;
    	}
    	.header{
    		width: 500px;
    		height: 200px;
    		background: orange;
    	}
    
    	.div-content{
    		float: left;
    		margin-top: 30px;
    		margin-left: 20px;
    		margin-bottom: 0px;
    		background: green;
    	}
    	.div1{
    		width: 300px;
    		height: 300px;
    		background: blue;
    		display: flex;
    		justify-content: center;
    
    		/*display: table;*/
    		/*padding: 10px 30px 0px 10px;*/
    	}
    	.div10{
    		width: 50px;
    		height: 50px;
    		background: red;
    		padding: 10px 20px;
    		float: left;;
    		border: 10px solid black;
    		/*display: inline-table;*/
    		/*float: left;*/
    		/*margin-left: 50px;*/
    	}
    
    
    	.div11{
    		/*margin: 10px;*/
    		/*margin: 10px 30px 20px 30px;*/
    		/*margin: 10px 20px 30px;*/
    		/*margin: 10px 30px;*/
    		margin: 10px auto;
    		width: 50px;
    		height: 50px;
    		float: left;
    		/*display: inline-table;*/
    		/*display: inline-block;*/
    	/*	width: 100px;
    		height: 100px;*/
    		background: orange;
    	}
    	.div12{
    		width: 50px;
    		height: 50px;
    		background: black;
    		float: right;
    		margin-right: 30px;
    		margin-top: 20px;
    		margin-bottom: 30px;
    		/*margin-left: 50px;*/
    	}
    	.div20{
    		width: 100px;
    		height: 30px;
    		background: green;
    		clear: both;
    		float: right;;
    	}
    	.auto_div{
    		width: 100px;
    		height: 30px;
    		margin: 10px auto;
    		/*margin: auto auto;*/
    		/*margin: auto;*/
    		background-color: red;
    		/*justify-content: center;*/
    	}
    	</style>
    </head>
    <body>
    	<div class='header'></div>
    	<div class='div1'>
    		<div class='auto_div'></div>
    
    <!-- 		<div class= 'div-content'>
    			<div class='div10'>测试一</div>
    			<div class='div11'>测试二</div>
    		</div>
    		<div class='div12'></div>
    		<div class='div20'></div> -->
    	</div>
    </body>
    </html>

    学习博客:

    https://blog.csdn.net/seu_lxy/article/details/88915554

    http://www.w3school.com.cn/css/css_positioning_floating.asp

     

    展开全文
  • display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。 目前IE8+以及其他现代浏览器都支持此属性的。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸...

    1.要给居中的元素一个宽度,否者无效。

    2.该元素一定不能浮动,否者无效。

    3 在HTML中使用标签,需考虑好整体构架,否者全部元素都会居中的。

    4.display:table-cell
    display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。

    目前IE8+以及其他现代浏览器都是支持此属性的。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等。与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。

    设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。

    展开全文
  • CSS 中,width 和 height 内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容...css中盒子模型包含属性margin、border、padding、width与height,他们可以把它转移到我们日常生活中的盒子(箱...

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。之前一直理解有错误,认为width 和 height是元素容器的宽和高。

     

    盒子模型

     

     css中盒子模型包含属性margin、border、padding、width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西(element);而填充(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(border)就是盒子本身了;至于边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。

    css中width与height的计算方法

        在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。

        但是在浏览器中实际的宽度与高度的值是按width=margin-left + margin-right + padding-left + padding-right + width与height=margin-left + margin-right + padding-left + padding-right + height这个计算的。所以当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。因此在我们布局网页的时候要将这一部分内容计算在内。

        例如:#div{margin:10px;padding:10px;border:1px;width:100px;height:100px;} 他的实际width为142px ,height为142px。

    转载于:https://www.cnblogs.com/JSD1207ZX/p/9771828.html

    展开全文
  • margin合并是指在标准的文档流,两个块级元素,设置上下排版时发生元素间距取两者margin-top或margin-bottom最大值的现象。例: css属性: *{ margin: 0px; padding: 0px; } #div1{

    一、什么是margin合并 

    margin合并是指在标准的文档流中,两个块级元素,在设置上下排版时发生元素间距取两者margin-top或margin-bottom最大值的现象。例:

    	<div id="div1"></div>
    	<div id="div2"></div>
    
    css属性:
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #div1{
                width: 50px;
                height: 50px;
                background-color: red;
                margin-bottom: 40px;
            }
            #div2{
                width: 50px;
                height: 50px;
                background-color: green;
                margin-bottom: 60px;
            }
        </style>
    我们想象中的效果应该是这样:
    100然而实际效果是这样:60
    我们发现两个元素上下间距并不是结构上div1的margin-bottom的值加上div2的margin-top的值100px,而是仅为60px, 它选择了上下两个元素中margin-top与margin-bottom的最大值作为两者的间距,这就是margin合并现象。

    二、什么是margin塌陷?

    首先我们看一个例子:

        <div id="div1">
            <div id="div2"></div>
        </div>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #div1{
                width: 100px;
                height: 100px;
                margin: 100px 0 0 100px;
                background-color: deeppink;
            }
            #div2{
                width: 50px;
                height: 50px;
                margin-top: 50px;
                margin-left: 50px;
                background-color: blue;
            }
        </style>
    QQ截图20171015205755QQ截图20171015204016                

                       想象中                         现实中

    这与我们想象中的样式不一样,子级元素并没有在父级元素的右下角,它好像现对于浏览器边框定位了。我们增大子级元素的margin-top,发现当margin-top的值大于一定值时,父级元素跟着子级元素移动了一段距离。这种现象就是margin塌陷。那么如何解决这种问题呢?


    margin塌陷的解决办法:

    1.给父级元素添加border

    利用border来触发bfc(全称:block format context,块级格式化上下文,它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。)给父级加个border就可以让子级元素相对于父级的边界定为。但是这样改变了父级元素的样式,不符合开发的要求,因此这种方法虽然可以解决问题但是是完全无法使用的。

    2.给父盒子添加padding-top

    3.给父盒子添加overflow:hidden

     overflow:hidden子级元素超过父级元素时隐藏。同时也会触发bfc

    4.父盒子:position:fixed

    5.父盒子:display:table

    6.给子元素的前面添加一个兄弟元素

    属性为:content:””;

    overflow:hidden;








                     
    展开全文
  • ... 今天章郎虫对哈罗网吧的模板稍微修改了一下。修改时需要用到css代码的添加或者修改,我学到了Margin和Padding两个属性的区别及简单用法...Margin是指层的边框以外留的空白,用于页边距或者与其它层制造一个...
  • 外边距是指元素边框之外的区域 设置外边距会元素外围创建额外的空白空间 外边距的作用是控制元素和元素之间的距离 使用margin属性来设置外边距 还可以使用margin-top、margin-bottom、margin-left、margin-right ...
  • CSS background系列属性

    2018-12-07 03:39:37
    一、元素背景是指哪些区域 ...在CSS3可用使用background-clip改变元素背景区域。 1.1 background-clip 指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margin。默认背景绘制...
  • CSS盒模型和margin重叠

    2014-07-26 16:40:00
    CSS ,width 和 height 内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。(div的实际占用尺寸变打了) 但: 一旦为页面设置了恰当的 DTD,大多数...
  • 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活的常见事物——盒子(箱子)作一个比喻来理解,所以叫它盒子模式。 ...
  • CSS元素的width和水平margin的设置

    千次阅读 2016-04-05 15:39:40
    如果没有设置box-sizing为其他值,元素默认的width是指其content box的宽度。...1. width,margin-left和margin-right这3个属性中,如果其中某个值为auto,另外两个设定为具体的值,那么设定为auto的属性
  • 在标准的盒子模型下,css中 ...在css中,width和height内容区域的宽度和高度,增加padding,border,和margin不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 例如: 这样设置div:width=300px; padding=...
  • CSS盒子模型什么

    2021-01-19 20:59:13
    CSS(Cascading Style Sheet):层叠样式表将网页的内容与样式进行分离的一种语言,也就是在aspx或html中设计网页的内容,在CSS中设置网页的样式等。 二、什么CSS盒子模型?  网页设计中常听的属性名:内容...
  • 一、正常文档流块级元素的css属性 大家都知道,一个正常的盒子由里向外都由内容、padding、border、margin组成。 1. 平常设置的width:200px; //内容的宽度 width:200px; height: 150px; padding...
  • CSS

    2018-12-25 18:05:48
    &lt;1&gt;CSS:层叠样式表  CSS具有对网页的布局,颜色,背景,宽度,高度,字体进行控制, ... *号定义的属性,一般设置页面一些固定的属性 *{ margin: 0px; padding: 0px;...
  • css,你少不了与margin打交道。你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素的区别?...“空白区”通常是指其他元素不能出现且父元素背景可
  • 什么是CSS盒模型?

    2020-02-22 23:08:16
    CSS盒子模型就是CSS时所使用的一种思维模型,它由四个属性组成:content(内容区)、padding(填充区)、border(边框区)、margin(外边界区),它规定了网页元素如何网页显示以及元素间相互位置关系。...
  • CSS特性

    2018-08-26 19:49:02
    CSS特性 CSS具有两大特性:继承性和层叠性。 继承性 CSS的继承性,子元素继承父元素的某些样式属性,例如在父元素定义字体颜色(color 属性),子元素会继承...在CSS中,具有继承的属性有三大类: 文本...
  • margin扩充介绍

    2018-09-05 17:04:37
    在CSS中margin有着自己独特的一些属性,这边小编一一介绍一下,防止知识的遗漏。 1.margin塌陷现象 首先margin塌陷现象只会在标准文档流中产生,浮动盒子没有margin塌陷现象。 margin塌陷现象是指在竖直上两个...
  • 并排的两个元素之间的margin,是第一个元素的margin-right与第二个元素的margin-left之和,但是不同一排的情况下,两个元素的margin是第一个元素的margin-bottom与第二个元素的margin-top这两个值较大的一个。...
  • CSS总结

    2020-02-24 12:40:55
    在css中可以使用多种属性来水平对齐元素。 对齐块元素 块元素占据全部可用宽度的元素,并且在其前后都会换行。 <h1> <p> <div> 文本对齐 使用margin属性来水平对齐 可通过将左和右边...
  • CSS定位

    2020-07-07 23:14:53
    文档流元素排版布局过程,元素会自动 从左往右,从上往下 的流式排列。并最终窗体自上而下分成一行行,并每行从左至右的顺序排放元素。 从左到右、从上到下按顺序摆放好 默认情况下,互相之间不存在...
  • CSS 继承

    2017-11-03 21:16:25
    所谓css 的继承是指被包在内部的...继承的局限性在css ,继承是非常自然的行为,但是继承也有局限性。有些属性是不能继承的,比如border 属性用来设置边框,它就没有继承性。padding 和margin 也不能继承。能被继承
  • CSS框模型

    2017-06-22 10:11:11
    CSS框模型概述 CSS内边距 padding 属性 单边内边距属性 内边距百分比数值 CSS 边框 边框 边框与背景 边框的样式 定义单边样式 边框的宽度 ...margin 属性 ...单边外边距属性 ... CSS ,width 和 height
  • CSS ,可以使用多种属性来水平对齐元素。 文本对齐,见CSS复习(上)样式——文本text-align 这里出于布局目的如何水平对齐块级元素。 块元素占据全部可用宽度的元素,并且其前后都会换行。 <...
  • CSS3动画

    2019-04-19 20:45:00
    对比CSS动画与JS动画 ...CSS3其它常规动画属性的效率均低于js模拟的动画(常规动画属性在这里是指:height,width,opacity,border-width,color...) 动画过渡--transition 动画--animation @keyfr...

空空如也

空空如也

1 2 3 4 5
收藏数 88
精华内容 35
关键字:

在css中属性margin是指