CSS1

第一章

F12:

element.style 内联样式（可以直接在上面写代码进行简单调试）

user agent stylesheet 用户代理样式

Inherited from** 从**继承

代码有个删除线表示没有应用，有个黄色三角叹号表示写错了

Unknown property name 不认识的属性名称（属性名写错了）

Invalid property value 未验证的属性值（属性值写错了 || 忘加分号 || 分号写成中文）

Computed(计算后) display: online 行内元素

block 块级元素

margin 示意图若边距上的数字为 - ，表示没有

Network 网络请求和响应利用浏览器缓存的技术减少请求的次数

inherit属于CSS关键字，所有的属性都可以接受该值，该值使得属性能够继承祖先设置

normal也是关键字，可将元素的属性恢复为设置前的值，如：line-height：normal;

display:initial; 不论父元素如何设定，恢复到浏览器最初始时的display属性

display: unset; 改值混合了inherit和initial，如果父元素设置了就用父元素的设定,否则用浏览器的缺省设定

CSS的七层层叠顺序:

background/border < 负z-index < block块级元素 < float浮动 < inline/inline-block

< z-index:auto或z-index:0 < 正z-index

注意：若设置opacity，则会形成一个新的层叠上下文，如opacity:0.99，则会位于正z-index的下面

CSS应遵循关注分离、松耦合的原则，同时需要注重理解，即使更改了 HTML 标签，也不需要修改 CSS 选择符，所以，给相应元素添加 class 是一个可选方案

_______________________________________________________________________________________

css的渲染的过程:

① 根据HTML的结构生成DOM树(DOM树包含了display:none的节点)

② 在DOM树的基础上，根据节点的几何属性(margin/padding/width/height/left等)生成render树

③ 在render树的基础上继续渲染color、font、transform、opacity等属性

如果①和②发生变化，会发生回流(reflow)，而如果仅仅③中的属性发生改变，仅会触发重绘(repaint)，即回流必然伴随着重绘，回流会影响浏览器css的渲染速度

reflow(回流): 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流

repaint(重绘): 当元素的一部分属性发生变化，如外观背景色，不会引起布局变化而需要重新渲染的过程叫做重绘

在浏览器中用css开启硬件加速，使用GPU(Graphics Processing Unit)可以提升页面性能

常用3d变化(translate3d属性)来开启硬件加速(会增加内存使用)，如:

.css{ -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);

transform:translate3d(0,0,0); }

_______________________________________________________________________________________

CSS（Cascading Style Sheets）层叠样式表、级联样式表、简称：样式表

实现了内容（HTML）与表现（CSS）的分离

CSS与HTML之间的关系

HTML：主要用于构建网页结构与内容

CSS：用于构建HTML元素的样式

CSS的作用：1、以统一的方式实现样式的定义

2、提高页面代码的可重用性和可维护性

HTML属性与CSS样式的使用原则

W3C：建议尽量使用CSS样式取代HTML属性

HTML特有的属性只能使用HTML属性

例：colspan(在CSS中没有方式能够取代，所以针对跨行跨列来讲，只能使用HTML元素属性，不能使用CSS属性)，rowspan也一样

CSS语法

一、css样式表的使用方式

①内联方式：也叫行内样式，将css样式声明在单个HTML元素中的style属性中

语法：

样式声明：表示一个具体显示效果，多个样式声明之间，用;隔开

每个样式声明都由两部分组成：样式属性：属性值；

例：设置某元素的文本颜色为红色，文字大小为24px；背景颜色为绿色

用分号分隔

②内部样式表：将"样式表"定义在页面的 style 属性中

步骤：1. 在中添加元素

2. 在 style 中添加若干"样式规则"

样式规则：

选择器{

样式声明；

...

}

选择器：规范了页面中哪些元素能够使用定义好的样式

③外部样式表：将 "样式表" 定义在外部 css 文件中(**.css)

步骤：1. 创建一个单独的样式表文件保存样式规则：**.css

只能编写遵循css规范的内容

2. 在需要的页面上使用标记链接引入样式表文件

二、css样式表特征

1. 继承性：子级元素可以直接使用父级元素声明好的样式(可减少代码量)

大部分的css样式属性是可以被继承的

2.层叠性：可以为一个元素声明多个样式规则

如果样式不冲突的话，多个样式规则中的样式可以层叠为一个

3. 优先级：样式定义冲突时，按照不同样式规则的"优先级"来应用样式

就近原则：就近优先---谁离元素近，就用谁，后定义者优先

浏览器缺省设置（user agent stylesheet，UA样式）最低

外部样式表或内部样式表中

内联样式最高

相同样式，以最后一次为主

4. ! important规则(仅对前面的一个属性生效)

作用：显示调整优先级，永远都以!inportant的为准

语法：属性名：值 !important;

将 !important 添加到样式属性值的后面，中间用空格隔开

注意：尽量少用

弊端：① IE6及以下浏览器不支持

② 会打破默认的优先级规则

三、注释：/*注释语句*/

____________________________________________________________________________________

CSS基础选择器

作用：规范了页面中哪些元素能够使用定义好的样式

目的：将定义好的样式匹配给页面中的元素

1、通用选择器

作用：匹配页面中所有的元素

语法：*{样式声明；}

缺点：效率较低，尽量不用

大部分属性可以通过继承来取代*

2、元素选择器

别名：标签选择器、标签样式、元素样式、标记选择器

作用：定义或重写页面某一类标签元素的默认样式

语法：元素名称{样式声明；}

3、类选择器

作用：用于定义一些元素的通用样式，定义好样式后，可以被任意元素的class属性值进行引用的选择器

