ELl-hsy
ELl-hsy

css样式

css样式–基础

css的引入方式

  1. 行内样式

    在标签内部通过style属性来设置元素样式；

    作用与当前标签;

    需要配合js使用最当;

    <p style="size : 18px;">
    这是一段文字
p>

  2. 内嵌样式

    在 hade 头部 title 标签下 设置 style 标签,在其内部书写;

    作用与当前标签;

    常用与小案例;

    <head>
    <title>title>
    <style>
        /* css样式与注释 */
    style>
head>

  3. 外联样式

    css单独写在单独的css文件里,在 hade 头部 title 标签下用 link 标签引入;

    一个css可以作用于多个页面;

    常用与各个项目中;

    <head>
    <title>title>
    
    <link rel="stylesheet" href="">
head>

    它们之间有优先级:

    ​ 行内样式 > 内嵌样式 > 外部样式

    但是 内嵌样式 > 外部式有一个前提：内嵌样式 css样式的位置一定在 外部式 的后面。

    例:

    <head>
    <title>title>
    
    <link rel="stylesheet" href="">
    <style>
        /* css样式 */
    style>
head>

css书写样式顺序

  1. 定位
  2. 浮动 / display转换行内块
  3. 盒子模型,宽度,高度,背景色
  4. 文字样式

选择器

选择器有:

  1. 元素(标签)选择器
  2. id选择器
  3. 类(class)选择器
  4. 通配(*)选择器

类选择器最常用;

  • 它可以有多个,一个标签可以有多个class类名;

  • id只能有一个 ,它是唯一性的,一般配合js使用;

  • 元素和通配它们的选择范围太广阔;

类选择器以: .xxx

id选择器以: #xxx

/* 清除內外边距 */
*{
    margin: 0px;
    padding: 0px;
}

1.关系选择器

父元素

​ 直接包含的元素叫做父元素

子元素

​ 直接被父元素包含的元素是子元素

​ 作用：选中指定父元素的子元素

​ 语法：父元素 > 子元素

div.box > span {}

孙子元素

div.box > p > span {}

祖先元素

  • 直接包含后代元素的元素叫做祖先元素

  • 一个元素的父元素也是它的祖先元素

后代元素

  • 直接或者间接被祖先元素包含的元素叫做后代元素

  • 子元素也是后代元素

作用：选中指定元素内的指定后代元素

语法：祖先 后代

div span {…}

兄弟元素

用有相同父元素的元素是兄弟元素

作用：选择下一个兄弟，单个兄弟

语法：前一个 + 下一个

p + span {…}

作用2：选择下面所有兄弟

语法：兄 ~ 弟

p ~ span {…}

2.属性选择器

[属性名]选择含有指定属性的元素

/* 解析：标签里含有title属性就行 */
p[title]{...}

[属性名=属性值]选择含有指定属性和属性值的元素

/* 解析：标签里含有title属性并且值为abc才行 */
p[title=abc]{...}

[属性名^=属性值]选择属性值以指定值开头的元素

/* 解析：标签里title属性开头为abc即可 */
p[title^=abc]{...}

[属性名$=属性值]选择属性值以指定值结尾的元素

/* 解析：标签里title属性结尾为abc即可 */
p[title$=abc]{...}

[属性名=属性值]选择属性值 中含有某值的元素*

/* 解析：标签里title属性任意位置有abc即可 */
p[title*=abc]{...}

3.伪类选择器

  1. 伪类选择器：就是在 css 里进行条件筛选进行设置样式;

  2. 伪类是用来描述一个元素的特殊状态

    比如：第一个子元素，被点击的元素，鼠标移入的元素…

  3. 伪类选择器一般情况下以冒号开头

    /* 第一个子元素 */
:first-child

/* 最后一个子元素 */
:last-child

/* 
选中第 n 个子元素 
特殊值：
n 第 n 个，范围是  0  到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 2n-1 或 odd 表示选中奇数位的元素
-n+5	找到前5个的元素
n+5		找到从第5个后的元素
5n	5,10,15,20
*/
:nth-child()

/* 既是第一个也是最后一个的子元素 */
:only-child 
/* 例： */
plate > :only-child
/* 
大于号很重要，因为是plate它下面的子元素
*/

    以上的伪类都是根据所有的子元素（所有的子标签）进行排序筛选;

    以下是功能上面一样，都是是根据同类型的元素（p标签是p标签里的，span是span的）进行排序筛选;

    /* 同类型子元素的第一个 */
:first-of-type

/*
同类型子元素的最后一个;也可以说同样的类，不同的标签
*/
:last-of-type

/* 同类型子元素的第n个 */
:nth-of-type()

/* 不论元素类型从最后一个元素往前数 */
:nth-last-child()

/* 没有子元素的元素 */
:empty

/* 否定伪类;用于将符合条件的元素从选择器中去除 */
:not()

4.伪元素

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

/*
表示第一个字母
解析：设置每个段落首个字的样式
*/
::first-letter

/*
表示第一行
解析：设置每个段落第一行的样式
*/
::first-line

/*
表示选中的内容
解析：就是鼠标拉中的内容改变背景颜色样式
*/
::selection

/*
元素的开始
解析：就是在一个块或者行的开头位置进行添加内容
*/
::before

/*
元素的最后
解析：就是在一个块或者行的末尾位置进行添加内容
*/
::after

/*
before和after必须结合content属性来使用
例：添加 [ 与 ] 
*/
div::before{content: '[';}
div::after{content: ']';}
/*
before 和 after是可以在css里添加文本的样式
*/

5.焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件

效果：
表单控件获取焦点时默认会显示外部轮廓线

就是鼠标点入表单后的

:focus
/*
input:focus{}
*/

6.超链接的伪类

超链接的伪类，用于设置点击前后，悬停等等时候的样式

  1. :link 正常状态下未点击（未访问）过的链接

    语法：

    /* 正常状态下的链接可以做任意的修改 */
