css——background、border、margin、float、content、blur(图片模糊)、user-select:none(禁用用户选择复制),border-image

本文深入讲解CSS中的背景图片设置、边框样式、外边距应用、浮动特性、内容生成及模糊效果等高级技巧,帮助读者掌握更复杂的网页布局与美化方法。

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:

  1. 添加 <div style='clear:both'></div>

优点:通俗易懂
缺点:添加了无意义的标签,不利于后期维护

  1. 使用 br 标签自身属性 <br clear='all'>

优点:代码量少
缺点:同上,不推荐

  1. 父元素设置 overflow: hidden

优点:不存在结构语义化问题,代码量少
缺点:内容增多造成内容隐藏,无法显示溢出元素

  1. 父元素设置 overflow: auto

同上
早期 firefox 有兼容问题

  1. 使用 :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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值