标签：技术分享 meta 背景图 code -- name 支持 doc ted
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
支持简写
background:#ffffff url(‘1.png‘) no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
参考链接：http://www.w3school.com.cn
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 100px; width:100px; color: red; background-color: green; } .c2 { height: 600px; width: 600px; background: url("james.png") no-repeat center bottom; } </style> </head> <body> <div class="c1">div标签</div> <div class="c2"></div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--名字以及内容--> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!--告诉IE以最高级模式渲染文档--> <title>背景固定</title> <style> * {margin: 0;} .box { width:100%; height: 500px; background: url("嗯嗯.jpg") no-repeat center center fixed; /*背景图片，不重复，中心位置，固定*/ } .d1 { height:500px; background: tomato; } .d2 { height: 500px; background: steelblue; } .d3 { height: 500px; background:mediumorchid ; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
边框
边框属性：
border-width——大小
border-style——样式
border-color——颜色
{border: 2px solid red;} 简写
边框样式：
none—无边框
dotted—点状虚线边框
dashed—矩形虚线边框
solid—实线边框
border-radius 50%
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 100px; width: 100px; border: 5px dashed red; } /*矩形虚线边框*/ .c2 { width: 100%; height: 50px; border-left:10px solid red; } /*在左边添加实线边框*/ .c3 { height: 100px; width: 100px; background-color: red; border-radius: 50%; } /*画一个圆*/ .c3:hover {background-color: green} /*鼠标悬浮变色*/ .c4 { height: 100px; width: 100px; background-color: red; border-radius: 10px; } /*不到50可以画圆角边框*/ </style> </head> <body> <div class="c1"></div> <hr> <div class="c2"></div> <hr> <div class="c3"></div> <div class="c4"></div> </body> </html>
display属性：用于控制HTML元素的显示效果。
display:"none"—HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"—默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"—按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"—使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
border-radius: 50%
标签：技术分享 meta 背景图 code -- name 支持 doc ted
原文地址：https://www.cnblogs.com/zhigu/p/9772876.html
