box相关css属性

原创 2016年05月31日 19:50:49

盒子模式=外边距+边框+内边距+组件大小


box-shadow(火狐浏览器中常会添加该属性)

box-shadow 属性向框添加一个或多个阴影。默认值:none

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!


语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

box-sizing(火狐只支持-moz-box-sizing)

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。


语法

box-sizing: content-box|border-box|inherit;
描述
content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。(默认值)

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。


box-align(火狐只支持-moz-box-align,谷歌等支持-webkit-box-align,IE不支持该属性)

box-align 属性规定如何对齐框的子元素。

语法

box-align: start|end|center|baseline|stretch;
描述
start

对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。

对于反方向的框,每个子元素的下边缘沿着框的底边放置。

end

对于正常方向的框,每个子元素的下边缘沿着框的底边放置。

对于反方向的框,每个子元素的上边缘沿着框的顶边放置。

center 均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。
baseline 如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。
stretch 拉伸子元素以填充包含块(默认值)

box-direction(火狐只支持-moz-box-direction,谷歌等支持-webkit-box-direction,IE不支持该属性)

box-direction 属性规定框元素的子元素以什么方向来排列。

语法

box-direction: normal|reverse|inherit;
描述
normal 以默认方向显示子元素。(默认值)
reverse 以反方向显示子元素。
inherit 应该从子元素继承 box-direction 属性的值

box-flex(火狐只支持-moz-box-flex,谷歌等支持-webkit-box-flex,IE不支持该属性)

box-flex 属性规定框的子元素是否可伸缩其尺寸。默认值:0.0,即不可伸缩

提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。

语法

box-flex: value;
描述
value 元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。


box-ordinal-group(火狐只支持-moz-box-ordinal-group,谷歌等支持-webkit-box-ordinal-group,IE不支持该属性)

box-ordinal-group 属性规定框中子元素的显示次序。

值更低的元素会显示在值更高的元素前面显示。

注释:分组值相同的元素,它们的显示次序取决于其源次序。

语法

box-ordinal-group: integer;
描述
integer 一个整数,指示子元素的显示次序。(默认值为1)

box-orient (火狐只支持-moz-box-orient ,谷歌等支持-webkit-box-orient ,IE不支持该属性)

box-orient 属性规定框的子元素应该被水平或垂直排列。

提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示。不过,box-direction 和 box-ordinal-group 能够改变这种顺序。


语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

描述
horizontal 在水平行中从左向右排列子元素。
vertical 从上向下垂直排列子元素。
inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。(默认值)
block-axis 沿着块轴来排列子元素(映射为 vertical)。
inherit 应该从父元素继承 box-orient 属性的值。

box-pack (火狐只支持-moz-box-pack  ,谷歌等支持-webkit-box-pack ,IE不支持该属性)

box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。

该属性规定水平框中的水平位置,以及垂直框中的垂直位置。


语法

box-pack: start|end|center|justify;
描述
start

对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)

对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)(默认值)

end

对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。

对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。
center 均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后
justify 在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)。


overflow-x/ overflow-y(IE8及以下的浏览器不支持)

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;
描述
visible 不裁剪内容,可能会显示在内容框之外。(默认值)
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框,则应该提供滚动机制。
no-display 如果内容不适合内容框,则删除整个框。
no-content 如果内容不适合内容框,则隐藏整个内容。



和布局有关的css属性

文档流:一般文本就是按照文档流来进行排序,但是来如果你加上position:就脱离了文档流;但是由于浏览器大小不定,也无法使用一般配合js使用绝对定位;position:定义一个元素是否absolut...
  • ldz1997106
  • ldz1997106
  • 2017年03月08日 21:29
  • 213

CSS属性之盒子模型(Box Model)

网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子(箱...
  • h15882065951
  • h15882065951
  • 2017年02月19日 22:24
  • 171

Ljung-Box q 统计量

用于检验某个时间段内的一系列观测值是不是随机的独立观测值。如果观测值并非彼此独立,一个观测值可能会在 k 个时间单位后与另一个观测值相关,形成一种称为自相关的关系。自相关可以削减基于时间的预测模型(例...
  • zyy160alex5
  • zyy160alex5
  • 2013年08月12日 17:32
  • 2438

Jquery中操作元素属性 css 属性

动态修改img标签的src属性,使用each
  • yangqillohe
  • yangqillohe
  • 2011年04月10日 16:01
  • 3516

CSS剪裁图像

http://www.w3school.com.cn/cssref/pr_pos_clip.asp
  • lvjin110
  • lvjin110
  • 2014年04月19日 21:56
  • 2055

原生JS中如何获取CSS属性中的值

css文件中如何得到某个属性值: 一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,返回的是一个CSS样式声明对象 , 只读, 此方法支持Firefox浏览器; 语...
  • baidu_34449164
  • baidu_34449164
  • 2016年07月25日 12:36
  • 6906

整理推荐的CSS属性书写顺序

一. Mozilla 建议CSS规则 /* Suggested order: * display * list-style * position * float * clear * ...
  • SyKent
  • SyKent
  • 2012年08月13日 22:51
  • 6040

关于CSS中的块级元素以及行级元素

块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。    2.元素的高度、宽度、行高和顶底边距都是可以设置的。      3.元素的宽度如果不设置...
  • u013405870
  • u013405870
  • 2016年10月27日 11:00
  • 144

css基础属性

2 基础属性 属性名:属性值; Background-color:red P{ Background-color:red; Font-size:24px } 2.1 字体相关属性 F...
  • yp320645
  • yp320645
  • 2017年07月12日 20:39
  • 164

Jquery学习之旅之动态设置css属性和获取css属性

Insert title here *{   font-size:24px;   font-family: "微软雅黑"; } .anii{width:100px;height:60px...
  • u014660247
  • u014660247
  • 2016年04月18日 17:20
  • 233
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box相关css属性
举报原因:
原因补充:

(最多只允许输入30个字)