1、background
缩写形式:background:color image repeat 关联方式 position;
/* img1在最上面,以此类推 */
background: url(~@/assets/img1.png) no-repeat left top,
url(~@/assets/img2.png) no-repeat right bottom,
url(~@/assets/img3.png) no-repeat center center;
background-size: auto, auto, cover;
可同时设置背景图片和颜色,且图片会覆盖颜色
background-attachment:关联方式
scroll(随滚动条动)
fixed(不随滚动条动)
local(类似scroll,但它的背景图片会跟随内容滚动)
background-repeat:设置背景平铺
repeat : 平铺 (默认)
no-repeat : 不平埔
round : 会将图片缩放后再平铺 (恰好占满 div)
space : 图片不会缩放,只会在图片之间产生相同的间距值 (恰好占满 div)
background-image:url( )选缓存小 可循环的图片平铺 优化性能
背景图片定位:background-position:水平 垂直
(背景图片有定位属性,可以方便控制图片位置。而插入图片语义强,可被搜索引擎收录)
background-size:水平 垂直;设置背景图片尺寸(可以像素 或 百分比)
auto(原始图片大小,默认)
cover(背景图片以等比放大填满父级)
contain(等比放大 一个数值达到最大停止放大)
background-origin:属性规定 background-position 属性相对于什么位置来定位
padding-box(默认值,从padding的位置开始填充背景,会与padding重叠)
border-box(从border的位置开始填充背景,会与border重叠)
content-box(从content的位置开始填充背景,会与content重叠);
background-clip:属性规定背景的绘制区域
padding-box( 显示padding及以内的内容)
border-box(默认值,显示border及以内的内容)
content-box(显示content及以内的内容);
2、border
缩写形式:border:1px solid #ccc;
边框型——border-style:
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 规定应该从父元素继承边框样式。
border-radio:设置圆角
3、margin
外边距margin:横向叠加,竖向合并
盒子水平居中:margin:0 auto;
大小盒子嵌套居中:margin-top时 大小盒子一起改变 可以大盒子加overflow:hidden(更好的是用padding)
4、float
无居中对齐,mg:0 auto;无效
仅可设置fl,fr
不区分block、inline-block、inline
无法撑起盒子高度,如果都float,可能使盒子消失
多盒子顶部对齐可用float
注:先f显示前面,后f显示后面;f位置取决于之前的标准流位置
清除float:
- 添加
<div style='clear:both'></div>
优点:通俗易懂
缺点:添加了无意义的标签,不利于后期维护
- 使用 br 标签自身属性
<br clear='all'>
优点:代码量少
缺点:同上,不推荐
- 父元素设置
overflow: hidden
优点:不存在结构语义化问题,代码量少
缺点:内容增多造成内容隐藏,无法显示溢出元素
- 父元素设置
overflow: auto
同上
早期 firefox 有兼容问题
- 使用
:after
伪元素
.clearfix {
*zoom:1; //兼容IE
}
.clearfix::after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
5、content
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
a:after {content: " (" attr(href) ")";} //在a标签后面插入a标签的链接
none 设置Content,如果指定成Nothing
normal 设置content,如果指定的话,正常,默认是"none"(该是nothing)
counter 设定计数器内容
attr(attribute) 设置Content作为选择器的属性之一。
string 设置Content到你指定的文本
open-quote 设置Content是开口引号
close-quote 设置Content是闭合引号
no-open-quote 如果指定,移除内容的开始引号
no-close-quote 如果指定,移除内容的闭合引号
url(url) 设置某种媒体(图像,声音,视频等内容)
inherit 指定的content属性的值,应该从父元素继承
6、blur
filter:blur(mpx)//m值越大 图片越模糊
7、border-image
边框图片:
border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点
border-image-slice:设置四个方向上的裁切距离,fill:做内容的内部填充
border-image-width:边框的宽度,默认是元素的原始边框宽度(注意:1、边框的图片本质是背景,并不会影响元素内容的放置; 2、内容只会受border和padding影响,所以它代替不了border的地位;建议:一般将值设置为原始的边框宽度)
border-image-outset:扩展边框范围,一般用的很少,因为会影响页面布局
border-image-repeat:平铺
stretch(默认值,拉伸)
repeat(直接平铺)
round(将内容缩放后进行完整的重复平铺)
缩写形式 :
border-image: source slice/width/outset repeat;
div {
width: 200px;
height: 200px;
border: 30px solid;
/*border-image-source: url('../images/logo.jpg');
border-image-slice: 30 fill;
border-image-width: 30px;
border-image-outset: 0;
border-image-repeat: round;*/
border-image: url("../images/logo.jpg") 27/27px/0 round;
}
border-image 可以用来做聊天框,不论里面文字多少,整体框都很自然,不会出现背景图片失真的问题
实例:
<style>
div {
margin-bottom: 20px;
height: auto;
border: 10px solid red;
/*如果希望内容区域有纹理,可以设置border-image-repeat为repeat或round*/
/*border-image-source: url("../images/tip.png");
border-image-slice: 10 fill;
border-image-width: 10px;*/
border-image: url("../images/tip.png") 10 fill/27px;
}
div:nth-of-type(1) {
width: 200px;
}
div:nth-of-type(2) {
width: 500px;
}
</style>
<body>
<div>
啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!
</div>
<div>
啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!啦啦啦,我是卖报的小行家,刮风下雨都不怕!
</div>
</body>