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岁了。我性别为女。见到你们很高兴

js对象使用案例

构造函数实例化原理

要调用构造函数我们需要在其前面加一个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的使用,也确实更偏向于元素对齐方式的使用。

%title插图%num
继续阅读

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>
全名制作人大家好,我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap,篮球

不要滚动条,实现滚动的方法
//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;
        }

效果展示:https://smmcat.cn/study/word_box.html

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>
%title插图%num

半透明效果

<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>
%title插图%num

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>
%title插图%num

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 属性用于在任何定义的边框之外,为元素周围创建空间

%title插图%num
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盒子模型

%title插图%num

所有HTML元素可以看作盒子,在CSS中,”box model“这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子由以下不同部分组成

  • Margin(外边距) – 清除边框外的区域,外边距是透明的。
  • Border(边框) – 围绕在内边距和内容外的边框。
  • Padding(内边距) – 清除内容周围的区域,内边距是透明的。
  • Content(内容) – 盒子的内容,显示文本和图像。
%title插图%num
上面的图片是250 px宽。 这个元素的总宽度也是250 px。

最终元素的总宽度计算公式是这样的:

总元素的宽度= 宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度= 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 的 display 属性

display 属性规定元素应该生成的框的类型

inline(行内元素)

  1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
  2. 不能更改元素的height,width的值,大小由内容撑开. 
  3. 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.

block(块级元素)

  1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height,width的值. 
  3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.

 inline-block(融合行内于块级)

  1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲,就是不独占一行的块级元素。
%title插图%num
%title插图%num

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 凸边轮廓

定义无轮廓

定义隐藏的轮廓

CSS position 属性

position 属性规定元素的定位类型

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

.div{
   height: 100px;
   width: 100px;
   border-style: dotted;
   position: relative;
}
.h2 {
   position:absolute;
   left:24px; 
   top:16px; 
}
描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

position 常用于搭配 display:none 制作隐藏下拉栏目,制作修饰元素的小图标

position案例