语法：.类名{样式声明；}

使用：

注意：① 由英文，数字，下划线（_）连字符（-）组成

② 类名不能以数字开头

③ 除 _ - 以外不能有其他特殊符号

1、多类选择器的引用

方式：让一个元素同时引用多个类选择器

语法：

使用：.类选择器1.类选择器2.类选择器3 ... {样式声明;}

2、分类选择器的定义

方式：将元素选择器和类选择器结合起来使用，从而实现对某种元素不同样式的细分控制

语法：元素选择器.类选择器 {样式声明;}

例：div.redBack{} 定义class为redBack的div元素的样式

4、ID选择器

作用：用于匹配页面中指定ID值的元素（专属，唯一的id值，只能使用一次）

语法：#id值{样式声明;}

ID值一定要对应页面某个元素的ID值

5、群组选择器

作用：选择器声明是以 , 隔开的选择器列表

场合：将一些相同的规则用于多个元素时

语法：选择器1，选择器2，选择器3...{ }

6、后代选择器

后代：出现在某元素的任意层级的子元素，都可以称之为后代元素

语法：选择器1 选择器2{样式声明;}

例：div span{匹配div中所有的span}

7、子代选择器

子代：出现在某元素中，只具备一级层级关系的元素，被嵌套的称之为子代元素

语法：选择器1>选择器2{样式声明}

例：#d1>div>p{匹配ID中的下一级div元素中的p元素}

8、伪类选择器

作用：匹配页面元素中的不同状态的选择器

语法：由 : 作为结合符选择器:伪类选择器{ }

分类：1、链接伪类

:link 定义未被访问的超链接状态

:visited 定义访问过的超链接状态

2、动态伪类

:hover 定义鼠标悬停在元素上时的状态

:active 定义元素被激活时的状态（一瞬间的状态，点击瞬间），常用于移动端

:focus 定义元素获取焦点时的状态（长时间的状态，光标闪动时，使用Tab键切换a标签时）

text/password/textarea(多数使用在文本框上)

3、目标伪类

4、元素状态伪类

5、结构伪类

6、否定伪类

复杂选择器（非继承的）冲突时，把权值加到一起，权值大的优先，如果权值一样则后面的会覆盖前面的

继承的权值最低

选择器类型权值

元素选择器0、0、0、1

类选择器0、0、1、0

伪类选择器0、0、1、0

ID选择器0、1、0、0

内联样式(最高)1、0、0、0

____________________________________________________________________________________

尺寸

尺寸单位

1、% 百分比（相对单位，响应式时使用）

2、in 英寸（1in=2.54cm，对角线）

3、cm 厘米

4、mm 毫米

5、pt 磅（点，Point）（1pt等于1/72英寸）（多数用于文字大小）

6、px 像素（Pixel，计算机显示器上的一个点）（默认）

7、em 倍数，父元素文字大小的倍数，1em：父元素的字体尺寸；2em：父元素字体尺寸的两倍

8、rem 倍数，相对于根元素（html）设置的字体大小，css3新属性，IE8及以下不支持

9、ex 是一个距离单位，表示一个小写字母x(x、y、z的x)的高度，是相对单位，和父元素的字号有关系

浏览器的默认字体大小都为16px，所有未经调整的浏览器都符合: 1rem=16px

颜色单位

1、rgb（ , , ,）

R：red 红色

G：green 绿色

B：blue 蓝色

每个值的范围：0-255

例：rgb(0,0,0) 黑色

rgb(255,255,255) 白色

rgb(255,0,0) 红色

2、rgb(r%,g%,b%)

3、rgba（r，g，b，alpha）

alpha：透明度，0-1之间的数字

4、#rrggbb

由6位十六进制数字表示一个颜色：0-9 A-F（A-11,B-12,C-13...F-15）

例：#000000 黑色

#ffffff 白色

#ff0000 红色

5、#rgb（#rrggbb的缩写）每种颜色的两位数字相同时，才可以缩写

#000 表示 #000000

#abc 表示 #aabbcc

6、颜色的英文单词

尺寸属性

1、作用：用于设置元素的宽度和高度

单位：百分比(%,相对于父元素)和像素(px)

2、宽度

width 设置元素的宽度

max-width 设置元素的最大宽度

min-width 设置元素的最小宽度

3、高度

height 设置元素的高度

max-height 设置元素的最大高度

min-height 设置元素的最小高度

注意：块级元素宽度默认为父元素宽度的100%，高度自适应

行内元素宽度默认宽度以内容为准，高度自适应

注意:

1、max-系列的权重非常的高，超越了!important

2、当min-width与max-width大小有冲突的时候会采用最大原则，即谁大取谁的值

注意：允许修改尺寸属性的元素

1、块级元素（p,div,hn,ul,ol,dl,dt,dd）都允许修改尺寸

2、大部分的行内块元素

行内块：文本框、密码框... 能修改尺寸

单选按钮(radio)、复选框(checkbox)... 无法修改尺寸

3、大部分的行内元素(span,a,b,i)无法修改尺寸

本身就存在width和height属性的html元素允许被修改尺寸（img，table）

4、溢出处理：

使用尺寸属性控制元素大小时，如果内容所需要的空间的大于元素本身，则会导致内容"溢出"

属性：overflow

overflow-x 横向溢出处理方式

overflow-y 纵向溢出处理方式

取值：visible 溢出可见，不处理（默认值）

hidden 溢出隐藏（把溢出的内容隐藏）

① 当子元素为"文档流定位"定位时，会剪掉外面的

② 当子元素为"脱离文档流"定位时，会撑开显示

