记住上面这一张图!一定要记住!一定!一定!
内边距、边框和外边距是可选参数属性,默认值:0 ;很多元素由用户代理样式表设置外边距和边框,通过将元素的 margin外边距和padding内边距设置为 0 来覆盖这些浏览器样式
在css中,width和height指的是内容区域的宽度和高度;增加内边距、边框和外边距不会影响内容区域的尺寸控件,但是会增加元素框的总尺寸;
#box { width: 70px; padding: 5px; margin: 10px; }
元素的内边距在边框和内容元素区之间。
padding属性:定义元素边框于元素内容之间的空白区域
padding接受 长度值、百分比值,但不允许负数
h1 { padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px; }
当然,css也支持内边距一起设计内边距
h1 { padding:10px 20px 10px 20px;<!-- 上右下左顺序 --> }
边框绘制在 元素的背景 之上!
border-style属性: 定义10个不同的样式
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3d 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3d 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3d inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3d outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
如果定义无边框,就需要设置样式为:none或者outset
属性 | 描述 |
---|---|
简写属性,用于把针对四个边的属性设置在一个声明。 | |
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 | |
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 | |
简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 | |
简写属性,用于把下边框的所有属性设置到一个声明中。 | |
设置元素的下边框的颜色。 | |
设置元素的下边框的样式。 | |
设置元素的下边框的宽度。 | |
简写属性,用于把左边框的所有属性设置到一个声明中。 | |
设置元素的左边框的颜色。 | |
设置元素的左边框的样式。 | |
设置元素的左边框的宽度。 | |
简写属性,用于把右边框的所有属性设置到一个声明中。 | |
设置元素的右边框的颜色。 | |
设置元素的右边框的样式。 | |
设置元素的右边框的宽度。 | |
简写属性,用于把上边框的所有属性设置到一个声明中。 | |
设置元素的上边框的颜色。 | |
设置元素的上边框的样式。 | |
设置元素的上边框的宽度。 |
p {margin: 0.5em 1em 0.5em 1em;} 等价于: p {margin: 0.5em 1em;}
如果缺少左外边距,则使用右外边距的值;以此类推
当两个垂直外边距相遇是,形成一个外边距
合并后的外边距的高度等于两个发生合并的外边的最大者
当一个元素包含另一个元素中时,它们的上/下外边距会发生合并:
css为定位和浮动提供了一些属性,利用属性可以建立列式布局,将布局的一部分重叠。
一切皆为框
div , h1 , p等元素都属于块级元素。
css基本定位机制:普通流,浮动和绝对定位
除非专门单独定义,否则所有框都是默认在普通流中定位
块级框从上到下一个接一个排列,框之间的垂直距离是由框的垂直外边距计算出来的。
行内框在一行内的水平布置,使用水平内边距、边框、外边距来调整之间的间距,但是,垂直内边距、边框和外边距不影响行内框的高度,由一行形成的水平框:行框(line box),行框的高度总是容纳包含的所有行内框,但是可以通过设置行高(框的高度)
属性 | 描述 |
---|---|
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 | |
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | |
定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | |
定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | |
定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | |
设置当元素的内容溢出其区域时发生的事情。 | |
设置元素的形状。元素被剪入这个形状之中,然后显示出来。 | |
设置元素的垂直对齐方式。 | |
设置元素的堆叠顺序。 |
相对定位:对一个元素进行相对定位,通过设置垂直或水平位置,让元素相对于起点进行移动
#box { position: relative; left: 30px; top: 20px; }
如上;将top设置为20px表示框从上往下(距离上)偏移20px,将left设置为30px表示框从左往右(距离左)便宜30px。
绝对定位:通过设置垂直或水平位置,让元素绝对定位(以视窗左上角做起点)
#box { position: absolute; left: 30px; top: 20px; }
浮动的框可以向左/向右移动,知道外边接触到另一个框的边框停止
由于浮动框不在文档的普通流中,所以文档的普通流中的块表现的向浮动窗不存在一样。
框1向右浮动,直到框1接触到它所在框的边缘时候才停止。
框1从右侧向左侧浮动,由于不占用文档空间,所以框1会覆盖框2
如果所有框都向左移动,那么框1接触到元素框的边框停止,另外两个框接触到前一个框的边框,停止浮动。
如果元素框大小无法接受三个浮动框的大小,就会向下移动……
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框
因此,创建浮动框可以使文本围绕图像:
clear属性:
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论