for in可用于遍历对象
let obj={
'名字':'smm',
'性别':'男',
'工作':'程序员'
}
for(var key in obj){
//遍历属性名
console.log('::'+key+'::');
//遍历属性值
console.log(obj[key]);
console.log('-------------');
}
结果
js的for in遍历对象
发表评论
JS对象 构造函数
JS里对象是无序的属性与方法的集合
属性：特征，外貌
行为：做的事情，动词
JS定义对象的方法
//利用字面量创建JS对象
var person = {
name: 'Aipo',
age: 23,
sex: '女',
//类似匿名函数的样式 声明对象方法
sayHi: function () {
console.log(this.name + '说了一句hi~');
}
}
//利用 new Object 创建对象
var person = new Object();
person.name ='Aipo';
person.age = 23;
person.sex = '女';
person.sayHi = function () {
console.log(this.name + '说了一句hi~');
}
调用对象
person.sayHi();
构造函数
//构造函数使用例子
function Member(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sayHi = function () {
console.log('大家好，我叫' + this.name + ',我已经' +
this.age + '岁了。我性别为' + this.sex + '。见到你们很高兴');
}
}
//输入属性 实例化
var uesr=new Member('Aipo',23,'女');
//使用方法
uesr.sayHi();//输出：大家好，我叫Aipo,我已经23岁了。我性别为女。见到你们很高兴
构造函数实例化原理
要调用构造函数我们需要在其前面加一个new关键字，所以主要就是new在其作用，在执行new关键字后，很明显，他跟以往的函数调用就不同了，他会依次执行以下步骤：
1. new过后会产生一个空对象，作为一个返回的对象实例
2. 将空对象的原型指向了构造函数的prototype属性
3. 将空对象的值赋值给构造函数里面的this值
4. 开始执行构造函数里的代码（传入给这个新对象 属性和方法）
5. 返回这个对象
CSS的Flex布局(弹性盒子)
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
民间说法：flex 就是一种布局方式，类似于 block，inline-block等
可以说包括我在内的大部分人，都是在被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。
CSS 的 overflow 区域溢出裁剪
CSS overflow 属性用于控制内容溢出元素框时显示的方式
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条
设置 overflow 达到溢出隐藏效果后，也会影响子项定位的效果，当子项定位在盒子外部，将也会随之隐藏
默认的overflow值为visible 会有内容溢出盒子的效果
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
设置overflow值为hidden后，隐藏溢出部分
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
overflow:hidden;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
不要滚动条，实现滚动的方法
//Chrome浏览器支持 清除滚动条
.demo::-webkit-scrollbar {
display: none;
}
//firefox加IE 10+支持 保证内容是可滚动的
.demo {
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
css 元素透明度 opalcity
opalcity翻译起来就是不透明度。顾名思义；它是调整元素的透明度的一个参数。
opacity属性指定了一个元素的不透明度
opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。
完全不透明
<html>
<head>
<style>
.img_opalcity{
opacity: 1;//完全不透明
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
半透明效果
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//设置透明度50%
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
opacity与filter滤镜结合使用
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//半透明
filter: blur(2px);//模糊度
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
CSS 的background 背景样式
background可以设置背景样式；颜色背景；图片背景
值
描述
CSS
background-color
规定要使用的背景颜色。
1
background-position
规定背景图像的位置。
1
background-size
规定背景图片的尺寸。
3
background-repeat
规定如何重复背景图像。
1
background-origin
规定背景图片的定位区域。
3
background-clip
规定背景的绘制区域。
3
background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动。
1
background-image
规定要使用的背景图像。
1
inherit
规定应该从父元素继承 background 属性的设置。
1
background设置背景颜色
<style>
.div_color {
height: 300px;
width: 300px;
background: cornflowerblue; //设置背景 浅蓝色
}
</style>
<div class="div_color"></div>
background插入图片
<style>
.div_color2 {
height: 300px;
width: 300px;
background: url(http://www.dmoe.cc/random.php); //插入图片地址
background-size: cover; //图片显示方式 自适应
}
</style>
<div class="div_color2"></div>
background复合写法
background:背景颜色 url(背景图片地址) 背景平铺 背景图像滚动 背景图片位置
background:black url(images/smm.jpg) no-repeat fixed center top;
CSS外边距 margin 属性
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间
- margin-top
- margin-right
- margin-bottom
- margin-left
margin 所有外边距属性都可以设置以下值 (允许负值)
- auto – 浏览器来计算外边距
- length – 以 px、pt、cm 等单位指定外边距
- % – 指定以包含元素宽度的百分比计的外边距
- inherit – 指定应从父元素继承外边距
单独使用margin赋值有多种写法
- margin: 25px 50px 75px 100px; //设置上右下左
- margin: 25px 50px 75px; //设置上 左右 下
- margin: 25px 50px; //设置上下 左右
tip:当两个div都有margin设置的边距而重叠时，优先选择最大的数值。忽略另一个数值。
<div style="background: yellow;height: 100px;
outline:black solid 2px; width: 100px;margin-bottom: 10px;">
</div> //使用了最大的边距距离
<div style="background: tomato;height: 100px;
outline:black solid 2px; width: 100px;margin-top: 5px;">
</div> //该边距被忽略
10px
5px
CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model“这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子由以下不同部分组成
- Margin(外边距) – 清除边框外的区域，外边距是透明的。
- Border(边框) – 围绕在内边距和内容外的边框。
- Padding(内边距) – 清除内容周围的区域，内边距是透明的。
- Content(内容) – 盒子的内容，显示文本和图像。
上面的图片是250 px宽。
这个元素的总宽度也是250 px。
最终元素的总宽度计算公式是这样的：
总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 的 display 属性
display 属性规定元素应该生成的框的类型
inline（行内元素）
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
inline-block 布局 与 浮动布局(float)
不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
相同之处：能在某程度上达到一样的效果
display 还可以用于隐藏/显示属性
display: none; //元素隐藏
display: block; //元素显示
与 visibility:hidden; 不同的是，display 隐藏后，不再占有原来位置。常用于下拉菜单等简化显示界面的效果。使界面清爽。而 visibility:hidden; 将只隐藏区域，但仍然保留占有位置。
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素
与 border(边框) 不同的是，它是元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
outline
- outline-style 设置轮廓的样式
- outline-color 属性用于设置轮廓的颜色
- outline-width 属性指定轮廓的宽度
- outline-offset 属性在元素的轮廓与边框之间添加空间
- outline 属性是用于设置以下各个轮廓属性的简写属性
当单独用outline 赋值时，它的赋值顺序为
outline: blue solid 2px; //颜色 样式 大小
定义实线的轮廓
实例：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
定义点状的轮廓
定义虚线的轮廓
定义实线的轮廓
定义双线的轮廓
定义 3D 凹槽轮廓
定义 3D 凸槽轮廓
定义 3D 凹边轮廓
定义 3D 凸边轮廓
定义无轮廓
<html>
<head>
<style>
.img_opalcity{
opacity: 1;//完全不透明
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>半透明效果
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//设置透明度50%
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
opacity与filter滤镜结合使用
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//半透明
filter: blur(2px);//模糊度
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
CSS 的background 背景样式
background可以设置背景样式；颜色背景；图片背景
值
描述
CSS
background-color
规定要使用的背景颜色。
1
background-position
规定背景图像的位置。
1
background-size
规定背景图片的尺寸。
3
background-repeat
规定如何重复背景图像。
1
background-origin
规定背景图片的定位区域。
3
background-clip
规定背景的绘制区域。
3
background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动。
1
background-image
规定要使用的背景图像。
1
inherit
规定应该从父元素继承 background 属性的设置。
1
background设置背景颜色
<style>
.div_color {
height: 300px;
width: 300px;
background: cornflowerblue; //设置背景 浅蓝色
}
</style>
<div class="div_color"></div>
background插入图片
<style>
.div_color2 {
height: 300px;
width: 300px;
background: url(http://www.dmoe.cc/random.php); //插入图片地址
background-size: cover; //图片显示方式 自适应
}
</style>
<div class="div_color2"></div>
background复合写法
background:背景颜色 url(背景图片地址) 背景平铺 背景图像滚动 背景图片位置
background:black url(images/smm.jpg) no-repeat fixed center top;
CSS外边距 margin 属性
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间
- margin-top
- margin-right
- margin-bottom
- margin-left
margin 所有外边距属性都可以设置以下值 (允许负值)
- auto – 浏览器来计算外边距
- length – 以 px、pt、cm 等单位指定外边距
- % – 指定以包含元素宽度的百分比计的外边距
- inherit – 指定应从父元素继承外边距
单独使用margin赋值有多种写法
- margin: 25px 50px 75px 100px; //设置上右下左
- margin: 25px 50px 75px; //设置上 左右 下
- margin: 25px 50px; //设置上下 左右
tip:当两个div都有margin设置的边距而重叠时，优先选择最大的数值。忽略另一个数值。
<div style="background: yellow;height: 100px;
outline:black solid 2px; width: 100px;margin-bottom: 10px;">
</div> //使用了最大的边距距离
<div style="background: tomato;height: 100px;
outline:black solid 2px; width: 100px;margin-top: 5px;">
</div> //该边距被忽略
10px
5px
CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model“这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子由以下不同部分组成
- Margin(外边距) – 清除边框外的区域，外边距是透明的。
- Border(边框) – 围绕在内边距和内容外的边框。
- Padding(内边距) – 清除内容周围的区域，内边距是透明的。
- Content(内容) – 盒子的内容，显示文本和图像。
上面的图片是250 px宽。
这个元素的总宽度也是250 px。
最终元素的总宽度计算公式是这样的：
总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 的 display 属性
display 属性规定元素应该生成的框的类型
inline（行内元素）
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
inline-block 布局 与 浮动布局(float)
不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
相同之处：能在某程度上达到一样的效果
display 还可以用于隐藏/显示属性
display: none; //元素隐藏
display: block; //元素显示
与 visibility:hidden; 不同的是，display 隐藏后，不再占有原来位置。常用于下拉菜单等简化显示界面的效果。使界面清爽。而 visibility:hidden; 将只隐藏区域，但仍然保留占有位置。
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素
与 border(边框) 不同的是，它是元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
outline
- outline-style 设置轮廓的样式
- outline-color 属性用于设置轮廓的颜色
- outline-width 属性指定轮廓的宽度
- outline-offset 属性在元素的轮廓与边框之间添加空间
- outline 属性是用于设置以下各个轮廓属性的简写属性
当单独用outline 赋值时，它的赋值顺序为
outline: blue solid 2px; //颜色 样式 大小
定义实线的轮廓
实例：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
定义点状的轮廓
定义虚线的轮廓
定义实线的轮廓
定义双线的轮廓
定义 3D 凹槽轮廓
定义 3D 凸槽轮廓
定义 3D 凹边轮廓
定义 3D 凸边轮廓
定义无轮廓
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//设置透明度50%
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>opacity与filter滤镜结合使用
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//半透明
filter: blur(2px);//模糊度
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>
CSS 的background 背景样式
background可以设置背景样式；颜色背景；图片背景
值
描述
CSS
background-color
规定要使用的背景颜色。
1
background-position
规定背景图像的位置。
1
background-size
规定背景图片的尺寸。
3
background-repeat
规定如何重复背景图像。
1
background-origin
规定背景图片的定位区域。
3
background-clip
规定背景的绘制区域。
3
background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动。
1
background-image
规定要使用的背景图像。
1
inherit
规定应该从父元素继承 background 属性的设置。
1
background设置背景颜色
<style>
.div_color {
height: 300px;
width: 300px;
background: cornflowerblue; //设置背景 浅蓝色
}
</style>
<div class="div_color"></div>
background插入图片
<style>
.div_color2 {
height: 300px;
width: 300px;
background: url(http://www.dmoe.cc/random.php); //插入图片地址
background-size: cover; //图片显示方式 自适应
}
</style>
<div class="div_color2"></div>
background复合写法
background:背景颜色 url(背景图片地址) 背景平铺 背景图像滚动 背景图片位置
background:black url(images/smm.jpg) no-repeat fixed center top;
CSS外边距 margin 属性
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间
- margin-top
- margin-right
- margin-bottom
- margin-left
margin 所有外边距属性都可以设置以下值 (允许负值)
- auto – 浏览器来计算外边距
- length – 以 px、pt、cm 等单位指定外边距
- % – 指定以包含元素宽度的百分比计的外边距
- inherit – 指定应从父元素继承外边距
单独使用margin赋值有多种写法
- margin: 25px 50px 75px 100px; //设置上右下左
- margin: 25px 50px 75px; //设置上 左右 下
- margin: 25px 50px; //设置上下 左右
tip:当两个div都有margin设置的边距而重叠时，优先选择最大的数值。忽略另一个数值。
<div style="background: yellow;height: 100px;
outline:black solid 2px; width: 100px;margin-bottom: 10px;">
</div> //使用了最大的边距距离
<div style="background: tomato;height: 100px;
outline:black solid 2px; width: 100px;margin-top: 5px;">
</div> //该边距被忽略
10px
5px
CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model“这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子由以下不同部分组成
- Margin(外边距) – 清除边框外的区域，外边距是透明的。
- Border(边框) – 围绕在内边距和内容外的边框。
- Padding(内边距) – 清除内容周围的区域，内边距是透明的。
- Content(内容) – 盒子的内容，显示文本和图像。
上面的图片是250 px宽。
这个元素的总宽度也是250 px。
最终元素的总宽度计算公式是这样的：
总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 的 display 属性
display 属性规定元素应该生成的框的类型
inline（行内元素）
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
inline-block 布局 与 浮动布局(float)
不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
相同之处：能在某程度上达到一样的效果
display 还可以用于隐藏/显示属性
display: none; //元素隐藏
display: block; //元素显示
与 visibility:hidden; 不同的是，display 隐藏后，不再占有原来位置。常用于下拉菜单等简化显示界面的效果。使界面清爽。而 visibility:hidden; 将只隐藏区域，但仍然保留占有位置。
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素
与 border(边框) 不同的是，它是元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
outline
- outline-style 设置轮廓的样式
- outline-color 属性用于设置轮廓的颜色
- outline-width 属性指定轮廓的宽度
- outline-offset 属性在元素的轮廓与边框之间添加空间
- outline 属性是用于设置以下各个轮廓属性的简写属性
当单独用outline 赋值时，它的赋值顺序为
outline: blue solid 2px; //颜色 样式 大小
定义实线的轮廓
实例：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
定义点状的轮廓
定义虚线的轮廓
定义实线的轮廓
定义双线的轮廓
定义 3D 凹槽轮廓
定义 3D 凸槽轮廓
定义 3D 凹边轮廓
定义 3D 凸边轮廓
定义无轮廓
<html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//半透明
filter: blur(2px);//模糊度
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>CSS 的background 背景样式
background可以设置背景样式；颜色背景；图片背景
| 值 | 描述 | CSS |
|---|---|---|
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |
| inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
background设置背景颜色
<style>
.div_color {
height: 300px;
width: 300px;
background: cornflowerblue; //设置背景 浅蓝色
}
</style>
<div class="div_color"></div>
background插入图片
<style>
.div_color2 {
height: 300px;
width: 300px;
background: url(http://www.dmoe.cc/random.php); //插入图片地址
background-size: cover; //图片显示方式 自适应
}
</style>
<div class="div_color2"></div>
background复合写法
background:背景颜色 url(背景图片地址) 背景平铺 背景图像滚动 背景图片位置 background:black url(images/smm.jpg) no-repeat fixed center top;
CSS外边距 margin 属性
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间
CSS拥有用于为元素的每一侧指定外边距的属性
- margin-top
- margin-right
- margin-bottom
- margin-left
margin 所有外边距属性都可以设置以下值 (允许负值)
- auto – 浏览器来计算外边距
- length – 以 px、pt、cm 等单位指定外边距
- % – 指定以包含元素宽度的百分比计的外边距
- inherit – 指定应从父元素继承外边距
单独使用margin赋值有多种写法
- margin: 25px 50px 75px 100px; //设置上右下左
- margin: 25px 50px 75px; //设置上 左右 下
- margin: 25px 50px; //设置上下 左右
tip:当两个div都有margin设置的边距而重叠时，优先选择最大的数值。忽略另一个数值。
<div style="background: yellow;height: 100px; outline:black solid 2px; width: 100px;margin-bottom: 10px;"> </div> //使用了最大的边距距离 <div style="background: tomato;height: 100px; outline:black solid 2px; width: 100px;margin-top: 5px;"> </div> //该边距被忽略
10px
5px
CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model“这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子由以下不同部分组成
- Margin(外边距) – 清除边框外的区域，外边距是透明的。
- Border(边框) – 围绕在内边距和内容外的边框。
- Padding(内边距) – 清除内容周围的区域，内边距是透明的。
- Content(内容) – 盒子的内容，显示文本和图像。
上面的图片是250 px宽。
这个元素的总宽度也是250 px。
最终元素的总宽度计算公式是这样的：
总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 的 display 属性
display 属性规定元素应该生成的框的类型
inline（行内元素）
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
inline-block 布局 与 浮动布局(float)
不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
相同之处：能在某程度上达到一样的效果
display 还可以用于隐藏/显示属性
display: none; //元素隐藏 display: block; //元素显示
与 visibility:hidden; 不同的是，display 隐藏后，不再占有原来位置。常用于下拉菜单等简化显示界面的效果。使界面清爽。而 visibility:hidden; 将只隐藏区域，但仍然保留占有位置。
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素
与 border(边框) 不同的是，它是元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
| outline |
|
当单独用outline 赋值时，它的赋值顺序为
outline: blue solid 2px; //颜色 样式 大小
定义实线的轮廓
实例：
dotted - 定义点状的轮廓。 dashed - 定义虚线的轮廓。 solid - 定义实线的轮廓。 double - 定义双线的轮廓。 groove - 定义 3D 凹槽轮廓。 ridge - 定义 3D 凸槽轮廓。 inset - 定义 3D 凹边轮廓。 outset - 定义 3D 凸边轮廓。 none - 定义无轮廓。 hidden - 定义隐藏的轮廓。
定义点状的轮廓
定义虚线的轮廓
定义实线的轮廓
定义双线的轮廓
定义 3D 凹槽轮廓
定义 3D 凸槽轮廓
定义 3D 凹边轮廓
定义 3D 凸边轮廓
定义无轮廓