scroll 让元素显示滚动条，当内容溢出时，滚动条可用

auto 自动，不溢出不显示滚动条，溢出的话则显示滚动条

第二章*******************************************************************************

边框属性

边框：围绕在元素内容和内边距外的线条

通过一个属性控制四个方向边框的效果

2、简写方式：border：width style color;

width：宽度，边框粗细，以px为单位

style：样式，边框样式，实线，虚线

取值：solid 实线

dotted 虚线（点）

dashed 虚线（线条）

double 两条实线

groove 定义3D凹槽边框，其效果取决于border-color的值

ridge 定义3D垄状边框，其效果取决于border-color的值

inset 定义3D inset边框，其效果取决于border-color的值

outset 定义3D outset边框，其效果取决于border-color的值

color：颜色，边框颜色 transparent 透明色（有边框,通过设置透明,防止在添加边框时出现抖动）

取值：合法颜色值（#fff，#000）

默认为当前的文字颜色（也可写为currentColor关键字，为color的计算后属性值）

注意：border：none；或者border：0；(不加px可以提高效率,不会渲染)可以取消元素边框（无边框）

2、单边定义：border-方向：width style color;

方向：top/right/bottom/left （上右下左）

例：border-left：1px dotted red

3、单属性定义：定义四个边框的某一个属性值

属性：border-属性：值

例：border-style：solid

4、单边单属性定义：定义某一方向的具体某一属性值

属性：border-方向-属性：值

例：border-left-color：red

____________________________________________________________________________________

边框倒角

将元素的四个方向的角倒成圆角

属性：border-radius

取值：绝对数值（px,圆的半径）或百分比（%,根据宽度和高度的占比来作为倒角圆的半径）

单独定义：border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-left-radius 左下角

border-bottom-right-radius 右下角

例：border-redius：5px

border-redius：50% 如果当前元素宽和高相等的时候，将得到一个圆

边框阴影，元素阴影

属性：box-shadow

取值：h-shadow v-shadow blur spread color inset;

h-shadow 必须设置，阴影的水平偏移距离，+向右偏移；-向左偏移，0向两边偏移

v-shadow 必须设置，阴影的垂直偏移距离，+向下偏移；-向上偏移，0向上下偏移

blur 模糊距离，向水平/垂直方向模糊的距离

spread 阴影的尺寸长度（向周围扩散的距离）

color 颜色 transparent 透明色

inset 值，默认的外阴影更改为内阴影(有凸起感)

例：下阴影：box-shadow：0 2px 3px #BDBDBD;

padding会加上阴影，margin不会加

注意：spread为blur的负值(数字相等)时，生成的阴影会被包含在原来的元素之下，可实现单侧投影

如：下侧投影 box-shadow: 0 7px 5px -5px #DDD

轮廓

作用：绘制于元素周围的一条线，位于边框之外

属性：outline：width style color;

outline-width 轮廓的宽度

outline-style 轮廓的样式

outline-color 轮廓的颜色 transparent 透明色

注意：outline不占用任何空间，可与clip搭配来填充空间

如：outline:9999px solid #F00; clip:rect(0, 9999px, 9999px, 0)

outline：none 或 outline：0；取消轮廓(常用)

例：取消文本框输入时的默认轮廓

a:active,a:hover{ outline：0 } 取消点击a链接时的轮廓(:focus使用键盘操作时不要取消效果)

剪裁

clip 用于剪裁已设置绝对定位(position:absolute)的元素

作用：用于定义一个剪裁矩形，对于一个绝对定位元素，在这个矩形的内容才可见，出了这个剪裁区域的内容会剪裁掉，剪裁区域可能比元素的内容区大，也可能小

语法：clip: rect(top, right, bottom, left); 设置元素的形状

clip: auto; 默认值，不应用任何剪裁

clip: inherit; 从父元素继承clip属性的值

____________________________________________________________________________________

框模型

框：页面的一切元素皆为框

框模型：Box-Model又称盒子模型，定义了元素框处理元素内容、内边距、外边距的方式

对象实际宽度 = 左右外边距+左右边框+左右内边距+width

对象实际高度 = 上下外边距+上下边框+上下内边距+height

注：增加边框的内边距和外边距，元素内容区域大小不会改变，但元素的总体占地尺寸会发生变化

元素的可视化尺寸，在边框内：边框内宽度 = 左右边框+左右内边距+width

边框内高度 = 上下边框+上下内边距+height

一、外边距：围绕在元素边框周围的空白区域就是外边距(元素与元素之间的间距)

正常情况下，外边距是不允许被其他元素所占据的

语法：四个方向外边距：margin：value;/* px相对于自己,%相对于父元素 */

单边设置：margin-top 上外边距

margin-bottom 下外边距

margin-left 左外边距

margin-right 右外边距

取值：① 单位可以为px（可以为负）

② 单位可以为%（以父元素为参考）

③ 取值为auto

默认情况下，可以自动计算左右外边距，实现块级元素水平居中对齐

注意：必须为元素设置宽度

④取值为负值（向相反的方向移动元素）

移动元素：margin-top：上外边距取值为负，元素向上移动

margin-left：左外边距取值为负，元素向左移动

外边距的简洁写法：margin：value （四个方向的外边距）

margin：v1，v2 （上下，左右）

margin：v1，v2，v3 （上，左右，下）

margin：v1，v2，v3，v4 （上，右，下，左）

注意：

① 有些元素存在默认外边距

例： body h1-h6 p ul ol pre dl dd dt

编写网页时一般会进行CSS Reset（CSS重写），将默认的外边距全部都清除

