box相关css属性
盒子模式=外边距+边框+内边距+组件大小
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 | 如果内容不适合内容框，则隐藏整个内容。 |
box相关css属性相关推荐
- css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
- [css] 举例说明跟字体相关的属性有哪些
[css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色 等等 个人简介 我是歌谣,欢迎和大家 ...
- HTML 前端学习（4）—— CSS 属性相关
HTML 前端学习(4)-- CSS 属性相关 设置长宽 块级标签设置长宽 行内标签设置长宽 代码演示 演示结果 字体属性 字体样式 字体大小 字体颜色 字体粗细 代码演示 演示结果 文字属性 对齐方 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- jquery如何去掉css,jQuery教程之jQuery去掉一个CSS属性
本篇文章探讨了jQuery教程之jQuery去掉一个CSS属性,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.什么事JQ? 一个优秀的js库,大型开发必备 2.J ...
- html5 微格式,HTML5抢鲜:微格式及相关的属性名称。
HTML5抢鲜:微格式及相关的属性名称 2004年5月29日,在我退休的博客和所有的大话 ,当我调查40个设计师的网站,看看他们为公共页面元素使用的约定,如标题和横幅,导航,内容和页脚(那时候的结果 ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- 第60天：js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
- web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
最新文章
- 自定义异常类: 运行期间跟编译期间的区别
- 【转】80后安稳上班，90后看心情上班，95后……太形象了！
- 第一次离线写Blog,先上个图先
- android 自定义flowlayout,Android 自定义ViewGroup之实现FlowLayout-标签流容器
- 利用api接口来实现web网页登陆
- 轻量级HTTP服务器Nginx（安装篇）
- python统计出现的中文标点_Python处理中文标点符号大集合
- Elasticsearch的用例：灵活的查询缓存
- Java IO - Reader
- 面试字节跳动Android工程师该怎么准备？深度解析，值得收藏
- 在Linux上搭建VisualSVN Server（svn服务端）
- ros开发增加clion常用模板及初始化配置(三)
- oracle查询所有表名_oracle删错数据了，要跑路吗，等一下，先抢救一下
- 1.Jenkins 安装
- 大数据第一季--Hadoop（day1）-徐培成-专题视频课程
- 学计算机如何护眼,长期看电脑如何保护眼睛 吃这些有效保护视力
- c语言中八进制输出的格式说明符,C 的输入输出格式说明符讲解
- 浅谈如何在优麒麟22.04中使用Eigenstrat和Plink工具生成类23andMe格式原始数据
- torch.randn用法以及小案例
- LoadRunner测试结果分析重要环节：合并图
热门文章
- Vue教程-day03-2018年12月21日笔记
- c语言无空头和有空头的区别,多头和空头什么意思？多头和空头有什么区别
- 一起学Docker：CMD与ENTRYPOINT的区别
- 1276 士兵队列训练问题【队列模拟】
- VMware安装LiveAndroid运行Android的apk应用
- 笔记本散热器什么牌子比较好
- 【解决办法】英雄联盟LOL突然卡帧游戏崩溃/按tab键游戏崩溃
- 2020.11.7--AE--钢笔工具、蒙版、图层通道
- 求四门课平均成绩c语言,C语言：有三个学生，上四门课，要求输入全部学生的各门课成绩，并分别求出每门课的平均成绩按升序输出...
- linux安卓ftp传输_如何将Android文件无线传输到Linux桌面