a:link{color: blue;}

  2. :visited 表示点击（访问）过链接

    语法：

    /* 由于隐私的原因，它只能修改颜色，不能做其他修改 */
a:visited{color: xxx;}

  3. :hover 用来表示鼠标移入（悬停）的状态

    语法：

    a:hover{color: xxx;}

  4. :active 鼠标点击后

    语法：

    a:active{color: xxx;}

7.选择器的权重(优先级)

样式的冲突

  1. 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

    选择器的权重

    ​ 内联样式 1,0,0,0

    ​ id选择器 0,1,0,0

    ​ 类和伪类选择器 0,0,1,0

    ​ 元素选择器 0,0,0,1

    ​ 通配选择器 0,0,0,0

    ​ 继承的样式 没有优先级

    内联 > id > 类与伪类 > 标签 > 通配 > 继承

  2. 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算）

  3. 选择器的累加不会超过其最大数量级，类选择器在高也不会超过id选择器

  4. 如果优先级计算后相同，则优先使用靠下的样式

  5. 可以在某一个样式的后面添加 !important，则此样式会获取到最高的优先级，甚至超过内联样式

    !important

    注意：开发中这个要慎用！一但设置了难以修改。

字体样式font

  1. 字体大小: font-size: 10px;

    font-size: 10px;

  2. 字体粗细: font-weight

    /*
关键字				数字
正常:	normal	=		400
加粗:	bold	=		700
*/
font-weight: normal;
font-weight: 400px;

  3. 字体样式: font-style

    /*
正常(默认值)	normal
倾斜	italic
*/
font-style: noraml;

  4. 字体类型: font-family

    /*
无衬线字体（sans-serif）：黑体，Arial
衬线字体（serif）：宋体,TIMES NEW ROMAN
等宽字体（monospace）：CONSOLAS
Ink Free
fantasy 具有特殊艺术效果的字体:Papyrus、Herculanum、"Party LET"、"Curlz MT"、Harrington、fantasy
*/
/* 先看电脑有没有安装微软雅黑，宋体，没有就使用电脑里任意的无衬线字体（sans-serif）*/
font-family: 微软雅黑，宋体，sans-serif;

  5. 字体类型: font属性连写

    /*
font : style weight size family;
顺序要求：swsf
只能省略前两个，如果省略了相当于设置了默认值
*/
font: normal 60px 18px sans-serif;

    常见取值：具体字体1,具体字体2,…,字体系列

    渲染规则：

    • 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
    • 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
    • win系统默认 微软雅黑;macos默认苹方;
    • 如果字体名称中存在多个单词，推荐使用引号包裹
    • 最后一项字体系列不需要引号包裹

1.em与rem

大小单位：

em

​ em是相对于元素自身的字体大小来计算的

​ 1em = 1个字的大小

​ 当前size 为16px;2em = 32大小;

​ em会根据字体大小的改变而改变高与宽

rem

​ rem是相对于根元素html的字体大小来计算

2.像素与百分比

长度单位：

​ 像素px

  • 屏幕（显示器）实际上是由一个一个的小点点构成的
  • 不同的屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰
  • 所以同样的200px在不同的设备下显示的效果不一样

百分比%

  • 也可以将属性设置为相对于父元素属性的百分比
  • 设置百分比可以使子元素跟谁父元素的改变而改变

4.vh与百分比

vh是一种视窗单位，也是相对单位。相对于视窗的高度。视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

文本样式text

  1. 文本缩进: text-indent: 10px;

    /* 10em;(推荐: 1em = 当前标签的font-size的大小) */
text-indent: 10px;

  2. 文本水平对齐: text-align: left;

    /*
left	左对齐;
center	居中对齐;
right	右对齐;
*/
text-align: left;

    如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

    text-align : center 能让那些元素水平居中？

    • 文本

    • span标签、a标签

    • input标签、img标签

      如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

  3. 文本修饰: text-decoration: underline;

    /*
underline	下划线(常用)
line-through	删除线(不常用)
overline	上划线(几乎不用)
none	无装饰线(常用)
*/
text-decoration: underline;

    开发中会使用 text-decoration : none ; 清除 a标签默认的下划线

    text-decoration: underline;设置下划线

  4. 行高: line-height

    line-height: 20px;
    1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
    2. 网页精准布局时，我们一般做css初始化,会设置 line-height : 1 清除上下间距
    3. 取值 是以px为单位
    4. 取值 是以倍数(是文字大小的倍数,不带单位)

颜色

颜色单位：

​ rgb值

​ rgb通过三种不同颜色来调配各种颜色

​ r red红色，g green绿色，b blue蓝色

​ 每一种颜色的范围在0 - 255（0% - 100%）之间

​ 语法：rgb(0,0,0)

​ 三个0是黑色，都是255是白色

​ rgba

​ 就是在rgb的基础上增加了一个a表示不透明度

​ 它需要4个值，前面三个与rgb一样，第四个表示不透明度

​ 1 表示完全不透明；0表示完全透明；.5 是半透明

​ 十六进制的rgb值：

​ 语法：#红色绿色蓝色

​ 颜色浓度通过 00-ff

​ 如果颜色两位两位重复可以进行简写

/* 红色 */
#ff0000;
/* 红色 */
#f00;

hsl值 hsla值

​ h 色相（0 - 360）

​ s 饱和度，颜色的浓度 0% - 100%

​ l 亮度，颜色的亮度 0% - 100%

css样式–布局

文档流 normal flow

文档流

  1. 文档流是可以显示的对象在排列时所占用的位置;
  2. 文档流所在的位置是网页的最底层;
  3. 网页是一个多层的结构，一层叠加着一层;
  4. 通过css可以分别为每一层设置样式;
  5. 作为用户来讲只能看到最顶上一层;
  6. 这些层中，最底下的一层称之为文档流，文档流是网页的基础;
  7. 我们所创建的元素默认都是在文档流中进行排列的;
  8. 对于我们来说元素主要有两个状态;