选择器1，选择器2...{margin：0;}

② 外边距不可以被继承

③ 外边距的特殊处理

1、外边距的合并

当两个垂直外边距相遇时，他们将形成一个外边距，称为外边距合并

合并后的外边距的高度定于两个外边距中高度较大者

2、外边距溢出

在某些特殊情况下，为子元素设置上下外边距时，有可能作用在父元素上

两个条件：① 父元素没有上或下边框

② 必须为第一个子元素或者最后一个子元素设置外边距

解决方案(4种)：① 为父元素增加边框（弊端：父元素高度会变化）

② 为父元素中增加一个空的

（弊端：多一个空元素）

③ 通过给父元素的上内边距取代子元素的上外边距(弊端:父元素高度会变化)

④ 使用内容生成，为父元素生成一个空元素，把空元素变成表格元素

3、为行内元素和行内块元素设置外边距

① 为 "行内元素" 设置上下外边距是无效的（比如：img）

② 为 "行内块元素" 设置上下外边距，则整行元素都跟着变

二、内边距：元素的边框（边缘）到内容之间的距离

特点：会扩大元素边框所占用的区域

语法：padding：value;

单边设置：padding-top / right / bottom / left：value;

取值：① 单位为px（没有负值）

② 单位可以为%(相对于父元素)

简洁写法：padding：value（四个方向的内边距）

padding：v1，v2（上下，左右）

padding：v1，v2，v3（上，左右，下）

padding：v1，v2，v3，v4（上，右，下，左）

特殊处理：

对行内元素和行内块元素设置内边距（上下）时，只会影响自己，并不会影响到其他元素

padding-bottom：50%; 指当前父元素width的100%，可以设置height为0，width:50%生成一个正方形

三、box-sizing

作用：重新指定框模型的计算模式

边框内宽度width =左右边框+左右内边距+width;

边框内高度height =上下边框+上下内边距+height;

属性：box-sizing：

取值：①content-box：默认值，采用默认计算模式，即元素的width属性值，不包含padding和border

②border-box：元素的尺寸会包含该元素的padding（内边距）和border（边框）,不包含margin

常用: .li{width:100%; box-sizing:border-box;} //占满屏幕的宽

____________________________________________________________________________________

背景属性：背景颜色，背景图像

注：设置的背景颜色/图像，会填充到内容区域、内边距、边框

1、背景颜色：以单一颜色填充

属性：background-color

取值：任意合法颜色或 transparent 透明色

注意：背景颜色会填充到边框、内边距、内容区域

2、背景图片（一般会显示在背景颜色上面）

作用：以图像作为元素的背景

属性：background-image

取值：url（"图片url"）或 url（图片url）

注意：是独立的元素

而背景图不是元素，是某元素背景的衬托

3、背景图片重复

属性：background-repeat

取值：① repeat 默认值，水平垂直方向都平铺

② repeat-x 仅在水平方向平铺

③ repeat-y 仅在垂直方向平铺

④no-repeat 不平铺

注：IE8及更早浏览器、Firefox4.0-8.0 不支持为background-repeat定义2个参数值，要写在一起

如：background-repeat: repeat no-repeat;

4、背景图片尺寸（定位图片时，若改变图片尺寸则改变整个图片的尺寸）

属性：background-size

取值：① value1 valie2 指定背景图像的宽度和高度，单位为px

② value1% value2% 采用当前元素的宽和高的百分比作为背景图像大小，不能写成一个

③ cover(覆盖) 将背景图像等比放大，直到背景图完全覆盖到元素的所有区域为止

④contain(包含) 将背景图像等比放大，直到背景图像的下边或右边有一个边缘碰到元素区域为止

5、背景图片的固定

属性：background-attachment

取值：① scroll 滚动，背景图会随着元素本身而滚动（默认值）

② fixed 固定，背景图不会随着滚动条而发生滚动，一直保持在可视化区域中

移动的只是视口，背景图一直固定(当滚动到下一个背景图时会被覆盖掉)

③ local 背景相对于元素的内容而滚动

注意：尽量为 body 设置背景

6、背景图片的定位（在同一个标签中，和尺寸分成两个类，可以将图片应用于多个场合）

作用：改变背景图像在元素中的默认位置

属性：background-position

取值：① x y

x：背景图水平方向移动距离，+背景图向右偏移，-向左

y：背景图垂直方向移动距离，+背景图向下偏移，-向上

②x% y%

0% 0%：显示在元素的左上方

100% 100%：显示在元素的右下方

50% 50%：居中

③ 关键字：x：left左 / center中 / right右

y：top上 / center中 / bottm下

例：background-position：left top; 左上方

background-position：top left; 左上方

background-position：center; 水平垂直都居中

背景属性的简写

属性：background：

取值：color(颜色) url(图像路径) repeat(重复) attachment(固定方式) position(定位);

注意：如果不设置其中的某个值，将采用默认值，不能加background-size(图片尺寸)，要单独写

例如：

div{

background-image: url("../img/red.png");

background-repeat: no-repeat;

background-position: center;

/*以上可简写为: background: url("../img/red.png") no-repeat center center; */

background-size: contain;

}

CSS Sprites 雪碧图，精灵图（图像拼合技术）

作用：将若干幅小图像封装到一幅大图像中，以减少http的请求次数

步骤：

① 在页面中，根据要显示的图像的尺寸，创建一个一模一样大小的元素

② 为该元素设置背景图，并且通过背景图像定位，实现位置偏移，将要显示的图像，显示在元素中

③ 可使用 transform：scale（value）对图片进行缩放

第三章*******************************************************************************

