css——background、border、margin、float、content、blur(图片模糊)、user-select:none(禁用用户选择复制),border-image
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>
css——background、border、margin、float、content、blur(图片模糊)、user-select:none(禁用用户选择复制),border-image相关推荐
- 使用OpenCV进行图片模糊处理(高斯滤波器)
本篇博客主要介绍如何使用OpenCV自带的高斯滤波器来对图片进行处理,达到模糊图片的效果.在代码中通过使用一个TrackerBar动态改变.具体的还是根据代码来进行解释吧: 先看一下效果图: gif不 ...
- 图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
- CSS 中 的 margin、border、padding 区别 (内边距、外边距)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
- CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 【CSS】padding,border,margin与width宽度的关系
padding,border,margin这三样东西不算难,算是在CSS中老生常谈的东西,但是要注意其对width的影响, 直接上一段极其简单的代码: <!DOCTYPE html> &l ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
- 学习笔记 css background 图片
学习笔记 css background 图片 <html><head><style>/*body {background: #ccc url(a.png) no-r ...
- CSS background(背景图片)详解
"在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可 ...
- html css设置背景图片,css background之设置图片为背景技巧
Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
最新文章
- docker宿主机访问docker容器服务失败
- python中np.multiply()、np.dot()和星号(*)三种乘法运算的区别
- 机器人教练SWOT分析_学车没人教,包头这个驾校机器人教练已上岗,再也不怕被教练骂了...
- Ubuntu 14.04 FTP服务器--vsftpd的安装和配置
- ICLR 2021 | 显存不够?不妨抛弃端到端训练
- 怎么取消html的原始属性,回归原始,尽量使用XHTML标签默认属性
- php curl 库参数,PHP 关于curl库参数问题的求助!!!
- 破解栅栏密码python脚本
- LeetCode MySQL 1075. 项目员工 I
- 基于Tablestore Tunnel的数据复制实战
- Python使用更相减损术计算两个整数的最大公约数
- 怎样让一个心浮气躁的孩子静下心学习?
- python 条件判断和循环
- 支持向量机_支持向量机(SVM)说明及示例
- python题库填空_Python题库
- 卸载mysql5.5.27(傻瓜式卸载)
- c++primer5 3.17
- MySQL 系列(三)你不知道的 视图、触发器、存储过程、函数、事务、索引、语句...
- quickhit----快打小游戏
- lambda表达式最全总结