​ 在文档流中(占位)

​ 不在文档流中(脱离文档流不占位)

元素在文档流中有什么特点：

块元素:

  • 块元素会在页面中独占一行(自上而下垂直排列);
  • 默认宽度是父元素的全部(会把父元素撑满);
  • 默认高度是被内容撑开(子元素);

行内元素:

  • 行内元素不会独占页面的一行，只占自身的大小;
  • 行内元素在页面中从左向右水平排列，如果一行之中不能纳所有行内元素，则元素会换到第二行继续从左向右;
  • 水平排列(与书写习惯一致);
  • 行内元素的默认宽度与高度都是被内容撑开;

盒子模型 box model

上　top，右 right，下　bottom ，左 left

盒子模型,盒子:

  1. css将页面中的所有元素都设置为了一个矩形的盒子块
  2. 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
  3. 每一个盒子都由以下几个部分组成：
  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

基本上都是 border-top:

​ top可以更换为其他的的;

１.内容区 content

  1. 内容区(content)，元素中的所有子元素和文本内容都在内容区排列

  2. 内容区的大小是由width 和 height两个属性来设置

    width 设置内容区的宽度;

    height 设置内容区的高度;

width: 200px;
height: 200px;
background-color: royalblue;

2.盒子-边框 border

边框(border)，边框属于盒子的边缘，边框里面属于盒子的内部，出了盒子都是外部

边框的大小会影响到整个盒子的大小

要设置边框，至少需要三个样式

  • 边框的宽度 border-width

  • 边框的颜色 border-color

  • 边框的样式 border-style

    属性可设置为 实线，虚线，双实线

/*细线边框*/
border-collapse: collapse;
border-width: 8px;
border-color: black;
border-style: solid;

用边框 border 指定样式

border是简写属性，可以通过该属性设置边框所有的相关样式并且没有顺序

border：red solid 10px；

用方向指定样式
方法一：

/* 指定上面位置的边框宽度 */
border-top-width: 10px;

/* 指定xxx位置的边框颜色 */
border-xxx-color

/* 指定xxx位置的边框线 */
border-xxx-style

方法二：

border-top 指单独定上面位置的颜色，宽度与边框线;
设置的内容可以随意摆放
可以是top 也可以是 right

边框的宽度 border-width
默认值，一般情况下为 3px（像素）
border-width 可以用来指定四个方向（上右下左）的宽度
值的情况：
例：border-width:10px 12px 18px 20px;
四个值时 上 右 下 左 的顺序指定
三个值时 上 左右 下 的顺序指定，以中间的数值指定左右两侧
两个值时 上下 左右 的顺序指定
一个值时 上下左右 就是指定了所有

边框的颜色 border-color
默认值为黑色，也可以入宽度一边一个颜色，顺序都是一样

注意事项：
边框的宽度，边框的颜色 可以简写，最好不要简写
边框的样式 不能简写，因为不写就没了，它的默认值为none(没有边框)

3.盒子-内边距 padding

  1. 内边距(padding)，与边框一样可以影响盒子大小，盒子的背景颜色会延申到内边距上；

  2. 同由上 top，右right，下bottom，左 left来影响

  3. 内边距不能设置颜色

  4. padding的简写与边框一样四个方向：

  5. 其他格式相同:

    padding: 可以用来指定四个方向（上右下左）的宽度

  6. 值的情况：

    padding:10px 12px 18px 20px;

    四个值时 上 右 下 左 的顺序指定;

    三个值时 上 左右 下 的顺序指定，以中间的数值指定左右两侧;

    两个值时 上下 左右 的顺序指定;

    一个值时 上下左右 就是指定了所有;

  7. 计算盒子大小需要将 内容区，内边距与边框相加计算;

4.盒子-外边距 margin

外边距(margin)

  1. 外边距不会影响可见框的大小,但是外边距会影响盒子的位置;

    margin-top

  2. 上外边距，设置一个正值，元素会向下移动

    margin-right

  3. 默认情况下设置右外边距不会产生任何效果

    margin-bottom

  4. 下外边距，设置一个正值，其下面的元素都会向下移动

    margin-left

  5. 左外边距，设置一个正值，元素会向右移动

  6. margin也可以设置负值，元素会往相反的方向移动

  7. 元素在页面中是按照自身自左向右的顺序排列的;

  8. 所以默认情况下，如果我们设置的左和上外边距则会移动自身,而设置下和右边距会移动其他元素;

  9. 外边距margin可以与边框，内边距它们一样简写

    margin:

  10. margin会影响到盒子实际占用的空间

5.盒子-水平方向布局

元素的水平方向布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定

​ margin-left 外边距-左

​ border-left 边框-左

​ padding-left 内边距-左

​ width 宽度

​ padding-right 内边距-右

​ border-right 边框-右

​ margin-right 外边距-右

一个元素在父元素中，水平布局必须满足以下等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度

外边距-左 + 边框-左 +

内边距-左 + 宽度 +

内边距-右 + 边框-右 +

**外边距-右 **=父元素内容区的宽度

外边距-左 与 外边距-右 默认值为0，而宽度 width 的默认值就是 auto ，它们三可以设置为auto(自动);

以上等式必须满足，如果相加等式不成立，则称之为过度约束，则等式自动调整

调整情况：

  1. 如果七个值中没有为 auto 的情况，则浏览器会自动调整 margin-right 外边距-右的值以使等式满足

  2. 七个值中三个可以设置为auto：

    外边距-左 margin-left

    外边距-右 margin-right

    宽度 width

  3. 如果某个值为auto，则会自动调整为auto的那个值让等式成立

  4. auto + 0 + 0 +200 + 0 + 0 + 0 = 父元素内容区的宽度

  5. 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0;

  6. 如果将三个值都设置为auto，则外边距都是0，宽度最大;

  7. 如果将两个外边距设置为auto，宽度值固定，则会将外边距设置为相同的值;

  8. 所以我们可以利用这一点来使一个元素在父元素中水平居中;