渐变：两种或多种颜色间平滑过渡的效果

1、分类：① 线性渐变

② 径向渐变

③ 重复渐变

2、渐变的组成（元素）

色标：决定了渐变的每种颜色及其出现的位置

每一种渐变效果都是由多个色标组成（两个及以上）

3、渐变的语法

① 语法

属性：background-image

取值：linear-gradient（）线性渐变

radial-gradient（）径向渐变

repeating-linear-gradient（）重复线性渐变

repeating-radial-gradient（）重复径向渐变

②线性渐变

语法：background-image：linear-gradient（angle，color-point，color-point，…）

1、angle：方向或角度，即渐变的填充方向

取值：关键字：to top 从下向上填充

to right 从左向右填充

to bottom 从上向下填充

to left 从右向左填充

角度：0deg~360deg

例：0deg to top

90deg to right

180deg to bottom

270deg to left

2、color-point：色标，表示每个颜色值，及其出现的位置，多个色标之间用，分隔

例：red 0% 开始的时候是红色

bule 50px 填充到第50像素时变为蓝色

注意：色标的位置可以省略，省略位置后，会将每个色标平均分配到元素区域

③径向渐变

语法：background-image：radial-gradient（[size at position]，color-point，color-point，…）

size at position：径向渐变的半径以及圆心位置（可以不设置，默认在元素正中央）

size 圆的半径，px为单位

position 圆心位置

例：0px 0px 将圆心设置在元素的左上角

50% 50% 将圆心设置在元素的中间位置

right bottom 关键字：top / right / bottom / left

4、浏览器的兼容性

各主流浏览器的主流版本，均支持渐变效果

对于不支持渐变的浏览器，可以尝试增加浏览器前缀，去实现渐变的显示

浏览器的前缀：Firefox -moz-

Chrome和Safari -webkit-

Opera -o-

IE -ms-

浏览器添加前缀的位置：① 如果浏览器不支持属性的话，则将前缀加到属性前

例：animation：scroll 5s

-moz-animation：scroll 5s

-webkit-animation：scroll 5s

-o-animation：scroll 5s

② 如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前边

____________________________________________________________________________________

字体属性

1、指定字体系列

属性：font-family

取值：value1，value2…

除了各种特定的字体系列外，CSS 定义了5种通用字体系列：

Serif、Sans-serif、Monospace、Cursive、Fantasy

注意：字体取值包含 '中文或特殊符号' 时，使用 "" 引起来

常用字体：font-family："Microsoft YaHei", "微软雅黑", "sans-serif",Helvetica;

属性：font-size

取值：rem / em / px / % / pt

3、字体加粗

属性：font-weight

取值：① normal 正常体

② bold 粗体(h1~h6)

③ bolder 更粗

④ lighter 更细

③400~900 整百倍数字，取值越大越粗(PC端不太明显，移动端明显)

400 normal

700 bold

4、字体样式

属性：font-style

取值：① normal 正常体

② italic 斜体

5、小型大写字母

作用：针对英文字符，将小写字符变成大写字符，但是大小与小写一样

属性：font-variant

取值：① normal

② small-caps

字体属性的简写方式

属性：font

取值：style(样式) variant(小型大写) weight(加粗) size(大小)/line-height family(字体，必给)

注意：使用简写属性时，必须要设置family的值，否则无效

font-size和line-height之间要加'/'

____________________________________________________________________________________

文本属性

1、文本颜色

属性：color

取值：任意合法颜色

2、文本排列方式

作用：指定当前元素中的文本、行内元素、行内块元素的水平对齐方式

属性：text-align

取值：left(左对齐) / center(居中) / right(右对齐) / justify(两端对齐)

3、文字修饰（线条样式）

作用：指定文本的线条样式

属性：text-decoration

取值：①none 没有线条显示(常用于去除超链接的默认样式)

② underline 下划线

③ overline 上划线

④ line-through 删除线

4、行高（可用于单行文本，使其line-height为文本的高，用于文字垂直居中）

作用：调整一行文本的高度

如果行高的高度高于文字高度本身，那么该行文本将在指定的行高内呈现出垂直居中的显示效果

场合：① 控制一行文本垂直居中对齐

② 设置行间距

line-height与font-size的计算值之差叫做'行间距',会分为2份，分别加到文本内容的顶部和底部

属性：line-height

取值：① 以px为单位的数值，固定的行间距

② 设置为数字，此数字会与当前的字体尺寸相乘来设置行间距

设置不同的字体大小，相同的行高数字，会出现不同的行高效果

③ 设置为%，基于当前字体尺寸的百分比行间距

注意：在行内元素中，有一个"幽灵空白节点"，不占宽度，无法用js获取，但确实存在，其行高大于1，当子元素的行高与字体大小相同时(父元素未设置行高)，"幽灵空白节点"会撑开父元素

解决：设置父元素line-height: 1，防止幽灵空白节点撑开父元素，设置行内元素子元素为行内块元素，有多个不同字体大小的子元素时，设置子元素vertical-align: middle

5、首行文本缩进（距离）

属性：text-indent

取值：缩进的距离，以px为单位的数值

允许使用负值，首行会被缩进到左边

若设置为%，则参照的是父元素的width

6、文本阴影

属性：text-shadow

取值：h-shadow v-shadow blur color;

7、修改input元素提示文字(placeholder)的样式(如：颜色)，(必须分开写)

input::-webkit-input-placeholder{WebKit browsers

color: red;

}

input:-moz-placeholder{Mozilla Firefox 4 to 18

color: red;

}

input::-moz-placeholder{Mozilla Firefox 19+

color: red;

}

