盒子样式
一、display属性
包含值有
①block //块状显示,占一行
②inline //行内显示,不换行
③inline-block //内联行内显示,且可设置宽度
④对于table还有一个 inline-table 值
⑤list-item //可以将div变成像list一样的竖直列表显示
⑥flex //弹性盒子的容器属性
二、overflow属性
包含值有
①hidden //隐藏溢出内容
②scroll //可以滚动显示
③auto //自动添加水平或竖直滚动条
④visible //默认的值,显示溢出内容
另外有 overflow-x 和 overflow-y属性,原理类似
三、box-sizing属性
包含值有
①border-box //元素尺寸包括边框
②content-box //元素尺寸不包括边框,边框尺寸不计入盒子宽高中
四、border-radius:左上角值 右上角值 右下角值 左上角值; (可以分别设置四个圆角值)
背景样式
一、background-clip属性
包含值有
①border-box //背景填充包含边框
②padding-box //背景填充不包含边框
③content-box //背景填充只包含内容
clip是修建的意思
二、background-origin属性
包含值有
①border-box //背景从边框定点开始填充
②padding-box //背景从padding处开始填充
③content-box //...
origin是起源的意思
三、background-image:url(“图片1地址”),url(“图片2地址”)…
background-repeat:repeat-x//水方向重复添加背景图;
no-repea //不重复填充背景图
边框新样式
使用图像边框
border-img属性,语法是:
-web-border-image:url("图片地址") 50 50 50 50;
//四个数字是按照切割图片为九宫格后的一个拉伸数值,需要具体操作体会