示例：

width: xxxpx；

margin: 0 auto;

margin: 100px auto;

6.盒子-垂直方向布局

概括：

  1. 垂直排列，设置多高是多高；
  2. 子元素超过父元素的，可以用 overflow 裁掉；
  3. overflow 的值：
  4. visible 默认值，子元素溢出，在父元素外部显示;
  5. hidden 溢出的内容会被裁减不显示;
  6. scroll 根据设置的宽与高生成两个滚动条，通过滚动条查看完整的内容;
  7. auto 根据需要生成滚动条，需要上下的生成上下滚动条，需要左右的生成左右滚动条;
  8. 子元素是在父元素的内容区中排列的，如果子元素超过父元素则会溢出;

7.盒子-外边距折叠

概括：

  1. 两个盒子在一上一下的位置时，上面盒子设置的下外边距与下面盒子设置的上外边距会发生重叠现象；

  2. 在是兄弟元素的情况下：

    • 兄弟元素间相邻的垂直外边距会取两者之间最大值（这是两者都是正值的情况下）
    • 一正一负的情况：取两者的和
    • 都是负值的情况：取两者中的绝对值最大的（-200与-100，取-200）
    • 兄弟元素之间的外边距的重叠，队开发是有利的，不需要进行处理

  3. 父子元素的情况下：

    父子元素相邻外边距，子元素会传递给父元素（上外边距）;

    父子外边距的折叠会影响到页面的布局，必须进行处理;

    解决方法:

  4. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

  5. 给父元素设置overflow：hidden

  6. 转换成行内块元素

  7. 设置浮动

8.盒子-塌陷,溢出

盒子塌陷:当两个块级元素为父子关系时,给子元素设置外边距高时,父元素会出现塌陷;

方法一:

给父元素设置边框或者内边距

不推荐使用,它们容易撑大盒子

方法二:

给父元素设置:

overflow: hidden;

/* 溢出隐藏 */
overflow: hidden; 
/* 默认值,溢出可见 scroll*/
overflow: visibl; 
/* 无论是否溢出,都显示滚条*/
overflow: hidden; 
/* 根据是否溢出,自动显示或者隐藏滚动条 */
overflow: hidden; 
/* 横向隐藏滚动条 */
overflow-x: hidden;

推荐使用;

方法三:

把父子元素,转换成为行内块

不推荐使用

**方法四:**设置浮动

9.盒子-自动内减

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

解决方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去

/* 自动内减 */
box-sizing : border-box;
/* 
自动内减
content-box 为 外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大
*/

content-box(标准)
padding和border不被包含在width和height内
元素的实际大小为宽高+border+padding，此为标准模式下的盒模型

border-box(怪异)
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽
此属性为怪异模式下的盒模型

10.盒子-清除默认内外边距

/*
body标签默认有margin：8px
p标签默认有上下的margin
ul标签默认由上下的margin和padding-left
*/
*{
    margin: 0;
    padding: 0;
}

背景样式

  1. 设置背景样式

    /* 它的默认值是:rgba(0,0,0,0)、transparent	*/
background-color: red;

  2. 设置背景图片

    background-image: url(./1.jpg);

    注意:

    背景图片中的 url 中可以省略引号;

    背景图片默认在水平方向和垂直方向平铺;

    背景图片只能起到装饰作用,盒子不会被它撑开;

  3. 背景平铺

    /*
repeat	默认值,水平方向和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向 x 轴平铺
repeat-y	沿着水平方向 y 轴平铺
*/
background-repeat: repeat;

  4. 背景位置

    方法1

    /* 
后面两个0,前面一个是水平位置,后面一个是垂直方向 
水平方向的值有:
left 左;center 居中;right 右;
垂直方向的值有:
top 上;center 居中;bottom 下;
*/
background-position: 0 0;

    方法2

    /* 
后面两个0,前面一个是水平位置,后面一个是垂直方向 
水平方向的值有: 正值,水平向右边;负值,水平向左边;
垂直方向的值有: 正值,垂直向下;负值,垂直向上;
*/
background-position: 0 0;

  5. img或者video适应容器

    object-fit 属性用于规定应如何调整 或 的大小来适应其容器。

    object-fit: cover;

  6. 背景属性连写

    单个属性值的合写，取值之间以空格隔开

    书写顺序：background：color image repeat position

设置背景图片大小

作用：设置背景图片的大小，
语法：

background-size：宽度 高度；
/*
数字+px		简单方便,常用
百分比			相对于盒子自身的宽高百分比
contain
包含,将背景图等比例缩放,直到不会超出盒子的最大
cover
覆盖,将背景图等比例缩放,直到刚好填满整个盒子没有空白
*/

块元素与行内元素

1.块元素

显示特点：

  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 它可以继承父元素的宽,但它不属于继承性质,这是块元素自身的
  4. 可以设置宽高
    代表标签：
    div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.行内元素

显示特点：

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
    代表标签：
    a、span 、b、u、i、s、strong、ins、em、del……
  4. 行内元素,设置外边距上和下,不会生效,左右两侧会生效;
  5. 行内元素,设置内边距上内边距没有

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

3.块元素,行内元素相互转换

div{
    background-color: cornflowerblue;
    border: 1px solid;
    margin-bottom: 50px;
    width: 200px;
    height: 200px;
/*
转换成为行内块
*/
    display: inline-block;
}

  • display: block; 转换成块元素 常用

  • display: inline-block; 转换成行内块元素 常用

    行内块元素被浏览器默认成为行内元素,所以不能在转换成为行内元素

  • display:inline 转换成行内元素 少用