input:-ms-input-placeholder{Internet Explorer 10+

color: red;

}

input::placeholder{

color: red;

}

8、修改input、textarea输入框的光标颜色(光标的粗细与缩放有关，与字体无关)

input, textarea{

color:red; 设置光标颜色

-webkit-text-fill-color:blue; 设置字体颜色

}

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder{

-webkit-text-fill-color: initial;修改placeholder颜色

}

9、letter-spacing: 50px; 中文、字母间距(可取负值)

word-spacing: 50px; 英文单词间距

____________________________________________________________________________________

表格table（bug较多，用ul代替）(在手机端，改变宽、高，可能会使边框合并之后加的border断开)

1、表格的常用属性

① 边距属性：padding

② 尺寸属性：width，height

③ 文本格式化属性：font-**

text-align，color，text-indent…

④ 背景属性：背景色，背景图，渐变

⑤ border属性

⑥vertical-align

作用：在单元格中，设置文本的垂直对齐方式

取值：top / middle / bottom

注意：在父元素上设置此样式时，对inline-block类型的子元素都有效

2、表格的特有属性

① 边框合并：将 table 和 td 的边框合并到一起，以单线框的模式进行显示

属性：border-collapse

取值：1、separate 默认值，分离边框

2、collapse 边框合并效果(chrome中：左边的覆盖右边的、上面的覆盖下面的)

注意：仅限于边框分离状态时使用，即border-collapse：collapse

若想改变个别边框的颜色，可使用内容生成，生成一个点或线，并绝对定位

② 边框边距

作用：单元格之间的距离

属性：border-spacing

取值：1、指定一个值：表示单元格间水平和垂直间距是相同

2、指定两个值：第一个值：单元格间的水平间距

第二个值：单元格间的垂直间距

3、标题位置

属性：caption-side

取值：① top 默认值，标题显示在表格之上

② bottom 标题显示在表格之下

4、显示规则

作用：指定的表格布局方式

默认布局方式为自动表格布局，即单元格的宽度实际上是由内容来决定的，与设定的值无关

属性：table-layout

取值：①auto 列宽度由内容决定，默认值，自动表格布局

②fixed 列宽度由设置的值来决定，而不取决于内容，固定表格布局

自动表格 vs 固定表格布局

① 自动表格布局—————td里的元素决定td的宽高

1、单元格大小会适应内容大小

2、缺点：表格复杂时，加载速度慢

3、适用于不确定每列大小的情况下使用

4、虽然算法较慢，但是能体现出传统表格的特点

② 固定表格布局

1、单元格大小取决于td中设置的值

2、优点：加载速度较快

3、确定每列大小时，可以使用固定表格布局

4、算法较快，缺点是不够灵活

你可能感兴趣的:(CSS1)

