文章目录
颜色取值
选择器进阶
复合选择器
并集选择器(union selector)
交集选择器(intersection selector)
emmet语法
hover伪类选择器
背景相关
背景颜色
背景图片
背景平铺
图片位置
背景相关连写
img标签与背景图片的区别
元素显示模式
居中方法总结
CSS三大特性
权重叠加计算
盒子模型
border 相关属性
padding
盒子实际大小计算公式
新浪导航案例
CSS3盒模型(自动内减)——怪异盒模型
margin
清除内外边距
外边距的折叠现象
行内元素的margin和padding无效情况
颜色取值
属性名
文字颜色:color
背景颜色:background-color
属性值
关键词
rgb表示法
红绿蓝三原色。每项取值范围:0-255
rgb(0,0,0)、rgb(255,255,255)
rgba表示法
红绿蓝三原色+a表示透明度,取值范围是0-1(0表示完全透明,1表示完全不透明)
rgb(255,255,255,0.5) 简写rgb(255,255,255,.5)
十六进制表示法
#开头,将数字转换成十六进制表示
#000000、#ff0000 简写#000、#f00
选择器进阶
复合选择器
后代选择器:空格
具体的说:后代选择器用于选择某个元素的所有后代元素(包括直接子元素和非直接子元素)。后代选择器使用空格(
)来分隔祖先元素和后代元素。例如:
div p {
color : red;
}
在这个例子中,所有元素内部的
元素,无论是直接还是间接子元素,都将应用红色字体。
子代选择器
具体的说:子代选择器只能选择某个元素的直接子元素。子代选择器使用大于号(>
)来分隔父元素和子元素。例如:
div > p {
color : blue;
}
在这个例子中,只有元素的直接子元素
才会应用蓝色字体,而
的间接子元素(即
嵌套在其他元素内部的情况)将不会受到影响。
总结一下:
后代选择器(descendant selector)是用空格(
)分隔的,它选择指定元素的所有后代元素。
子代选择器(child selector)是用大于号(>
)分隔的,它仅选择指定元素的直接子元素。
并集选择器(union selector)
作用:选择页面中同时满足 多个选择器的标签
选择器语法:选择器1,选择器2 { css }
结果:
(既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
注意点:
交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面
h1, h2, p {
color: green;
}
在这个例子中,我们选择了
、
和
元素,并将它们的字体颜色设置为绿色。并集选择器实际上表示“或”的关系,即选择器 A 或选择器 B 或选择器 C,等等。
交集选择器(intersection selector)
作用:选中页面中 同时满足 多个选择器的标
选择器语法:选择器1选择器2 { css }
结果:
(既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
注意点:
交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面
具体的说:
交集选择器用于选择同时满足多个条件的元素。交集选择器通过将多个选择器紧密相连而不使用空格或其他符号来实现。例如:
p.highlight {
color: orange;
}
在这个例子中,我们选择了同时具有
标签和highlight
类的元素,并将它们的字体颜色设置为橙色。交集选择器实际上表示“且”的关系,即选择器 A 且选择器 B。
emmet语法
作用:通过简写语法,快速生成代码
标签名:直接输入标签名,如 div
、p
、ul
等。
类选择器:使用.
表示类名。例如,.container
会生成
。
ID 选择器:使用#
表示 ID。例如,#header
会生成
。
交集选择器:将标签名、类名和/或 ID 选择器紧密相连。例如,p.highlight
会生成
。
子代选择器:使用>
表示父子关系。例如,div>p
会生成:
内部文本:使用{}
包裹文本。例如,p{Hello, world!}
会生成 Hello, world!
。
创建多个标签:使用*
表示重复次数。例如,li*3
会生成:
hover伪类选择器
:hover
伪类选择器是 CSS 中一种常用的伪类选择器,它用于选择鼠标悬停在元素上时的元素样式 。当用户将鼠标悬停在元素上时,:hover
选择器会应用指定的样式,当鼠标离开时,样式恢复为原始状态。:hover
伪类选择器常用于为链接、按钮和其他交互元素添加悬停效果。
以下是一个简单的使用 :hover
伪类选择器的例子:
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
在这个例子中,我们为所有的
元素定义了默认样式(蓝色文本,无下划线)。当用户将鼠标悬停在
元素上时,文本颜色会变为红色,并显示下划线。当鼠标离开时,样式将恢复为原始状态。
:hover
伪类选择器不仅可以应用于
元素,还可以应用于任何其他 HTML 元素,如 、
或
等。
背景相关
背景颜色
属性名:background-color(bgc)
属性值:
颜色取值:关键字、rgb表示法、rgba表示法、十六进制…
注意点:
背景颜色默认值是透明: rgba(0,0,0,0),transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
div {
background-color: rgba(255, 153, 0, 0.5); /* 半透明橙色 */
}
背景图片
属性名:background-image(bgi)
注意点:
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
div {
background-image : url ( "example.jpg" ) ;
}
背景平铺
background-repeat
属性用于控制背景图片的平铺方式。可选值有:
repeat
:默认值,水平和垂直方向都平铺。
repeat-x
:仅在水平方向平铺。
repeat-y
:仅在垂直方向平铺。
no-repeat
:不平铺。
div {
background-image: url("example.jpg");
background-repeat: no-repeat;
}
图片位置
background-position(bgp)
background-position
属性可以让您更精确地控制背景图片的位置。例如,如果您希望将图片定位在元素的右上角,可以使用以下设置:
div {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-position: right top;
}
此外,background-position
属性还支持使用两个关键字(如 left 20px top 10px
)或两个百分比值(如 25% 75%
)来设置背景图片的位置。
方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直
背景相关连写
书写顺序:
推荐:background:color image repeat position
省略问题:
可以按照需求省略
特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background:url()
例如,创建一个具有半透明颜色、线性渐变背景、不重复显示且位于右上角的背景样式:
div {
background: rgba(255, 153, 0, 0.5) linear-gradient(to bottom right, red, yellow, green) no-repeat right top;
}
img标签与背景图片的区别
这两者之间的主要区别在于用途和样式控制:
用途:
标签:用于插入内容图片,即图片作为网页内容的一部分,具有实际意义。
背景图片:用于设置页面的装饰和设计元素,作为页面布局和样式的一部分,不具有实际意义。
样式控制:
标签:可以通过 HTML 和 CSS 控制其尺寸、位置和其他样式,但某些特性(如裁剪、平铺等)可能需要额外的方法。
背景图片:通过 CSS 设置,提供了更丰富的控制和样式选项(如位置、平铺方式、大小等),更易于实现设计效果。
总之,根据图片的实际用途,可以选择使用
标签或背景图片。如果图片是页面内容的一部分,具有实际意义,建议使用
标签;如果图片仅作为页面的装饰元素,可以使用背景图片。
元素显示模式
块级元素
属性值:display: block
块级元素在页面上独占一行,宽度默认填充其父容器,高度由内容决定。常见的块级元素有:、
~
、
、
、
等。块级元素具有以下特点:
自动换行,每个块级元素占据新的一行。
默认宽度为父容器的100%。
可以设置宽度和高度。
可以应用外边距(margin)和内边距(padding)。
行内元素
属性:display:inline
行内元素不会独占一行,宽度和高度由内容决定。常见的行内元素有:
、
、
、
等。行内元素具有以下特点:
不换行,多个行内元素在同一行显示,直到排列空间不足时自动换行。
不能设置宽度和高度,宽度和高度由内容撑开。
上下外边距(margin)不生效,左右外边距生效。
上下内边距(padding)不会影响其他元素的位置。
行内块元素
属性:display:inline-block
行内块元素是块级元素和行内元素的结合体。它可以在同一行内显示,同时保留块级元素的特性(如设置宽度和高度)。常见的行内块元素有:
、
、input
、textarea
等。行内块元素具有以下特点:
不换行,多个行内块元素在同一行显示,直到排列空间不足时自动换行。
可以设置宽度和高度。
可以应用外边距(margin)和内边距(padding)。
元素显示模式转换
在CSS中,可以通过display
属性来改变元素的显示模式。这使得我们可以根据需要调整元素的布局和样式表现。
将行内元素(inline)转换为块级元素(block):
span {
display: block;
}
这会使
元素具有块级元素的特性,如独占一行,可以设置宽度和高度等。
将块级元素(block)转换为行内元素(inline):
div {
display: inline;
}
这会使元素具有行内元素的特性,如不换行,宽度和高度由内容决定等。
将行内元素(inline)或块级元素(block)转换为行内块元素(inline-block):
span {
display : inline-block;
}
这会使
元素具有行内块元素的特性,如不换行,可以设置宽度和高度等。
居中方法总结
文本居中(水平居中):适用于文本元素(如
、
至
、
等)及文本容器(如、
等)。
.text-center {
text-align: center;
}
块级元素水平居中(使用外边距):适用于块级元素(如、
、
等)。
.block-center {
margin-left: auto;
margin-right: auto;
}
行内元素和行内块元素水平居中(使用文本对齐):适用于行内元素(如
、
、
等)和行内块元素(如
)。
.parent {
text-align: center;
}
使用Flexbox布局实现水平和垂直居中:适用于任何类型的子元素,例如、
、
等。需要注意的是,要将
display: flex;
应用于父元素,而不是需要居中的子元素。
.flex-center {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
使用Grid布局实现水平和垂直居中:适用于任何类型的子元素,例如、
、
等。需要注意的是,要将
display: grid;
应用于父元素,而不是需要居中的子元素。
.grid-center {
display: grid;
place-items: center; /* 水平和垂直居中 */
}
使用绝对定位和transform实现水平和垂直居中:适用于任何类型的元素,例如、
、
等。需要注意的是,要将
position: relative;
应用于父元素,而将
position: absolute;
和
transform: translate(-50%, -50%);
应用于需要居中的子元素。
.relative-parent {
position: relative;
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS三大特性
继承性: 继承性是指子元素可以继承父元素的某些样式属性。这种特性可以减少代码的冗余,使得样式表更加简洁。但并非所有CSS属性都具有继承性,例如border
、margin
和padding
等。具有继承性的属性主要包括文本相关的属性,如font-family
、color
、font-size
等。
层叠性: 层叠性是指当多个CSS样式规则应用于同一个元素时,它们会按照一定的优先级进行叠加,最终生成一个综合样式。层叠性可以让我们更灵活地定义和组合样式规则。CSS中的“层叠”一词源于英文"Cascading",因此称为“层叠样式表”。
优先级: 优先级是指在CSS中,不同的选择器和样式规则具有不同的权重。当一个元素同时受到多个规则的影响时,优先级较高的规则会覆盖优先级较低的规则。优先级主要由以下因素决定:
内联样式(在HTML元素上使用style
属性)优先级最高。
选择器权重:ID选择器(如#id
) > 类选择器(如.class
)、属性选择器(如[type="text"]
)和伪类(如:hover
) > 标签选择器(如div
)和伪元素(如::before
)。
当权重相同时,后声明的样式会覆盖先声明的样式。
使用!important
声明的样式具有最高优先级,但应谨慎使用,以免导致维护困难。
继承失败的特殊情况:
优先级高的特定样式:当为一个元素设置了具有更高优先级的特定样式时,该样式将覆盖继承而来的样式。例如,如果为一个子元素显式设置了color
属性,那么该元素将使用指定的颜色,而不是从父元素继承的颜色。
不可继承的属性:并非所有CSS属性都具有继承性。例如,margin
、padding
、background
、border
等属性不会被子元素继承。对于这些属性,如果需要应用相同的样式,需要显式地为相应的子元素设置样式。
初始值和继承:对于某些属性,如果没有显式设置值,则会使用默认的初始值,而不是继承父元素的值。例如,border
属性的初始值是none
。因此,如果没有为一个元素设置border
属性,它将不会显示任何边框,即使其父元素有边框。
表单元素:某些表单元素(如
、
和
)可能不会按照预期继承样式。这是因为这些元素的渲染受到操作系统和浏览器的影响。为了确保这些元素的样式与其他页面元素保持一致,需要显式地为它们设置样式。
伪元素:伪元素(如::before
和::after
)不会继承大部分父元素的样式。需要为伪元素单独设置样式,以实现预期的效果。
权重叠加计算
CSS权重叠加计算是用于确定哪些样式规则应用于特定的HTML元素的方法。当多个CSS规则与同一个元素匹配时,权重叠加计算用于解决这些规则之间的冲突。CSS权重叠加遵循以下规则:
重要性(!important):标记为!important的声明具有更高的优先级。如果一个声明被标记为!important,它将优先于其他未标记的声明。
选择器的特异性:特异性是一个表示选择器优先级的四元组(a, b, c, d),其中:
a: 内联样式的数量
b: ID选择器的数量
c: 类选择器、属性选择器和伪类的数量
d: 元素选择器和伪元素的数量 选择器的特异性按以下顺序进行比较:a > b > c > d。值较高的选择器具有更高的优先级。
源代码中的顺序:如果两个规则的重要性和特异性相同,那么在源代码中后出现的规则具有更高的优先级。
/* 特异性 (0, 1, 0, 0) */
#myid {
color: green;
}
/* 特异性 (0, 0, 1, 0) */
.class1 {
color: blue !important;
}
/* 特异性 (0, 0, 1, 0) */
.class2 {
color: red;
}
如果一个HTML元素同时具有myid、class1和class2的ID和类属性,那么权重叠加计算将按以下顺序应用样式规则:
.class1
的!important声明(最高优先级)
#myid
的ID选择器(特异性较高)
.class2
的类选择器(较低优先级)
因此,最终该元素的颜色将是蓝色。
当CSS权重叠加(即优先级)完全相同时,浏览器会根据源代码中规则的顺序来决定显示哪个样式。在源代码中后出现的规则将具有更高的优先级,因此会覆盖之前的规则。
盒子模型
盒子模型(Box Model)是CSS布局的基本概念,它描述了元素在页面上如何布局和渲染。在CSS中,每个元素都被视为一个矩形盒子,这个盒子由以下四个部分组成:
内容(Content) :这是元素的实际内容,如文本、图片等。内容区域的尺寸可以通过width
和height
属性来设置。
内边距(Padding) :这是内容区域周围的空白区域,位于内容和边框之间。内边距是透明的,可以通过padding
属性(或其相关属性padding-top
、padding-right
、padding-bottom
、padding-left
)来设置。
边框(Border) :这是围绕内边距和内容的线条,可以设置其样式、宽度和颜色。边框的样式可以通过border
属性(或其相关属性border-width
、border-style
、border-color
)来设置。
外边距(Margin) :这是元素盒子外部的空白区域,用于与其他元素之间保持距离。外边距是透明的,可以通过margin
属性(或其相关属性margin-top
、margin-right
、margin-bottom
、margin-left
)来设置。
总的来说,盒子模型定义了一个元素在页面上所占用的空间,包括内容、内边距、边框和外边距。了解盒子模型对于实现精确的布局和对齐是至关重要的。需要注意的是,有两种盒子模型计算方法:
标准盒子模型(box-sizing: content-box
):元素的width
和height
仅包括 内容区域 ,不包括内边距、边框和外边距。
怪异盒子模型(box-sizing: border-box
):元素的width
和height
包括内容区域、内边距和边框,但不包括外边距。
在实际应用中,box-sizing: border-box
更为常用,因为它使得布局和尺寸计算更加直观。要设置所有元素的盒子模型为border-box
,可以使用以下全局CSS规则:
* {
box-sizing: border-box;
}
border 相关属性
border
属性在CSS中用于设置元素的边框。边框位于元素的内容和内边距之外,可以设置其样式、宽度和颜色。以下是与border
相关的一些属性及其用法:
**border-width
:**用于设置边框的宽度。可以为一个值(如1px
)、两个值(例如2px 4px
,分别表示上下边框和左右边框的宽度)、三个值(例如2px 4px 6px
,分别表示上边框、左右边框和下边框的宽度)或四个值(例如1px 2px 3px 4px
,分别表示上、右、下、左边框的宽度)。
**border-style
:**用于设置边框的样式。可选值包括:none
(无边框)、solid
(实线边框)、dotted
(点状边框)、dashed
(虚线边框)、double
(双线边框)、groove
(凹槽边框)、ridge
(脊状边框)、inset
(内嵌边框)和outset
(外凸边框)。与border-width
类似,你可以设置一个值(应用于四个边)、两个值(上下边框和左右边框)、三个值(上边框、左右边框和下边框)或四个值(上、右、下、左边框)。
**border-color
:**用于设置边框的颜色。可以使用颜色名称(如red
)、十六进制(如#FF0000
)、RGB(如rgb(255, 0, 0)
)或HSL(如hsl(0, 100%, 50%)
)等表示法。与border-width
和border-style
类似,你可以设置一个值(应用于四个边)、两个值(上下边框和左右边框)、三个值(上边框、左右边框和下边框)或四个值(上、右、下、左边框)。
border
:这是一个简写属性,用于同时设置border-width
、border-style
和border-color
。这个属性的值按以下顺序书写:宽度、样式、颜色。
分别设置每个边框:你还可以使用border-top
、border-right
、border-bottom
和border-left
属性分别设置每个边框的宽度、样式和颜色。这些属性也是简写属性,它们的值顺序为:宽度、样式、颜色。
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double purple;
此外,你还可以使用以下属性来分别设置每个边框的宽度、样式和颜色:
border-top-width
、border-right-width
、border-bottom-width
和border-left-width
border-top-style
、border-right-style
、border-bottom-style
和border-left-style
border-top-color
、border-right-color
、border-bottom-color
和border-left-color
padding
padding
是CSS中的一个属性,它用于设置元素内边距,即元素内容与边框之间的空白区域。padding
可以为元素提供一定的空间,使得内容与边框、其他元素之间保持一定的距离。
设置单个方向的内边距 :可以分别设置元素四个方向(上、右、下、左)的内边距,使用以下属性:
padding-top
: 设置元素上方的内边距
padding-right
: 设置元素右侧的内边距
padding-bottom
: 设置元素下方的内边距
padding-left
: 设置元素左侧的内边距
使用简写属性 :padding
属性是一个简写属性,可以一次性设置元素所有方向的内边距。有以下几种用法:
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 15px 25px;
内边距不会影响元素之间的距离,而是用于控制元素内部的空间 。注意,当使用标准盒子模型(box-sizing: content-box
)时,内边距会增加元素的总尺寸。而使用怪异盒子模型(box-sizing: border-box
)时,内边距不会影响元素的总尺寸。
盒子实际大小计算公式
标准盒子模型(box-sizing: content-box
):在这种盒子模型中,元素的实际大小由内容区域、内边距(padding)和边框(border)共同决定。外边距(margin)不包括在内,因为它不影响元素本身的尺寸,而是影响元素与其他元素之间的距离。
计算公式如下:
新浪导航案例
Ø 布局顺序: 1. 从外往内,从上往下
Ø 每一个盒子的样式:
宽高
辅助的背景颜色
盒子模型的部分:border、padding、margin
其他样式:color、font-、text-、……
DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Documenttitle >
< style>
* {
margin : 0;
padding : 0;
}
.box {
height : 40px;
border-top : 3px solid #ff8500;
border-bottom : 1px solid #edeef0;
}
.box a {
display : inline-block;
height : 40px;
padding : 0 20px;
color : #4c4c4c;
text-decoration : none;
text-align : center;
line-height : 40px;
font-size : 12px;
}
.box a:hover {
background-color : #edeef0;
color : #ff8400;
}
style >
head >
< body>
< div class = " box" >
< a href = " #" > 新浪导航a > < a href = " #" > 新浪导航新浪导航a > < a href = " #" > 新浪导航a > < a href = " #" > 新浪导航a >
div >
body >
html >
CSS3盒模型(自动内减)——怪异盒模型
CSS3盒模型中的box-sizing
属性用于控制盒子的计算方式。默认的盒模型是content-box
,也就是标准盒模型。在这个模型下,**元素的宽度和高度只包括内容区域,而内边距(padding)和边框(border)会叠加到元素的总尺寸上。**这可能会导致布局问题,尤其是当你需要设置固定宽度或高度的容器时。
为了解决这个问题,CSS3引入了另一种盒模型:**border-box
,即怪异盒模型或自动内减盒模型。**在这个模型下,元素的宽度和高度包括内容区域、内边距(padding)和边框(border)。当你增加内边距或边框时,内容区域的大小会自动调整以适应设定的宽度和高度,而元素的总尺寸保持不变。
margin
margin
是 CSS 中用于设置元素的外边距的属性。外边距是元素与相邻元素之间的空白区域,用于控制元素之间的间距。margin
可以为元素提供一定的间距,使得页面布局更加美观和整洁。
设置单个方向的外边距 :可以分别设置元素四个方向(上、右、下、左)的外边距,使用以下属性:
margin-top
: 设置元素上方的外边距
margin-right
: 设置元素右侧的外边距
margin-bottom
: 设置元素下方的外边距
margin-left
: 设置元素左侧的外边距
简写属性和border padding一样
外边距合并 :当两个垂直相邻的元素的上下外边距相遇时,它们会合并为一个外边距,这个外边距的大小是两者中较大的那个。这被称为外边距合并(margin collapsing)。需要注意的是,外边距合并仅在垂直方向上发生,水平方向上的外边距不会合并。
使用外边距实现居中 :如果要将一个块级元素在水平方向上居中,可以使用 margin: 0 auto;
。这将左右外边距设置为自动(auto),浏览器会自动计算左右外边距以使元素居中。需要注意的是,这种方法只适用于具有明确宽度的块级元素。示例如下:
.centered {
width: 50%;
margin: 0 auto;
}
清除内外边距
两种方法:
通配符选择器 :使用通配符选择器 *
可以选取所有元素,并将它们的内边距(padding
)和外边距(margin
)设置为 0。
* {
margin : 0;
padding : 0;
}
如下图:
外边距的折叠现象
外边距折叠(Margin collapsing)是 CSS 中一个特殊的现象,**当两个垂直相邻的元素的外边距接触时,它们会合并为一个外边距。**这个合并后的外边距的大小是两者中较大的那个外边距。需要注意的是,外边距折叠仅发生在垂直方向(上下)上,水平方向(左右)上的外边距不会折叠。
以下是一些外边距折叠的典型情况:
相邻兄弟元素 :当两个兄弟元素垂直排列时,它们之间的外边距会发生折叠。例如,一个元素的下外边距与其下方相邻兄弟元素的上外边距接触时,这两个外边距会折叠。
父子元素 :当一个元素的上外边距与其父元素的上外边距接触时(例如,父元素没有上边框、上内边距和其他内容),这两个外边距会折叠。类似地,当一个元素的下外边距与其父元素的下外边距接触时(例如,父元素没有下边框、下内边距和其他内容),这两个外边距也会折叠。
空块级元素 :如果一个块级元素没有内容、内边距和边框,那么它的上外边距和下外边距会发生折叠。
外边距折叠是 CSS 中的一种预期行为,通常不会对布局造成问题。然而,在某些情况下,如果不希望外边距折叠,可以采取以下方法:
添加内边距或边框 :给父元素添加一个非零的内边距或边框可以防止父子元素之间的外边距折叠。
使用浮动或绝对定位 :浮动元素(float: left
或 float: right
)和绝对定位元素(position: absolute
)的外边距不会发生折叠。
添加透明边框 :如果不想更改布局,可以给元素添加一个透明的边框来防止外边距折叠。
了解外边距折叠现象及其规则对于掌握 CSS 布局和间距控制非常重要。
行内元素的margin和padding无效情况
对于行内元素,垂直方向的 margin
和 padding
不会影响元素周围的其他行内元素的位置。尽管垂直方向的 margin
和 padding
可能会影响元素本身的背景和边框的大小,但它们不会导致周围的行内元素向上或向下移动,也不会影响行高。
这是因为行内元素的布局遵循特定的规则,它们是基于基线(baseline)对齐的。行内元素的上下外边距和内边距不会影响基线的位置,从而导致它们在垂直方向上的影响有限。
如果你需要在行内元素上使用垂直方向的 margin
和 padding
,可以将其 display
属性更改为 inline-block
。inline-block
元素在水平方向上像行内元素一样排列,但在垂直方向上表现为块级元素。因此,将元素的 display
属性设置为 inline-block
可以使垂直方向的 margin
和 padding
生效。
解释说明:
预期行为
“预期行为” 是指外边距折叠(Margin collapsing)是 CSS 设计者故意加入的特性,而不是一个错误或意外行为。换句话说,CSS 的开发者已经考虑到了这种情况,并且认为它是一个有用的特性。
因此,当我们说外边距折叠是 CSS 中的一种预期行为时,意味着这种行为是符合 CSS 规范的,并在开发者设计和实现 CSS 时就已经预见到了这种现象。所以,当你在使用 CSS 布局时遇到外边距折叠现象,你应该知道这是一种正常且符合设计目的的现象,而不是一个错误。
你可能感兴趣的:(web前端浅学,css,css3,html)
ubuntu 16(7)
2401_84715880
单元测试 功能测试 学习
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以戳这里获取一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!conf:存放配置文件html:静态网页logs:存
使用transform对html的video播放器窗口放大
宣晨光
前端整理 html video缩放 transform
核心是使用播放容器$('video').css({'transform':'scale(2)','transform-origin':'centertop'});其中scale表示放大倍数,可以是小数transform-origin表示位置,1)可以使用坐标点如'120px200px'2)或者使用方位坐标,leftrighttopbottom总共九个,如左上方'lefttop'上方‘topcent
RapidJson递归去除空值元素Value
Cloudox_
RapidJson是一款高效的C++处理JSON字符串的库。教程:http://rapidjson.org/zh-cn/md_doc_tutorial_8zh-cn.html#QueryObject源码:https://github.com/Tencent/rapidjson但不得不说教程写的不太全,网上资料也很少,大都重复教程的范畴。项目中有个蛋疼的需求要把JSON字符串中值为空的键值对去掉,C
element-ui layout布局 铺满整个空间方法
遇事不决AI解决
ui css3 css vue.js javascript
h5布局文件上传css样式有些朋友用height:100%并不能铺满,这个时候可以使用height:100vh即可铺满html,body,.el-container{/*设置内部填充为0,几个布局元素之间没有间距*/padding:0px!important;/*外部间距也是如此设置*/margin:0px!important;/*统一设置高度为100%*/height:100vh;}有任何问题都
vue 搜索关键字,关键字标红
Feng、锋
vue js javascript vue.js html
vue使用v-htmlthis.voice_result.map(e=>{if(this.red_text){//匹配关键字正则letreplaceReg=newRegExp(this.red_text,'g');//高亮替换v-html值letreplaceString=''+this.red_text+'';//开始替换e.info=e.info.replace(replaceReg,repl
用python的NiceGUI库 实现webApp___官网文档熟悉
错误重复学习记录
web app
官网文档文本元素ui.label、、ui.markdown和ui.restructured_text等元素ui.html可用于显示文本和其他内容。TextElementsLabel、Link、ChatMessage、GenericElement、MarkdownElement、ReStructuredText、MermaidDiagrams、HTMLElement控制NiceGUI提供了多种用于用
HTML、CSS实现树状图
凉风听雪
CSS炫酷使用 html css 前端
效果图:源码:(未做移动端自适应)Document海关数据海关数据类型海关申报数据贸易提单数据进口数据出口数据过境数据海运数据空运数据搜索方式产品hs编码小语种查询进口商出口商提单号口岸时间国别数据查询提关单记录买家实时监控同行实时监控出口全球分析进口商分析出口商分析产品分析供应国分析进口国分析开发工具公司概况联系邮箱领英联系WhatsApp进出口详情分析展会记录LBS地理信息B2B店铺社媒动态社
HTML常用特殊字符列表
前端无冕之王
前端 css java
以下是更详细的HTML常用特殊字符列表,分为常见符号、货币符号、数学符号和其他符号,涵盖了它们的字符实体名称及对应的编号:常见符号符号描述实体名称实体编号&和号&&大于号>>"双引号""'单引号''©版权符号©©®注册商标符号®®™商标符号™™§段落符号§
正则表达式-运算符优先级
一只小棉花
正则表达式 正则表达式-优先级
转自:http://www.runoob.com/regexp/regexp-operator.html
ray.tune文档总结
AI大司马
python 人工智能 深度学习
ray.tune文档总结tune.runconfig指定超参数的搜索方法ConcurrencyLimiter搜索算法scheduler试验调度程序分析资源(并行、GPU、分布式)原文档请看这里https://docs.ray.io/en/latest/tune/key-concepts.htmltune.run执行超参数调整、用于管理实验,例如日志检查、提前停止tune.run(trainable
java中IO流详解
一路向上的桃子
学习资料 java
java中IO流详解转载:https://www.cnblogs.com/biehongli/p/6074713.html
ECS
a19576
https://www.jianshu.com/p/d9a3093bd151https://blog.csdn.net/mzl87/article/details/89462311https://www.jianshu.com/p/1617d6948ee8http://www.voidcn.com/article/p-udretuox-bsw.htmlhttps://www.e-learn.cn/
每日CSS一道题day01
[代码的搬运工]
html 布局 css html 前端 css
内容:什么是双飞翼布局以及如何书写?原理:左右固定宽高,利用定位、负定位距离,实现中间的宽度自适应代码演示:HTML:头部中左右头部这里引入头部和尾部是为了突出如何在具体内容插入一个双飞翼布局CSS:/*去除浏览器默认样式*/*{margin:0;padding:0;}.header,.footer{height:200px;width:100%;background-color:aqua;}/*
CSS具有哪些特点呢?
weixin_54503231
css 前端
CSS是CascadingStyleSheets(层叠样式表)的缩写,它是一种用来描述HTML或XML(包括如SVG、MathML等衍生技术)文档样式的计算机语言。CSS的主要目的是为网页提供样式设计,包括颜色、字体、布局等,通过CSS,可以控制网页元素的外观和排版,使得网页更加美观和易于阅读。CSS的特点简单易学:CSS语言短小精悍,语法简单易学,使用起来很方便,可以快速地修改样式。内容与样式分
Vue中使用pdfJs预览PDF、图片
viceen
vue3+ts-运维 vue项目-运维 vue.js html html5
Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能。实现步骤如下:1.下载pdfJs到本地(官网下载地址),放到项目根目录下的静态资源目录static文件夹内,将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是:file参数中默认只允许传简单路径比如:http://www
python使用rocketmq发送消息_阿里云消息队列RocketMQ使用示例
weixin_39953481
本文代码示例参见:https://gitee.com/imlichao/RocketMQ-exampleApacheRocketMQ文档:http://rocketmq.apache.org/docs/quick-start/阿里云RocketMQ文档:https://help.aliyun.com/product/29530.html简介消息队列RocketMQ是阿里巴巴集团自主研发的专业消息中
HTML与CSS网页制作指南
vvvae1234
html
在当今数字化的时代,网页已成为信息传递和展示的主要方式。无论是个人博客、企业官网还是在线商店,网页设计都扮演着至关重要的角色。掌握HTML(超文本标记语言)和CSS(层叠样式表)是制作网页的基础。本指南旨在帮助初学者学习如何使用HTML和CSS创建简单而美观的网页,通过实际操作案例提升学习的趣味性。2.HTML与CSS简介2.1什么是HTMLHTML(HyperTextMarkupLanguage
SpringMVC架构介绍
丹_妮
spring
MVC框架要做的事情?1)将url映射到java类或java类的方法2)封装用户提交的数据3)处理请求-调用相关的业务处理-封装响应数据4)将响应的数据进行渲染jsphtml为什么要学习SpringMVC?性能较struts2好简单、便捷、易学天生和Spring无缝集成,使用Spring的IOC和AOP还有事务使用约定由于配置能够进行简单的junit测试支持restful风格异常处理本地化、国际化
css之雪碧图(精灵图)
星月心城
css css 前端
听到雪碧图是不是跟我一样,啥?雪碧图?不知所以。如果一张大图由许多小图构成,那么每张小图都需要进行网络请求,这样一来就会有很多请求,为了减少网络请求,雪碧图就出现了。雪碧图(Sprite)是一种在Web开发中常用的图像合并技术,将多个小图标或图片合并成一张大图,然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量,提高网页加载速度。以下是本人自己写的例子,大图的图片是在百度找的http
Html 标签marquee 去除点击时候的黑色边框
XUE_雪
css javascript html 前端
项目中使用marquee标签制作走马灯效果的信息公告,遇到一个尴尬的问题,点击走马灯会出现黑色边框并且点击文字会出现鼠标闪烁现象,网上搜索半天也没找到有效解决方案,特此记录一下针对这一问题做出的解决修改方案。HTML: {{message?message:'暂无通知信息!'}}CSS:.marquee,.marquee:active,.marquee:visited{outline:n
《响应式 Web 设计:纯 HTML 和 CSS 的实现技巧》
陈在天box
前端 html css
一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括台式电脑、笔记本电脑、平板电脑、智能手机等。为了确保网站在不同设备上都能呈现出良好的用户体验,响应式Web设计变得至关重要。响应式Web设计是一种能够使网页根据不同设备的屏幕尺寸和分辨率自动调整布局和样式的设计方法。本文将重点介绍如何使用纯HTML和CSS实现响应式Web设计的技巧。二、响应式Web设计的基本原则移动优先在设计响应式网
elementui Cascader 级联选择器的使用总结
XUE_雪
elementui 前端 javascript
实现效果技术要点总结如下:1、点击添加自动增加多行,实现自主选择增加多条节点数据2、节点地址使用的是Cascader级联选择器,需要动态生成,涉及到一个技术要点是:因v-modal只能获取value不能获取label,故需要解决在多个动态生成的Cascader分别获取他们选中的label和value,下面开始展示相关代码:html:添加删除确定取消js:handleChange(index){va
CSS样式的引用方式以及选择器使用
爱掉发的小龙
css 前端 开发语言 java 后端 小程序 笔记
1.CSS引用方式CSS可以通过三种方式引用到HTML文件中:行内样式(InlineStyles):直接在HTML元素中定义样式。内部样式表(InternalCSS):在HTML文档的部分使用标签定义样式。外部样式表(ExternalCSS):将样式写在单独的.css文件中,并通过标签进行引用。示例:CSS示例body{background-color:#f0f0f0;font-family:Ar
Vue项目结构
永远的12
vue.js 前端 javascript css html
Vue项目的结构可以比较灵活,但通常情况下会包含以下几个部分:public目录:这个目录包含项目的静态资源文件,例如index.html,图片等。src目录:这个目录包含项目的源代码。src/main.js:这个文件是项目的入口文件,用于初始化Vue应用。src/router目录:这个目录包含项目的路由配置文件。src/components目录:这个目录包含项目的组件文件。src/assets目录
随笔记录git提交出错和原生js以JSON格式请求接口导出Excel
山丘lemon
GIT提交代码出错Fileexists.原文链接https://www.cnblogs.com/sweetbullet/p/9889997.html前端js导出,参数以json格式发送post请求原文链接https://www.cnblogs.com/sweetbullet/p/9843178.html
端午作业
关若飞
效果html代码Polo360首页HOMEBacktohomePRODUCTSWhatwehaveforyouSERVICESThingswedoBLOGFollowourupdatesCONTAVTWaystoreachusLoremipsumdolorsitamet,constecteturadipisicingslitPerfectLogicAllyouwantyourwebsitetoso
Nginx中Location匹配(官方文档解读)
宁静的猫
学习一样东西,最直观的就是学习它的官方文档,Nginx也不例外。本文要学习的是Nginx配置文件中Location的配置规则。官方文档链接:http://nginx.org/en/docs/http/ngx_http_core_module.html#locationSyntax:location[=|~|~*|^~]uri{...}location@name{...}Default:—Conte
redis 主从配置
zfl092005
redis
转自:http://www.ttlsa.com/html/3494.html市面上太多kv的缓存,最常用的就属memcache了,但是memcache存在单点问题,不过小日本有复制版本,但是使用的人比较少,redis的出现让kv内存存储的想法成为现实。今天主要内容便是redis主从实现简单的集群,实际上redis的安装配置砸门ttlsa之前就有个文章,废话少说,进入正题吧Redis简介redis是
HTML文档中折行的使用,10_h5是如何做移动端适配的?折行的时候如何实现不断行...
Mr.Zzzzzzz
HTML文档中折行的使用
一、百分比适配1、要点元素的宽度使用了百分比来定宽,根据屏幕的宽度进行自适应适合页面内容结构均匀分配,固定高度,结构不是很复杂,注意要设置viewport视口内容宽度等于设备的宽度使用百分比定宽的元素,百分比参考的是该元素最近的,定了宽度的父元素2、示例固定高度,宽度自适应,100%比做适配*{padding:0;margin:0;}body{font-size:16px;overflow:hid
修改打包后element-ui的字体文件名;JS文件名;CSS文件名
静纸~
vue.js 前端 javascript
修改这些静态文件名的原因是客户那边扫描出漏洞:字体文件名称不符合安全规则,就想办法给全部重新命名修改字体文件该方法不起作用——在vue.config.js里面配置打包时的fonts名称;其他场景下可能会适用记录一下constTimestamp=newDate().getTime();chainWebpack(config){config.module.rule("fonts").test(/\.(
java责任链模式
3213213333332132
java 责任链模式 村民告县长
责任链模式,通常就是一个请求从最低级开始往上层层的请求,当在某一层满足条件时,请求将被处理,当请求到最高层仍未满足时,则请求不会被处理。
就是一个请求在这个链条的责任范围内,会被相应的处理,如果超出链条的责任范围外,请求不会被相应的处理。
下面代码模拟这样的效果:
创建一个政府抽象类,方便所有的具体政府部门继承它。
package 责任链模式;
/**
*
linux、mysql、nginx、tomcat 性能参数优化
ronin47
一、linux 系统内核参数
/etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目
net.core.rmem_max = 8388608 #SOCKET读缓存区大小
net.core.wmem_max = 8388608 #SOCKET写缓存区大
php命令行界面
dcj3sjt126com
PHP cli
常用选项
php -v
php -i PHP安装的有关信息
php -h 访问帮助文件
php -m 列出编译到当前PHP安装的所有模块
执行一段代码
php -r 'echo "hello, world!";'
php -r 'echo "Hello, World!\n";'
php -r '$ts = filemtime("
Filter&Session
171815164
session
Filter
HttpServletRequest requ = (HttpServletRequest) req;
HttpSession session = requ.getSession();
if (session.getAttribute("admin") == null) {
PrintWriter out = res.ge
连接池与Spring,Hibernate结合
g21121
Hibernate
前几篇关于Java连接池的介绍都是基于Java应用的,而我们常用的场景是与Spring和ORM框架结合,下面就利用实例学习一下这方面的配置。
1.下载相关内容: &nb
[简单]mybatis判断数字类型
53873039oycg
mybatis
昨天同事反馈mybatis保存不了int类型的属性,一直报错,错误信息如下:
Caused by: java.lang.NumberFormatException: For input string: "null"
at sun.mis
项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space
程序员是怎么炼成的
eclipse jvm tomcat catalina.sh eclipse.ini
在启动比较大的项目时,因为存在大量的jsp页面,所以在编译的时候会生成很多的.class文件,.class文件是都会被加载到jvm的方法区中,如果要加载的class文件很多,就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.
解决办法是点击eclipse里的tomcat,在
我的crm小结
aijuans
crm
各种原因吧,crm今天才完了。主要是接触了几个新技术:
Struts2、poi、ibatis这几个都是以前的项目中用过的。
Jsf、tapestry是这次新接触的,都是界面层的框架,用起来也不难。思路和struts不太一样,传说比较简单方便。不过个人感觉还是struts用着顺手啊,当然springmvc也很顺手,不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
spring里配置使用hibernate的二级缓存几步
antonyup_2006
java spring Hibernate xml cache
.在spring的配置文件中 applicationContent.xml,hibernate部分加入
xml 代码
<prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop>
<prop key="hi
JAVA基础面试题
百合不是茶
抽象实现接口 String类 接口继承 抽象类继承实体类 自定义异常
/* * 栈(stack):主要保存基本类型(或者叫内置类型)(char、byte、short、 *int、long、 float、double、boolean)和对象的引用,数据可以共享,速度仅次于 * 寄存器(register),快于堆。堆(heap):用于存储对象。 */ &
让sqlmap文件 "继承" 起来
bijian1013
java ibatis sqlmap
多个项目中使用ibatis , 和数据库表对应的 sqlmap文件(增删改查等基本语句),dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中,其它项目工程中通过jar包来引用 ,并通过"继承"为基础的sqlmap文件,dao,pojo 添加新的方法来满足项
精通Oracle10编程SQL(13)开发触发器
bijian1013
oracle 数据库 plsql
/*
*开发触发器
*/
--得到日期是周几
select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual;
select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual;
--建立BEFORE语句触发器
CREATE O
【EhCache三】EhCache查询
bit1129
ehcache
本文介绍EhCache查询缓存中数据,EhCache提供了类似Hibernate的查询API,可以按照给定的条件进行查询。
要对EhCache进行查询,需要在ehcache.xml中设定要查询的属性
数据准备
@Before
public void setUp() {
//加载EhCache配置文件
Inpu
CXF框架入门实例
白糖_
spring Web 框架 webservice servlet
CXF是apache旗下的开源框架,由Celtix + XFire这两门经典的框架合成,是一套非常流行的web service框架。
它提供了JAX-WS的全面支持,并且可以根据实际项目的需要,采用代码优先(Code First)或者 WSDL 优先(WSDL First)来轻松地实现 Web Services 的发布和使用,同时它能与spring进行完美结合。
在apache cxf官网提供
angular.equals
boyitech
AngularJS AngularJS API AnguarJS 中文API angular.equals
angular.equals
描述:
比较两个值或者两个对象是不是 相等。还支持值的类型,正则表达式和数组的比较。 两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项:
两个值或者对象能通过=== (恒等) 的比较
两个值或者对象是同样类型,并且他们的属性都能通过angular
java-腾讯暑期实习生-输入一个数组A[1,2,...n],求输入B,使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]
bylijinnan
java
这道题的具体思路请参看 何海涛的微博:http://weibo.com/zhedahht
import java.math.BigInteger;
import java.util.Arrays;
public class CreateBFromATencent {
/**
* 题目:输入一个数组A[1,2,...n],求输入B,使得数组B中的第i个数字B[i]=A
FastDFS 的安装和配置 修订版
Chen.H
linux fastDFS 分布式文件系统
FastDFS Home:http://code.google.com/p/fastdfs/
1. 安装
http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html
安装libevent (对libevent的版本要求为1.4.
[强人工智能]拓扑扫描与自适应构造器
comsci
人工智能
当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?
那么,现在我们必须设计新的模块和代码包来处理上面的问题
oracle merge into的用法
daizj
oracle sql merget into
Oracle中merge into的使用
http://blog.csdn.net/yuzhic/article/details/1896878
http://blog.csdn.net/macle2010/article/details/5980965
该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中,使用此命令必须同时指定UPDATE 和INSE
不适合使用Hadoop的场景
datamachine
hadoop
转自:http://dev.yesky.com/296/35381296.shtml。
Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候,会听到脱口而出的回答:Hadoop! 实际上Hadoop被设计和建造出来,是用来解决一系列特定问题的。对某些问题来说,Hadoop至多算是一个不好的选择,对另一些问题来说,选择Ha
YII findAll的用法
dcj3sjt126com
yii
看文档比较糊涂,其实挺简单的:
$predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));
第一个参数是选择条件:”uid=10″。其中:uid是一个占位符,在后面的array(“:uid”=>10)对齐进行了赋值;
更完善的查询需要
vim 常用 NERDTree 快捷键
dcj3sjt126com
vim
下面给大家整理了一些vim NERDTree的常用快捷键了,这里几乎包括了所有的快捷键了,希望文章对各位会带来帮助。
切换工作台和目录
ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置
o 在已有窗口中打开文件、目录或书签,并跳
Java把目录下的文件打印出来
蕃薯耀
列出目录下的文件 文件夹下面的文件 目录下的文件
Java把目录下的文件打印出来
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年7月11日 11:02:
linux远程桌面----VNCServer与rdesktop
hanqunfeng
Desktop
windows远程桌面到linux,需要在linux上安装vncserver,并开启vnc服务,同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。
linux远程桌面到windows,需要在linux上安装rdesktop,同时开启windows的远程桌面访问。
下面分别介绍,以windo
guava中的join和split功能
jackyrong
java
guava库中,包含了很好的join和split的功能,例子如下:
1) 将LIST转换为使用字符串连接的字符串
List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
Web开发技术十年发展历程
lampcy
android Web 浏览器 html5
回顾web开发技术这十年发展历程:
Ajax
03年的时候我上六年级,那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,册,账,号。
彼时网吧用的512k的带宽,注册的时候,填了一堆信息,提交,页面跳转,嘣,”您填写的信息有误,请重填”。然后跳转回注册页面,以此循环。我现在时常想,如果当时a
架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)
nannan408
buffer
1.前言。
如题。
2.代码。
IoService
IoService是一个接口,有两种实现:IoAcceptor和IoConnector;其中IoAcceptor是针对Server端的实现,IoConnector是针对Client端的实现;IoService的职责包括:
1、监听器管理
2、IoHandler
3、IoSession
ORA-00054:resource busy and acquire with NOWAIT specified
Everyday都不同
oracle session Lock
[Oracle]
今天对一个数据量很大的表进行操作时,出现如题所示的异常。此时表明数据库的事务处于“忙”的状态,而且被lock了,所以必须先关闭占用的session。
step1,查看被lock的session:
select t2.username, t2.sid, t2.serial#, t2.logon_time
from v$locked_obj
javascript学习笔记
tntxia
JavaScript
javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number:就是数字值,包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象,不用多说function:我们熟悉的方法,也就是
Java enum的用法详解
xieke90
enum 枚举
Java中枚举实现的分析:
示例:
public static enum SEVERITY{
INFO,WARN,ERROR
}
enum很像特殊的class,实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类 (java.l