继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)

  1. color

  2. font-style、font-weight、font-size、font-family

  3. text-indent、text-align

  4. line-height

  5. ……

  6. 注意点：可以通过调试工具判断样式是否可以继承

灰色的不能继承;高亮可以;

  1. 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  2. a标签的color会继承失效

其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

  1. h系列标签的font-size会继承失效

其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
继承失效的特殊情况

去除列表默认小圆点

/* 给ul设置list-style:none */
list-style:none;

绝对定位

div{
    position: absolute;
    top: 10px;
    right: 10px;
}

浮动

浮动的作用是什么？

  1. 早期作用：图文环绕
  2. 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
/* 左浮动 */
float:left;
/* 右浮动 */
float:right;

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
    相当于从地面飘到了空中

  2. 浮动元素是属于半脱标的状态,里面的文字依然会受影响

    浮动元素比标准流高半个级别，可以覆盖标准流中的元素

    浮动是顶对齐特性

  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  4. 浮动元素有特殊的显示效果:一行可以显示多个;

  5. 可以使用margin进行缓慢移动;

  6. 浮动元素,不管你是行内元素还是块元素还是行内块,只要设置了浮动,就可以在一行显示,并且可以设置宽高;(它绝对不是行内块)
    注意点：

  7. 浮动元素是不能通过text-align: center;或者margin: 0auto;进行居中;

浮动的元素不能通过text-align:center或者margin:0 auto;

清除浮动

父子级,子级浮动,父级没有高度,后面的标准流盒子就睡受影响,需要清除;

方法一:

​ 给父级加高度;

​ 优点：简单粗暴，方便

​ 缺点:有些布局中不能固定父元素高度。

方法二:

​ 给父元素内容最后添加一个块级;

​ 给添加的块级,设置clear:both;

​ 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

div{
    /* 
    noth 表示清除左右两侧
    left 表示清除左侧
    right 表示清除右侧
    */
    clear: both;
}

方法三:单伪元素清除法

用伪元素替代了额外标签

优点：项目中使用，直接给标签加类即可清除浮动

/* 给父类,在增加一个类,用于清除浮动 ::after 它表示块的末尾 */
.clear::after{
    /* 用::after 自带的配合元素 */
    content: '';
	/* 转换成块元素 */
    display: block;
    /* 清除浮动 */
    clear: both;
    /* 补充代码:在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

方法四:双伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

/*	::before,它表示元素的开头	*/
.clear::before,
.clear::after{
    content: '';
    display: table;
}
.clear::after{
    clear: both;
}

方法五:

直接给父元素设置

overflow : hidden

overflow : hidden;

优点：方便

解决图片下的间隙

vertical-align: middle;

版心

width: 1226px;
margin: auto;

盒子阴影

 /* 盒子阴影 */
box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);

定位

  1. 可以让元素自由的摆放在网页的任意位置
  2. 可以让盒子始终固定在屏幕中的某个位置
  3. 一般用于盒子之间的层叠
  4. 解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上
/*
属性名：position
	静态定位	static
	相对定位	relative
	绝对定位	absolute
	固定定位	fixed
偏移值
水平左	left
水平右	right
垂直上	top
垂直下 bottom
*/
position:static;
/* 偏移值 */
right: 100px;
top: 20px;

/*脱标盒子居中*/
position: absolute;
    top: 50%;
    right: 50%;
transform: translate(50%, -50%);

定位 > 浮动 > 标准流

静态定位:

默认定位,它是标准流,它是不会脱离标准流的

相对定位:(子绝对定位,父相对定位)

是针对于之前的位置,进行移动的;

  • 它移动后还是在原本的位置占着;所以它是不脱标的

  • 相对定位之后,他是不会改变之前的模式的

    应用场景：

    配合绝对定位组CP（子绝父相）,用于小范围的移动

绝对定位:(子绝对定位,父相对定位)

脱离标准流,不占位置

它脱标后具有行内快的特点

它需要看父级别定位:

​ 父级不带定位,以浏览器为参照物进行定位;

​ 父级带定位,以父级定位

固定定位:

它是脱标的,不占位置

它是以浏览器为参照物

1.定位脱标元素居中

/* 
居中:
水平x
垂直y
translateX 宽度,与高度 
*/
transform: translate(x,y);
transform：translate(-50%，-50%)；

2.调整定位层级别

/* 
改变定位元素的层级
数字越大，层级越高
*/
z-index：6;

图片垂直对齐

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

  1. 文本框和表单按钮无法对齐问题
  2. input和img无法对齐问题
  3. div中的文本框，文本框无法贴顶问题
  4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
  5. 使用line-height让img标签垂直居中问题
/*
baseline	默认,基线对齐
top			顶部对齐
middle		中部对齐
bottom		底部对齐
*/
vertical-align: bottom;

设置鼠标光标

/*
default		默认值,箭头
pointer		小手,提示用户可点击
text		工字型,提示用户可以选择文字
move		十字光标,提示用户可以移动
*/
cursor: pointer;

边框圆角

/*	
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
*/
border-radius: 50%;

如果需要在网页中用盒子展示出一个正圆，应该如何完成？

  1. 盒子必须是正方形
  2. 设置 → border-radius:50%

如果需要在网页中用盒子展示出一个胶囊按钮，应该如何完成？

  1. 盒子要求是长方形
  2. 设置 → border-radius：盒子高度的一半

元素本身隐藏

常见属性：

  1. visibility：hidden
  2. display：none

区别：

  1. visibility：hidden 隐藏元素本身，并且在网页中 占位置,不建议使用
  2. display：none 隐藏元素本身，并且在网页中 不占位置

  • 开发中经常会通过 display属性完成元素的显示隐藏切换

  • display：none；（隐藏）、 display：block；（显示）

    /*元素隐藏*/
display：none;
/*元素显示*/
display：block;

1.元素透明

让某元素整体（包括内容）一起变透明

属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

opacity: 0.8;

2.边框合并