前端开发常用技巧（update...）一只程序猿小白 Echarts JavaScript css javascript css html vue.js 前端
前端开发常用技巧JS1、JavaScript删除子节点的方法2、JS动态生成div并添加点击事件CSS1、文本溢出处理2、使用伪类添加下划线3、使用伪类添加下划线下划线居中4、输入框默认字体颜色5、CSS画梯形6、uni-app中textarea中的字数限制问题7、设置Input的placeholder的字体样式Echarts1、ECharts柱状图设置立体圆柱型2、ECharts柱状图柱体颜色渐
前端总结：CSS/js 踩过的坑以及一些冷知识(永久更新) liberg Web/H5/小程序 css html js 前端样式前端样式问题总结
文章目录css1、行内元素底部留白(如img)2、内层margin≠外层padding3、js修改className4、垂直居中5、再说居中6、关于float7、关于position8、html/js9、关于图片的max-height问题csscss样式这一块坑比较多，有些情况不按常理出牌，在考虑不同屏幕显示效果,精确控制样式和大小时就会遇到这些坑。1、行内元素底部留白(如img)行内元素（比如i
css1基础选择器 ldd_eb css css 前端 javascript
大纲一.标签选择器比较简单，前面直接写目标标签二.类选择器应用例子三.多类名选择器（调用时中间用空格隔开）四.id选择器应用五.通配符选择器应用六.总结
css1字体属性 ldd_eb css css html 前端
一.font-family(字体系列）不同字体系统用，隔开；多个字母的字体系统用“”；二.font-size（字体大小）（有单位px）（默认字体16px）三.font-weight（字体粗细）（无单位）（400是默认字体）(标题需要单独指出字体粗细）normalboldbolderlighternumber四.font-style（字体样式）例子五.复合属性（需要顺序）（size，family不能
css1引入方式 ldd_eb css css 前端
一.行内样式表(行内式）（用在标签内部）（用于修改一些简单的）二.内部样式表（嵌入式）（平常练习的呢种）三.外部样式表（链接式）写在一个单独的文件中，不需要写style标签用link标签连接四.总结
css1文本属性 ldd_eb css css 前端
一.颜色（color）（一般用16进制）二.对齐（text-align)三.装饰（text-decoration）四.缩进（text-indent）（一般用2em）（有单位）五.行间距（line-height）（单位px）六.总结
CSS参考手册空白_d css 前端
CSS属性CSS属性组：动画背景边框和轮廓框颜色内容页的媒体属性尺寸盒子模型(新)盒子模型(旧)字体内容生成网格超链接线框列表外边距字幕多列内边距页面媒体定位分页Ruby语音表格文本2D/3D转换过渡用户界面“CSS”列指示属性是在哪个CSS版本中定义的（CSS1，CSS2，或者CSS3）.动画属性属性描述CSS@keyframes定义一个动画,@keyframes定义的动画名称用来被animat
day30_HTML 师范大学通信大怨总 Java零基础学习 html 前端开发语言 java
day25后几天为答疑和测试，第二阶段学习第一天是day30在今日内容0复习昨日1本周安排2第二阶段介绍3HTML0复习昨日1本周安排前面的Java知识类,对象,属性,方法String,日期操作,包装类操作集合操作本周HTML1天CSS1天JavaScript3天前端知识比后端简单,注意是记单词,要求就是会用见到别人写的页面要认识2第二阶段介绍第一阶段是java基础,第二阶段是javaweb,我们
Vue.js代码检查韩小浪~~ vue.js 前端 javascript
一、CSS1、属性可安全的替换为速记形式.el-dialog.el-dialog__header+.el-dialog__body{padding:040px;padding-top:4px;}.el-dialog.el-dialog__header+.el-dialog__body{padding:4px40px0;}2、度量单位冗余padding:0px20px;//修改后padding:02
CSS简文吴一晏
1.CSS简介CSS：层叠样式表(CascadingStyleSheets，缩写为CSS），是一种样式表语言，用来描述HTML或XML文档的呈现。CSS是开放网络的核心语言之一，由W3C规范实现跨浏览器的标准化。CSS被分为不同等级：CSS1（已废弃），CSS2.1是推荐标准，CSS3分成多个小模块且正在标准化中。2.CSS关键概念语言语法和形式特殊性继承级联盒子模型外边距合并包含块初始值，计算值
前端面试题（持续更新~~）深巷的猫~ 前端 java 面试
文章目录一、基础1、数组常用的方法2、数组有哪几种循环方式？分别有什么作用？3、字符串常用的方法4、原型链5、闭包6、常见的继承7、cookie、localstorage、sessionstrorage区别8、数组去重方法9、http的请求方式10、数据类型的判断方法11、cookie和session的区别二、JS1、js的执行机制三、CSS1、常见的布局方法2、盒子模型四、Vue1、vue双向数
CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器） Web - Nancy CSS css 前端 javascript
效果一、HTML{{num}}二、CSS1、grid网格布局（推荐）.num-wrap{//grid网格布局display:grid;grid-template-columns:repeat(3,1fr);gap:10px10px;}.num-item{background-color:#CB812E;color:#ffffff;height:80px;}2、flex弹性布局+伪类选择器.num-
面试官：CSS3新增了哪些新特性？ C+ 安口木面试系列 CSS css css3 前端
面试官：CSS3新增了哪些新特性？一、是什么css，即层叠样式表（CascadingStyleSheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的而CSS3也增加了很多新特性，为开发带来了更佳的开发体验二、选择器css3中新增了一些选择器，主要为如下图所示：三、新样式边框css3新增了三个边
html div font-family,css中设置font-family的实例介绍彭元鸿 html div font-family
font-family版本：CSS1兼容性：IE4+NS4+继承性：有语法：font-family:namefont-family:cursive|fantasy|monospace|serif|sans-serif参数：name:字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列说明：
CSS 字体 font-family属性(转) dragoo1 html css css font-family input 字体
CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch和font-size-adjust这两个属性。人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了@font-face相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始支持@font
CSS 字体 font-family属性我们要发财了 css html
CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch和font-size-adjust这两个属性。人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了@font-face相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始支持@font
前端面试知识点总结梳理学霸的男人 JavaScript
原链接：https://juejin.im/post/5cbff661e51d456e693f48ec看到该知识梳理挺好的，可以便于求职中的前端开发人员对照着查缺补漏，看看自身有哪些知识点还不熟悉作为知识总结对照，并且我会持续将遇到的新的面试中的问题进行添加css1、盒模型2、flex3、css单位4、css选择器5、bfc清除浮动6、层叠上下文7、常见页面布局8、响应式布局9、css预处理，后处
【CSS3】第3章 CSS3入门笔触狂放 web前端 css3 前端 css
学习目标了解CSS的功能和作用，能够列举CSS的应用示例。熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。掌握CSS样式表的引入方式，能够在网页中引入CSS样式。掌握CSS基础选择器的用法，能够使用CSS基础选择器设置差异化的网页样式。掌握字体样式属性的用法，能够在网页中设置不同的字体样式。掌握文本外观属性的用法，
CSS 轮廓（outline） 06b524e5e939
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSSoutline属性规定元素轮廓的样式、颜色和宽度。所有CSS轮廓（outline）属性"CSS"列中的数字表示哪个CSS版本定义了该属性(CSS1或者CSS2)。
Css3 FromLi
CSS层叠样式表CSS(CascadingStyleSheets)，通常称为CSS样式表或层叠样式表（级联样式表）作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入CSS1、行内样式(内联
前端面试知识点 Mr丶何
前端基础知识1、关于html1、html语义化标签得理解、结构化的理解；能否写出简洁的html结构；SEO优化。2、h5中新增的属性，如自定义属性data、类名className等；新增表单元素；拖拽Drag。3、h5中新增的API、修改的API、废弃的API稍作了解（离线存储、audio、video）。2、关于css1、css选择器（三大特性）。2、BFC机制。3、盒模型。4、css模块化开发（
JavaWeb之前端三件套 HalcyonJX JavaWeb java
前端三件套HTML1、入门程序2、HTML概念词汇解释3、常见标签3.1标题标签3.2段落标签3.3换行标签3.4列表标签3.5超链接标签3.6多媒体标签3.7表格标签（重点）3.8表单标签(重点)3.9常见表单项标签(重点)3.10布局相关标签CSS1、CSS引入方式2、CSS引入方式3、CSS浮动4、CSS定位5、CSS盒子模型JavaScript1、简介1.1组成部分1.2引入方式2、JS的
HTML和CSS 行走的大黑马 html css 前端
HTML和CSS1：标签学习1：文件标签（构成html最基本的标签）1：html：html文档的根目录2：head：头标签。用于指定html文档的一些属性，引入外部的资源3：title：标题标签4：body：体标签5：：html5中定义该文档是html文档2：文本标签：和文本有关的标签注释：1：to:标题标签字体大小逐渐递减2：：段落标签3：：换行标签4：：展示一条水平线属性：color：颜色wi
css实现居中的方法总结 rosalyn10
在页面布局中经常会涉及到各种居中问题，下面统计下经常用到的各种居中方法：1.行内元素的水平居中如果父元素是块级元素，那直接给父元素设置text-align：center样式设置如下：css1效果如下：行内元素水平居中2.行内元素的垂直居中1.单行元素单行元素设置行高等于box的高。样式如下：单行样式设置行高效果如下：单行元素垂直居中2.多行行内元素以下只列举一种实现方法。利用display：tab
Web前端笔记（1-20）烨娜前端 javascript css
Web前端笔记（1-20）一、HTML+CSS系列教程之导学1、拨云见日2、溯本求源3、风生水起4、巧夺天工二、什么是HTML和CSS1、HTML和CSS是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。2、编程和网站的关系：3、如何看到网站的源代码?4、一个网站是由N多个网页组成的。每一个网页.html文件（N多个html文件构成一个网站）5、如何去写代码？写到哪里呢？三、宇宙第
2021面试题库整理集 shimeifang11 web vue 前端面试
一，html与css1，页面导入样式，使用link与@import有什么区别？(1)从属关系：link是html标签，@import是css提供的(2)加载差异：页面加载时，link会同时加载，而@import引入的css会在页面加载完成后加载(3)兼容性，@import不兼容ie5以下浏览器(4)Link可以通过js操作dom插入link标签改变样式，@import不能2，描述块级元素与行内元素
【coderwhy前端笔记 - 阶段一 HTML+CSS】（二） CSS hippyoo 前端学习笔记 css 前端
CSS1字体1.1font-size大小1.2font-family字体1.3font-weight字体粗细1.4font-style字体样式效果1.5font-variant影响小写字母的显示形式1.6line-height一行文本占据的高度1.7font是一个缩写属性1.8webfont网络字体1.9字体图标2文本2.1text-decoration装饰线2.2text-transform文字
HTML/CSS/JS 基本语法肆呀知识点 css html javascript jquery ajax
前端一、HTNL1、文件结构2、文本标签（1）块元素：div（2）行内元素：span（3）格式标签3、图片、音频、视频（1）图片（2）音频（3）视频4、超链接、表单（1）超链接a（2）表单form5、列表、表格（1）列表（2）表格6、语义标签、特殊符号（1）语义标签（2）特殊符号二、CSS1、样式定义方式2、选择器3、颜色、透明度4、长度单位、文本、字体5、背景6、边框7、元素展示格式（1）dis
html5中text-align,text-align 浩彬老撕
text-align版本：CSS1/3媒体：视觉text-align属性在CSS文本中是比较常用的，本文将带你深入理解text-align属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上text-align的实例，希望能够对你有所帮助。text-align定义和用法text-align：startend|match-parent|start|end|left|right|cente
使用css制作一个梯形和三角形 CQXXTXX css html css3
之前初学css时从一位大佬哪儿了解到的一个挺有趣的功能功能用到了transparent属性transparent属性用来指定全透明色彩transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。梯形代码如下：Title.box{border-to
Nginx负载均衡 510888780 nginx 应用服务器
Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight 指定轮询几率，weight和访问比率成正比
RedHat 6.4 安装 rabbitmq bylijinnan erlang rabbitmq redhat
在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类 eksliang FilenameUtils common-io
转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
xml文件解析SAX 不懂事的小屁孩 xml
xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区，此处是按日分区酷的飞上天空 mysql
使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
如何搭建数据湖架构？听听专家的意见蓝儿唯美架构
Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入 a-john spring
控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法 aijuans xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
OOA:Object-Oriented Analysis（面向对象分析方法）是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
浅谈java转成json编码格式技术百合不是茶 json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言在java中需要引入json相关的包,引包方式在工程的lib下就可以了 JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 java web.xml SSI spring配置
指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
Installing SonarQube（Fail to download libraries from server） sunjing Install Sonar
1. Download and unzip the SonarQube distribution 2. Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
一、创建复本集假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染白糖_ Flash
今天介绍Anychart的Flash和HTML5渲染功能 HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析问题：有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引 lunce
import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术 comsci it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询 daizj oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个：（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件游其是你 FilenameFilter
这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
# include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”，将baseurl的注释取消， mirrorlist注释掉。即可。 &n
单例模式 shuizhaosi888 单例模式
单例模式懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
Spring Security（09）——Filter 234390216 Spring Security
Filter 目录 1.1 Filter顺序 1.2 添加Filter到FilterChain 1.3 DelegatingFilterProxy 1.4 FilterChainProxy 1.5
公司项目NODEJS实践0.1 逐行分析JS源代码 mongodb nginx ubuntu nodejs
一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nod
java.lang.Math liuhaibo_ljf java Math lang
System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
linux下时间同步 nonobaba ntp
今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署 roadrunners zookeeper 集群部署
ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 1、准备工作我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。数据存储目录
Java高效读取大文件 tomcat_oracle java
　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法 xu3508620 xml map 微信api
举例如下： <xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他