前端笔记（html+css+js+vue）

 布局常用样式属性

• width 设置元素(标签)的宽度，如：width:100px;
• height 设置元素(标签)的高度，如：height:200px;
• background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
• border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
• 以上也可以拆分成四个边的写法，分别设置四个边的：
• border-top 设置顶边边框，如：border-top:10px solid red;
• border-left 设置左边边框，如：border-left:10px solid blue;
• border-right 设置右边边框，如：border-right:10px solid green;
• border-bottom 设置底边边框，如：border-bottom:10px solid pink;
• padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
• margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
• float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性

• color 设置文字的颜色，如： color:red;
• font-size 设置文字的大小，如：font-size:12px;
• font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
• font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
• line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
• text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
• text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
• text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

 背景常用样式属性

 

 background-size属性

1个值 同时设置宽高
2个值 分别设置宽高
以px为单位的数字
%
cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎
contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白，也没关系

background-position 属性

• 该属性设置背景图像的起始位置，其默认值是：0% 0%
• 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%

块元素与行内元素（内联元素） 

 

 display属性

•    display：block;（转换为块元素）
•    display：inline;（转换为行内元素）
•    display：inline-block;（转换为行内块元素）
•   display：none;（元素不会被显示

H5新标签 

• <header></header> 头部
• <nav></nav> 导航
• <section></section> 定义文档中的节,比如章节、页眉、页脚
• <aside></aside> 侧边栏
• <footer></footer> 脚部
• <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

表格和表单

 一文详细了解表格与表单标签_表格和表单-CSDN博客

选择器 

关系选择器分类

• 后代选择器 
  选择所有被E元素包含的F元素，中间用空格隔开
• 子代选择器   
  选择所有作为 E 元素的直接子元素 F ，对更深一层的元素不起作用，
  用 > 表示
• 相邻兄弟选择器
  选择紧跟 E 元素后的 F 元素，用加号表示，选择相邻的第一个兄弟元
  素，只能向下选择
• 通用兄弟选择器
  选择 E 元素之后的所有兄弟元素 F ，作用于多个元素，用 ~ 隔开，只能
  向下选择

弹性盒模型（flex box） 

父元素上的属性

display 属性

display:flex ; 开启弹性盒（属性设置后子元素默认水平排列）

flex-direction 属性

定义

flex-direction 属性指定了弹性子元素在父容器中的位置

语法

• row：横向从左到右排列（左对齐），默认的排列方式
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
• column：纵向排列
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面 ）

justify-content 属性

定义

内容对齐（ justify-content ）属性应用在弹性容器上，把弹性项沿

着弹性容器的主轴线（ main axis ）对齐

语法

• flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
• flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
• center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

语法

justify-content : flex-start | flex-end | center

align-items 属性

定义

align - items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方

式

语法

align-items : flex-start | flex-end | center

子元素上的属性

flex

flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为 0 ，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配

剩余空间。 0.1 即 10% ， 1 即 100% ，超出按 100%

.flex-item2 {
       height: 150px;
       background-color: green;
       flex: 2;
}
.flex-item3 {
       height: 150px;
       background-color: blue;
       flex: 1;
}

浮动

 浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点

块元素不会独占一行，行内元素也可以设置宽高等等

 float:left (向左浮动) right(向右浮动)

    设置元素浮动后的特点

• 1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面的元素会立即跑上去
•  2、元素浮动之后，不会超过它前一个兄弟，最多一边齐
•  3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面
•  4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动
•  5、浮动元素不会超过其父元素的范围

清除浮动

清除子元素浮动对父元素的影响

overflow 清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清

除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面加 :

overflow:hidden ; clear: both ;

 定位

• position 属性指定了元素的定位类型

• 其中，绝对定位和固定定位会脱离文档流
• 设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素（上一级元素）进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

 圆角

使用 CSS3 border - radius 属性，你可以给任何元素制作 " 圆角 "

border - radius 属性，可以使用以下规则：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

border-radius: 15px 50px 30px 5px;

阴影

box-shadow 向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur color;

 box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to" ，等

同于 0% 和 100%。

@keyframes name {
    from|0%{
   css样式
   }
    percent{
   css样式
   }
    to|100%{
   css样式
   }
}

• 使用 @keyframes 规则，你可以创建动画
• name：动画名称，开发人员自己命名；
• percent：为百分比值，可以添加多个百分比值；

animation执行动画

animation: name duration timing-function
delay iteration-count direction;

 

 切换背景颜色

<div class="animation"></div>

.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
   }
    50% {
        background-color: green;
   }
 100% {
        background-color: blueviolet;
   }
 }

 呼吸效果

<div class="box"></div>

.box {
    width: 500px;
    height: 400px;
    margin: 40px auto;
    background-color: #2b92d4;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    animation: breathe 2700ms ease-in-out infinite alternate;
}
 @keyframes breathe {
    0% {
        opacity:0.2;/*不透明度*/
        box-shadow: 0 1px 2px rgba(255, 255,255, 0.1)
   }
    50% {
        opacity:0.5;
        box-shadow: 0 1px 2px rgba(18, 190,84, 0.76)
   }
    100% {
        opacity: 1;
        box-shadow: 0 1px 30px rgba(59, 255,255, 1)
   }
}

雪碧图（css精灵图）

原理

• 通过background-image引入背景大图片
• 通过background-position把背景图片移动到自己需要的位置

<i class="icon1"></i>
<i class="icon2"></i>

.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px;
}
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;
}

 字体图标

<link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .home{
            font-size: 100px;
            color: #e1251b;
        }
    </style>

    <span class="iconfont icon-home home"></span>
    <span class="iconfont icon-dizhi home"></span>