/* 让相邻表格边框进行合并，得到细线边框效果 */
border-collapse：collapse；

3用CSS画二维码上的三角形技巧

利用盒子边框完成
步骤：

  1. 设置一个盒子
  2. 设置四周不同颜色的边框
  3. 将盒子宽高设置为0，仅保留边框
  4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

精灵图

background: url(../images/sprites.png);
background-position：x y

盒子阴影

/*
h-shadow	水平阴影,允许负值
v-shadow	垂直阴影,允许负值
blur		模糊距离
spread		阴影尺寸
color		阴影颜色
inset		将外部阴影(outset)改为内部
顺序
语法 box-shadow: h-shadow v-shadow blur spread color inset;
*/
box-shadow: xxx;
/* 文字 阴影*/
text-shadow: xx;

过度

transition: all 0.3s;

​ all 能过渡的属性都过渡

  • transition 属性规定过渡效果的延迟（以秒计）。

    div {
  transition: width 2s, height 2s, transform 2s;
}

  • transition-delay 下例为转换添加过渡效果

    div {
  transition-delay: 1s;
}

  • transition-duration 规定过渡效果要持续多少秒或毫秒。

  • transition-property 规定过渡效果所针对的 CSS 属性的名称。

  • transition-timing-function 规定过渡效果的速度曲线。

div {
  transition: width 2s, height 4s;
}
/*
指定过渡的速度曲线
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
*/
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ico图标

<link rel="shortcut icon" href="图片路径" type="image/x-icon">

网页整体缩放

/*
transform: scale(0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
但应用程序缩小并出现在中心。它不像 chrome 那样使用整个屏幕。
*/
body{
    zoom:79%;
}

文字单行显示…

/*默认值,文字换行*/
white-space: normal;
/*让文字在一行显示*/
white-space: nowrap;
/*让溢出的文字隐藏*/
overflow:hidden;
/*超出的部分用省略号代替*/
text-overflow: ellipsis;
/*单行文本要有固定的宽度*/

字体图标

  • 阿里巴巴矢量图片库

  • 字体图标文件夹命名规范:fonts

  • 字体图片样式文件名字:iconfot.css

  • 引用方式

    

<i class="iconfont icon-xxx">i>

<i class="iconfont">xxxi>

    /*方法3:
icon 图标 伪元素的方式
只需要后面4个
前面需要加 \
需要指顶字体系列
font-family:"iconfont"
*/
content: '\e68d';
font-family: "iconfont";

平面转换

平面转换也叫 2d 转换;

1.位移

/*
x轴,y轴
不加上过渡无法使用;
*/
transform: translate(x,y);
/*单独设置方向的写法*/
transform: translatex();
transform: translatey();
/*
百分比值的写法
它是参照盒子自身移动的
*/
transform: translatex(100%);

  1. transform移动盒子不会影响其它盒子;

  2. 它在pc端,布局会有兼容性问题;

  3. 移动端可以放心使用;

    与其他移动盒子的方法对比:

    对比外边距margin:

    ​ margin外边距移动,会影响其余盒子,挤走它们;

    ​ 位移transform不会影响其它盒子,但是它不脱标;

​ 对比定位 position:

​ transform比定位运行更加快捷流畅,能用transform实现预想的效果就不要去使用position了;

​ 有的时候也可以配合定位一起使用;

2.旋转

任何旋转都是给需要旋转的对象增加过渡;

在给外面的框添加悬浮(:hover)

 /*
旋转语法;
正值顺时针旋转,负值逆时针旋转
*/
transform:rotate(360deg);

改变旋转中心点:

/*
它是给盒子添加的,并不是给悬停的
默认值为center中心原点;
取值:
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
*/
transform-origin: center;

如果需要移动,也需要旋转,则一定要先写移动,在写旋转;

因为旋转会改变网页内元素的坐标轴方向;

transform: translateX(600px) rotate(360deg);

3.缩放

做到缩放效果有两种:

  • 方法一:在悬浮时候直接改变宽高,这样容易挤开其他盒子;
  • 方法二:用 transform: scale(); 他不会挤开其他盒子;
/*
语法一:transform: scale(x,y);
建议不用,因为没必要,因为在实际中,写任意一边另外一边会等比例缩放
transform: scale();
取值:
等于1表示不缩放;
大于1表示放大;
小于1表示缩小;
数值里面不需要加单位;
*/
transform: scale(1);
transform: scale(0.5);

注意：单标签不能使用伪元素；

4.渐变

/* 
background-color: transparent;
transparent 透明黑
默认从上往下
background-image:linear-gradient
to left		设置渐变从右往左,相当于 270deg
to right	设置渐变从左往右,相当于 90deg
to top		设置渐变从下往上,相当于 0deg
to bottom	设置渐变从上往下,相当于 180deg,默认值等同于不写
*/
background-image:linear-gradinent(180deg,rgba(0,0,0,0),rgba(0,0,0,1))

3d转换

  • 与平面转(2d)换一样,也有位移,缩放,渐变;
  • 不过它比2d多了个z轴;

3d之位移

transform: translate3d(x,y,z);
transform: translateX(110px);
transform: translateY();
transform: translateZ();

3d之视距

/* 
它是给父元素添加的
视距元素
取值一般在:800px - 1200px
*/
perspective: ;

视距越小,盒子越大;

视距越大,盒子越小;

3d之旋转

transform: rotateZ(deg);
/* 1turn 一圈 */
transform: rotateZ(1turn);

与2d旋转一样;

/*
用来设置自定义旋转轴的位置以及旋转轴的角度
x,y,z取值为0-1之间的数字
*/
rotate3d(x,y,z,角度度数);

立体呈现

/*
默认是2d呈现,值是
transform-style: flat 子元素不开启3d立体空间
他是给父元素添加的,让子元素保存3d立体空间
需要添加视距
*/
transform-style: preserve-3d;

perspective视距只能增加近大远小,近实远虚的视觉效果.

动画

过渡只能实现两个状态间的变化过程

动画可以实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

/*
定义动画
@keyframes 动画名称{
    from{}
    to{}
}
*/
/*百分比写法*/
@keyframes 动画名称{
    0%{}
    25%{}
    100%{}
}
/* 
使用动画 
animation:动画名称 动画时长
infinite	无限次数
moce 时长
谁需要给谁加
*/
animation:moce 3s 3;

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时候的状态;

  • 动画的属性值 书写不分先后顺序;
  • 但是必须保留:动画名称,动画时长;
  • 如果里面有两个时间,第一个是动画时长,第二个是延迟时间,单位都是 s(秒);
  • animation可以让动画重复触发，transition不可以，是一次性的
属性 作用 取值
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态
backwards：第一帧状态
animation-timing-function 速度曲线 steps(数字)：逐帧动画
animation-iteration-count 重复次数 infinite为无限循环
animation-direction 动画执行方向 alternate为反向
alternate先正常运行在反方向运行,持续交替
normal正常反方向
animation-play-state 暂停动画 paused为暂停，通常配合:hover使用

逐帧动画:一般开发中配合精灵图使用

/* steps(10) 分为10帧 */
animation:moce 3s 3s steps(10);

走马灯

<head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 200px;
    }

    .box {
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }
    .box ul{
      width: 2000px;
      animation: zmd 5s infinite linear;
    }
    .box ul li{
      float: left;
    }
    @keyframes zmd{
      0%{
        transform: translate(0,0);
      }
      100%{
        transform: translate(-1400px,0);
      }
    }
  style>
head>

<body>
  <div class="box">
    <ul>
      <li><img src="./images/1.jpg" alt="" />li>
      <li><img src="./images/2.jpg" alt="" />li>
      <li><img src="./images/3.jpg" alt="" />li>
      <li><img src="./images/4.jpg" alt="" />li>
      <li><img src="./images/5.jpg" alt="" />li>
      <li><img src="./images/6.jpg" alt="" />li>
      <li><img src="./images/7.jpg" alt="" />li>
      <li><img src="./images/1.jpg" alt="" />li>
      <li><img src="./images/2.jpg" alt="" />li>
      <li><img src="./images/3.jpg" alt="" />li>
    ul>
  div>
body>

移动web

PC端网页和移动端网页的有什么不同

  • PC屏幕大，网页固定版心
  • 手机屏幕小， 网页宽度多数为100%

  1. 屏幕尺寸

    指的是屏幕对角线的长度，一般用英 寸来度量

  2. 分辨率

    物理分辨率是生产屏幕时就固定的，它是不可被改变的

    ​ 比如:1920 * 1080

    逻辑分辨率是由软件（驱动）决定的

    ​ 比如:1920 x 1080,缩放后的

    ​ (1920/150%)* (1080/150%)

    书写网页一般都是参考逻辑分辨率来写的

视口

视口：显示HTML网页的区域，用来约束HTML尺寸。

默认情况下，网页的宽度和逻辑分辨率是不相同,网页宽度是980px;


<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是 vscode 书写时候 ! + TAB 自动生成就有带的

二倍图

可以使用像素大厨软件测量二倍图中元素的尺寸

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

二倍图设计稿尺寸：750px。

百分比布局

分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。

Flex布局

Flex布局非常适合结构化布局

任何一个元素都可以直接给宽度和高度;

Flex存在兼容性问题;

水平是左右结构;

垂直是上下结构;

多个盒子横向排列使用浮动属性;
设置盒子间的间距使用margin属性;
浮动的盒子脱标

Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

特点:

类似于行内块的特点;

不设置高度,自动与父盒子一样;

设置方式
父元级添加 display: flex，子级可以自动的挤压或拉伸
组成部分
父级: 弹性容器
子级: 弹性盒子
主 轴/x轴
侧 轴 /y轴/ 交叉轴

父级添加 display: flex后,子级水平排列;

因为默认情况下,主轴在水平方向,所以子级水平排列

子元素排列方向 和 主轴方向 一致

Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

设置垂直方向的间距,就调整侧轴;

设置水平方向的间距,就调整主轴;

1.主轴的对齐方式

修改主轴对齐方式属性: justify-content

 /* 主轴 */
justify-content: space-between;
属性值 作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

2.行对齐

/* 属性值与上面主轴对齐一样 */
align-content:;

3.侧轴的对齐方式

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

  • align-items（添加到弹性容器)

  • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

  • 如果要保证侧 轴有拉伸效果,需要去除高度

    /* 谁要给谁加 */
align-self：;
/* 给父级 */
align-items:center;
/* 侧轴 */
align-content:;
属性值 作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

4.伸缩比

使用flex属性修改弹性盒子伸缩比

属性
flex : 值;
取值分类
数值(整数)

注意 : 只占用父盒子剩余尺寸

父级分多少份是所以的份数相加

/* 先把父级剩余的分成几份,在占去其中的 */
flex: 1;
/*flex: 1;与width 同时写,width不会起作用*/

5.修改主轴为垂直方向

/* column 列 ,row 行 */
flex-direction: column;
属性值 作用
row 行, 水平(默认值)
column 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上

6.让弹性盒子自动换行

/* 
默认值:nowrap;不换行
*/
flex-wrap: wrap;

7.移动端适配

flex + rem单位;

flex + viewport width/vh

flex布局 让rem 或者 vw/vh 实现网页尺寸(vw宽,vh高)

width: 10rem;
higth: 10vh;

rem 是相对于当前的文字大小

​ 文字大小 * rem

确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸
rem = (宽度或者高度数px) / 37.5(页面的宽度的十分之一)

68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字

媒体查询

能够使用媒体查询设置差异化css样式

@media(){
    p{}
}

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

引用js

在body里面写;

flexible.js是手淘开发出的一个用来适配移动端的js框架

<script src="./js/flexible.js">script>

Less语法

注释：
单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

  1. 除法需要加小括号;
  2. 表达式存在多个单位以第一个单位为准;

使用Less嵌套写法生成后代选择器

.box{
  width: (60 /37.5px);
  height: (30px / 37.5px);
	//快速生成后代选择器。
  .div{
    width: 20px;
    height: 60px;
	//&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
    &:hover{
      background-color: aqua;
    }
  }
}

less导入

/* 方法二一*/
@import '';
/* 方法二 */
@import url();

导出

先在less设置里settings.json下 less.compile 里添加"out": “…/css/”

// out: …/mycss/

禁止导出

// out: false

vw与vh

  1. vh单位尺寸

    1. 确定设计稿对应的vh尺寸 （1/100视口高度

      查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

    2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

  2. vw单位尺寸

    1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
      查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
    2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

响应式布局

max-width:(最大宽度–小于等于)

min-width:(最小宽度—大于等于)

@media (min-aspect-ratio:16 / 9) {
        .back-video{
            width: 100%;
            height: auto;
        }
      }
      /* 
      媒体查询:设置视频的宽度与高度的比例
      如果宽度与高度大于16:9
      */
@media (max-aspect-ratio:16 / 9) {
	.back-video{
	 	width: auto;
        height: 100vh;
        }
}

设置移动端最大宽度

max-width: 540px;
margin: 0 auto;
background: #fff;
/**/
@media (min-width:540px) {
  html{
      font-size:54px !important;
  }
}
body{
  background-color: #f4f4f4;
  max-width: 540px;
  margin: 0 auto;
}
.header{
  max-width: 540px;
  left: 50%;
  transform: translateX(-50%);
}

设置网页宽度小于多少时候隐藏盒子

@media (max-width:1000px) {
  .box{
      width:1000px;
  }
    .box:nth-child(2){
        display: none;
    }
}

ap;


### 7.移动端适配

flex + rem单位;

flex + viewport     width/vh

flex布局 让rem 或者 vw/vh 实现网页尺寸(vw宽,vh高)

```css
width: 10rem;
higth: 10vh;

rem 是相对于当前的文字大小

​ 文字大小 * rem

确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸
rem = (宽度或者高度数px) / 37.5(页面的宽度的十分之一)

68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字

媒体查询

能够使用媒体查询设置差异化css样式

@media(){
    p{}
}

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

引用js

在body里面写;

flexible.js是手淘开发出的一个用来适配移动端的js框架

<script src="./js/flexible.js">script>

Less语法

注释：
单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

  1. 除法需要加小括号;
  2. 表达式存在多个单位以第一个单位为准;

使用Less嵌套写法生成后代选择器

.box{
  width: (60 /37.5px);
  height: (30px / 37.5px);
	//快速生成后代选择器。
  .div{
    width: 20px;
    height: 60px;
	//&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
    &:hover{
      background-color: aqua;
    }
  }
}

less导入

/* 方法二一*/
@import '';
/* 方法二 */
@import url();

导出

先在less设置里settings.json下 less.compile 里添加"out": “…/css/”

// out: …/mycss/

禁止导出

// out: false

vw与vh

  1. vh单位尺寸

    1. 确定设计稿对应的vh尺寸 （1/100视口高度

      查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

    2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

  2. vw单位尺寸

    1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
      查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
    2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

响应式布局

max-width:(最大宽度–小于等于)

min-width:(最小宽度—大于等于)

@media (min-aspect-ratio:16 / 9) {
        .back-video{
            width: 100%;
            height: auto;
        }
      }
      /* 
      媒体查询:设置视频的宽度与高度的比例
      如果宽度与高度大于16:9
      */
@media (max-aspect-ratio:16 / 9) {
	.back-video{
	 	width: auto;
        height: 100vh;
        }
}

设置移动端最大宽度

max-width: 540px;
margin: 0 auto;
background: #fff;
/**/
@media (min-width:540px) {
  html{
      font-size:54px !important;
  }
}
body{
  background-color: #f4f4f4;
  max-width: 540px;
  margin: 0 auto;
}
.header{
  max-width: 540px;
  left: 50%;
  transform: translateX(-50%);
}

设置网页宽度小于多少时候隐藏盒子

@media (max-width:1000px) {
  .box{
      width:1000px;
  }
    .box:nth-child(2){
        display: none;
    }
}

你可能感兴趣的:(笔记,css基础,css,css3)

  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
    高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
    数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
  • 【Git】常见命令(仅笔记) 好想有猫猫 GitLinux学习笔记git笔记elasticsearchlinuxc++
    文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
  • 为什么你总是对下属不满意? ZhaoWu1050
    【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
  • 母亲节如何做小红书营销 美橙传媒
    小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
  • 读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
    为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
  • 基于Python给出的PDF文档转Markdown文档的方法 程序媛了了 pythonpdf开发语言
    注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
  • 语文主题教学学习笔记之87 东哥杂谈
    “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
  • Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 阅读笔记：阅读方法中的逻辑和转念 施吉涛
    聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
  • 《转介绍方法论》学习笔记 小可乐的妈妈
    一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
  • JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式androidjava常用设计模式
    博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
  • 解决Obsidian写笔记中的＜img＞标签无法显示图片的问题 全能全知者 笔记
    Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件 仓库
  • 2021年周总结 03 Ruby之家
    这周的生活过得也是比较快，因为暂时住的离公司有点距离，所以通勤时间相对较长一点，而在地铁上的一个半小时如何充分利用起来，则是我最近一直在思考的问题，2021年想让自己的生活都运行在计划中。(有时候自己想干一件事情就总是给自己找很多借口，想着以后怎么怎么样？然而哪有那么多的以后，能够方便当下的工作生活就立马执行就OK，这仅仅只是我此时想到背的很重的老人机笔记本电脑，也算是陪伴我快8年的—当时买的时候
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他