CSS2相关知识点
CSS的编写位置
CSS选择器
CSS基本选择器
复合选择器
HTML元素间的关系
交集选择器
并集选择器
后代选择器
子代选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器
颜色的表示
表示方式一:颜色名
表示方式二:rgb 或 rgba
表示方式三:HEX 或 HEXA
表示方式四:HSL 或 HSLA
CSS字体属性
字体大小
字体族
字体风格
字体粗细
文本颜色
文本间距
文本修饰
文本缩进
文本对齐_水平
行高
vertical-align
CSS列表属性
CSS表格属性
CSS背景属性
CSS鼠标属性
CSS盒子模型
CSS长度单位
元素的显示模式
各元素的显示模式
修改元素的显示模式
盒子模型的组成
盒子内容区
关于默认宽度
盒子内边距(padding)
margin注意事项
margin塌陷问题
margin合并问题
处理内容溢出
隐藏元素的方式
样式的继承
布局技巧
元素之间的空白问题
行内块的幽灵空白问题
浮动
元素浮动后会有哪些影响
解决浮动产生的影响(清除浮动)
浮动相关属性
定位
相对定位
如何设置相对定位?
相对定位的参考点在哪里?
相对定位的特点:
绝对定位
如何设置绝对定位?
绝对定位的参考点在哪里?
绝对定位元素的特点:
固定定位
如何设置为固定定位?
固定定位的参考点在哪里?
固定定位元素的特点
粘性定位
如何设置为粘性定位?
粘性定位的参考点在哪里?
粘性定位元素的特点
定位层级
定位的特殊应用
让定位元素的宽充满包含块
让定位元素在包含块中居中
布局
VSCode中的注释折叠
CSS的编写位置
样式种类
行内样式(又称内联样式)
写在 标签 的 style 属性中
语法:欢迎学习CSS
注意点: 1.style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的形式。 2.行内样式表,只能控制当前标签的样式,对其他标签无效。
内部样式
写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在 标签中。
语法:
注意点: 1. 标签理论上可以放在 HTML 文档的任何地方,但一般都放在 标签 中。 2.此种写法:样式可以复用、代码结构清晰。
外部样式
写在单独的 .css 文件中,随后在 HTML 文件中引入使用.
语法: 1.新建一个扩展名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。 h1{ color: red; font-size: 40px; }
2.在 HTML 文件中引入 .css 文件。
注意点: 1. 标签要写在 标签中。 2. 标签属性说明:
href :引入的文档来自于哪里。
rel :( relation :关系)说明引入的文档与当前文档之间的关系。
3.外部样式的优势:样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速 度 ,实现了结构与样式的完全分离。 4.实际开发中,几乎都使用外部样式,这是 最推荐的使用方式 !
样式表的优先级
内部样式、外部样式,这二者的优先级相同,且:后面的 会覆盖 前面的(简记:“后来 者居上”)。
同一个样式表中,优先级也和编写顺序有关,且:后面的 会覆盖 前面的(简记:“后来 者居上”)。
CSS选择器
CSS基本选择器
通配选择器
元素选择器
类选择器
id选择器
通配选择器
作用:可以选中所有的 HTML 元素。
语法:* { 属性名: 属性值; }
举例:* { color: orange; font-size: 40px; }
元素选择器
作用:为页面中 某种元素 统一设置样式。
语法:标签名 { 属性名: 属性值; }
举例:h1 { color: orange; font-size: 40px; } p { color: blue; font-size: 60px; }
类选择器
作用:根据元素的 class 值,来选中某些元素。
语法:.类名 { 属性名: 属性值; }
举例:.speak { color: red; } .answer { color: blue; }
注意点: 1.元素的 class 属性值不带 . ,但 CSS 的类选择器要带 . 。 2.class 值,是我们自定义的,按照标准:不要使用纯数字、不要使用中文、尽量使用 英文与数字的组合,若由多个单词组成,使用 - 做连接 ,例如: left-menu ,且命名 要有意义,做到 “见名知意”。 3.一个元素不能写多个 class 属性。 4.一个元素的 class 属性,能写多个值,要用空格隔开。
ID选择器
作用:根据元素的 id 属性值,来精准的选中某个元素。
语法:#id值 { 属性名: 属性值; }
举例:#earthy { color: red; font-size: 60px; }
复合选择器
HTML元素间的关系
父元素(直接包裹某个元素的元素,就是该元素的父元素。)
子元素(被父元素直接包含的元素。)
祖先元素(父亲的父亲…,一直往外找,都是祖先,父元素,也算是祖先元素的一种。)
后代元素(儿子的儿子…,一直往里找,都是后代,子元素,也算是后代元素的一种。)
兄弟元素(具有相同父元素的元素,互为兄弟元素。)
交集选择器
作用:选中 同时符合 多个条件的元素。交集有并且的含义(通俗理解:即…又… 的意思)。
语法:选择器1选择器2选择器3…选择器n {}
举例:
p.beauty {
color : blue;
}
.rich.beauty {
color : green;
}
注意点: 1.有标签名,标签名必须写在前面 。 2.id 选择器、通配选择器 ,理论上可以作为交集的条件,但实际应用中几乎不用 —— 因为没有意义。 3.交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是 p 元素 又是span 元素 。 4.用的最多的交集选择器是:元素选择器配合类名选择器,例如: p.beauty 。
并集选择器
作用:选中多个选择器对应的元素,又称:分组选择器。所谓并集就是或者的含义(通俗理解:要么…要么… 的意思)
语法:选择器1, 选择器2, 选择器3, … 选择器n {}
举例:
#peiqi,
.rich,
.beauty {
font-size : 40px;
background-color : skyblue;
width : 200px;
}
注意点: 1.并集选择器,我们一般竖着写。 2.任何形式的选择器,都可以作为并集选择器的一部分 。 3.并集选择器,通常用于集体声明,可以缩小样式表体积。
后代选择器
作用:选中指定元素中,符合要求的后代元素。
语法:选择器1 选择器2 选择器3 … 选择器n {} (先写祖先,再写后代)。选择器之间,用空格隔开,空格可以理解为:" xxx 中的",其实就是后代的意思。
举例:
ul li {
color : red;
}
ul li a {
color : orange;
}
.subject li {
color : blue;
}
.subject li.front-end {
color : blue;
}
注意点: 1.后代选择器,最终选择的是后代,不选中祖先。 2.儿子、孙子、重孙子,都算是后代。 3.结构一定要符合之前讲的 HTML 嵌套要求,例如:不能 p 中写 h1 ~ h6 。
子代选择器
作用:选中指定元素中,符合要求的 子 元素(儿子元素 )。(先写父,再写子)
语法:选择器1 > 选择器2 > 选择器3 > … 选择器n {}。选择器之间,用 > 隔开, > 可以理解为:" xxx 的子代",其实就是儿子的意思。
举例:
div>a {
color : red;
}
.persons>a {
color : red;
}
注意点: 1.子代选择器,最终选择的是子代,不是父级。 2.子、孙子、重孙子、重重孙子 … 统称后代!,子就是指儿子。
兄弟选择器
相邻兄弟选择器:
作用:选中指定元素后,符合条件的 相邻兄弟 元素。所谓相邻,就是紧挨着他的下一个,简记:睡在我下铺的兄弟。
div+p {
color : red;
}
通用兄弟选择器:
作用:选中指定元素后,符合条件的 所有兄弟 元素。(简记:睡在我下铺的所有兄弟)。
div~p {
color : red;
}
属性选择器
div[title] { color : red; }
div[title="atguigu"] { color : red; }
div[title^="a"] { color : red; }
div[title$="u"] { color : red; }
div[title*="g"] { color : red; }
伪类选择器
作用:选中特殊状态的元素。 如何理解“伪” ? — 虚假的,不是真的。 如何理解“伪类”? — 像类( class ),但不是类,是元素的一种特殊状态。
常用的伪类选择器: 一、动态伪类: 1.:link 超链接未被访问的状态。 2.:visited 超链接访问过的状态。 3.:hover 鼠标悬停在元素上的状态。 4.:active 元素激活的状态。什么是激活?—— 按下鼠标不松开。 注意点:遵循 LVHA 的顺序,即: link 、 visited 、 hover 、 active 。 5.:focus 获取焦点的元素。表单类元素才能使用 :focus 伪类。当用户:点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式,选择元素时,就是获 得焦点。 二、结构伪类: 1.:first-child 所有兄弟元素中的第一个。 2.:last-child 所有兄弟元素中的最后一个。 3.:nth-child(n) 所有兄弟元素中的第 n 个。 4.:first-of-type 所有同类型兄弟元素中的第一个。 5.:last-of-type 所有同类型兄弟元素中的最后一个。 6.:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。 关于n的值: 1.0 或 不写 :什么都选不中 —— 几乎不用。 2.n :选中所有子元素 —— 几乎不用。 3.1~正无穷的整数 :选中对应序号的子元素。 4.2n 或 even :选中序号为偶数的子元素。 5.2n+1 或 odd :选中序号为奇数的子元素。 6.-n+3 :选中的是前 3 个。 了解: 1.:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。 2.:nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。 3.:only-child 选择没有兄弟的元素(独生子女)。 4.:only-of-type 选择没有同类型兄弟的元素。 5.:root 根元素。 6.:empty 内容为空元素(空格也算内容)。 三、否定伪类: :not(选择器) 排除满足括号中条件的元素。 四、UI伪类: 1.:checked 被选中的复选框或单选按钮。 2.:enable 可用的表单元素(没有 disabled 属性)。 3.:disabled 不可用的表单元素(有 disabled 属性)。 五、目标伪类(了解) :target 选中锚点指向的元素。 六、语言伪类(了解) :lang() 根据指定的语言选择元素(本质是看 lang 属性的值)。
伪元素选择器
作用:选中元素中的一些特殊位置。
常用伪元素:
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。
::after 在元素最后的位置,创建一个子元素(必须用 content 属性指定内容)。
颜色的表示
表示方式一:颜色名
编写方式:直接使用颜色对应的英文单词,编写比较简单,例如: 1.红色:red 2.绿色:green 3.蓝色:blue 4.紫色:purple 5.橙色:orange 6.灰色:gray …
表示方式二:rgb 或 rgba
编写方式:使用 红、黄、蓝 这三种光的三原色进行组合。
举例:
color : rgb ( 255, 0, 0) ;
color : rgb ( 0, 255, 0) ;
color : rgb ( 0, 0, 255) ;
color : rgb ( 0, 0, 0) ;
color : rgb ( 255, 255, 255) ;
color : rgb ( 138, 43, 226)
color : rgba ( 255, 0, 0, 0.5) ;
color : rgb ( 100%, 0%, 0%) ;
color : rgba ( 100%, 0%, 0%, 50%) ;
表示方式三:HEX 或 HEXA
HEX 的原理同与 rgb 一样,依然是通过:红、绿、蓝色 进行组合,只不过要用 6位(分成3组) 来表达。
格式为:# rrggbb 每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f )所以每一种光的最小值是: 00 ,最大值是: ff
举例:
color : #ff0000;
color : #00ff00;
color : #0000ff;
color : #000000;
color : #ffffff;
color : #ff9988;
color : #ff998866;
注意点:IE 浏览器不支持 HEXA ,但支持 HEX 。
表示方式四:HSL 或 HSLA
HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
色相:取值范围是 0~360 度,具体度数对应的颜色如下图:
饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)
亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是白色了)
HSLA 其实就是在 HSL 的基础上,添加了透明度。
CSS字体属性
字体大小
属性名:font-size
作用:控制字体的大小。
语法:
div {
font-size : 40px;
}
注意点: 1.Chrome 浏览器支持的最小文字为 12px ,默认的文字大小为 16px ,并且 0px 会自动 消失。 2.不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大 小。 3.通常以给 body 设置 font-size 属性,这样 body 中的其他元素就都可以继承了。
字体族
属性名: font-family
作用:控制字体类型。
语法:
div {
font-family : "STCaiyun" , "Microsoft YaHei" , sans-serif
}
注意点: 1.使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里 去寻找。 2.如果字体名包含空格,必须使用引号包裹起来。 3.可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面 的,且通常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体即没有笔画首尾装饰的字体)。 4.windows 系统中,默认的字体就是微软雅黑。
字体风格
属性名: font-style
作用:控制字体是否为斜体。
常用值: 1.normal :正常(默认值) 2.italic :斜体(使用字体自带的斜体效果)实现斜体时,更推荐使用 italic 。 3.oblique :斜体(强制倾斜产生的斜体效果)
语法:
div {
font-style : italic;
}
字体粗细
属性名: font-weight
作用:控制字体的粗细。
常用值:
关键词 1.lighter :细 2.normal : 正常 3.bold :粗 4.bolder :很粗 (多数字体不支持)
数值: 1.100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的 精确程度)。 2.100~300 等同于 lighter , 400~500 等同于 normal , 600 及以上等同于 bold 。
语法:
div {
font-weight : bold;
}
div {
font-weight : 600;
}
文本颜色
属性名: color
作用:控制文字的颜色。
可选值: 1.颜色名 2.rgb 或 rgba 3.HEX 或 HEXA (十六进制) 4.HSL 或 HSLA
举例:
div {
color : rgb ( 112, 45, 78) ;
}
文本间距
字母间距: letter-spacing
单词间距: word-spacing (通过空格识别词)
属性值为像素( px ),正值让间距增大,负值让间距缩小。
文本修饰
属性名: text-decoration
作用:控制文本的各种装饰线。
可选值: 1.none : 无装饰线(常用) 2.underline :下划线(常用) 3.overline : 上划线 4.line-through : 删除线 可搭配如下值使用: 1.dotted :虚线 2.wavy :波浪线 3.也可以指定颜色
举例:
a {
text-decoration : none;
}
文本缩进
属性名: text-indent 。
作用:控制文本首字母的缩进。
属性值: css 中的长度单位,例如: px
举例:
div {
text-indent : 40px;
}
文本对齐_水平
属性名: text-align 。
作用:控制文本的水平对齐方式。
常用值: 1.left :左对齐(默认值) 2.right :右对齐 3.center :居中对齐
举例:
div {
text-align : center;
}
行高
属性名: line-height
作用:控制一行文字的高度。
可选值: 1.normal :由浏览器根据文字大小决定的一个默认值。 2.像素( px )。 3.数字:参考自身 font-size 的倍数(很常用)。 4.百分比:参考自身 font-size 的百分比。
备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。
举例:
div {
line-height : 60px;
line-height : 1.5;
line-height : 150%;
}
应用场景: 1.对于多行文字:控制行与行之间的距离。 2.对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中
vertical-align
属性名: vertical-align 。
作用:用于指定同一行元素之间 ,或 表格单元格 内文字的 垂直对齐方式 。
常用值: 1.baseline (默认值):使元素的基线与父元素的基线对齐。 2.top :使元素的顶部与其所在行的顶部对齐。 3.middle :使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。 4.bottom :使元素的底部与其所在行的底部对齐。 特别注意: vertical-align 不能控制块元素。
CSS列表属性
CSS 属性名
功能
属性值
list-style-type
设置列表符号
常用值如下:none :不显示前面的标识(很常用!); square :实心方块disc :圆形; decimal :数字lower-roman :小写罗马字; upper-roman :大写罗马字; lower-alpha :小写字母upper-alpha :大写字母
list-style-position
设置列表符号的位置
inside :在 li 的里面; outside :在 li 的外边
list-style-image
自定义列表符号
url(图片地址)
list-style
复合属性
没有数量、顺序的要求
CSS表格属性
边框相关属性(其他元素也能用):
CSS 属性名
功能
属性值
border-width
边框宽度
CSS 中可用的长度值
border-color
边框颜色
CSS 中可用的颜色值
border-style
边框风格
none 默认值; solid 实线; dashed 虚线; dotted 点线; double 双实线
border
边框复合属性
没有数量、顺序的要求
表格独有属性(只有 table 标签才能使用):
CSS 属性名
功能
属性值
table-layout
设置列宽度
auto :自动,列宽根据内容计算(默认值);fixed :固定列宽,平均分。
border-spacing
单元格间距
CSS 中可用的长度值。生效的前提:单元格边框不能合并。
border-collapse
合并单元格边框
collapse :合并; separate :不合并
empty-cells
隐藏没有内容的单元格
show :显示,默认;hide :隐藏;生效前提:单元格不能合并。
caption-side
设置表格标题位置
top :上面(默认值);bottom :在表格下面
以上 5 个属性,只有表格才能使用,即:
标签。
CSS背景属性
css 属性名
功能
属性值
background-color
设置背景颜色
符合 CSS 中颜色规范的值。默认背景颜色是 transparent 。
background-image
设置背景图片
url(图片的地址)
background-repeat
设置背景重复方式
repeat :重复,铺满整个元素,默认值。repeat-x :只在水平方向重复。repeat-y :只在垂直方向重复。no-repeat :不重复。
background-position
设置背景图位置
通过关键字设置位置:写两个值,用空格隔开。水平: left 、 center 、 right。垂直: top 、 center 、 bottom。如果只写一个值,另一个方向的值取 center。通过长度指定坐标位置:以元素左上角,为坐标原点,设置图片左上角的位置。两个值,分别是 x 坐标和 y 坐标。只写一个值,会被当做 x 坐标, y 坐标取center
background
复合属性
没有数量和顺序要求
CSS鼠标属性
CSS 属性名
功能
属性值
cursor
设置鼠标光标的样式
pointer :小手;move :移动图标;text :文字选择器;crosshair :十字架;wait :等待;help :帮助
cursor : url ( "./arrow.png" ) , pointer;
CSS盒子模型
CSS长度单位
1.px :像素。 2.em :相对元素 font-size 的倍数。 3.rem :相对根字体大小,html标签就是根。 4.% :相对父元素计算。
注意点: CSS 中设置长度,必须加单位,否则样式无效!
元素的显示模式
块元素(block) 又称:块级元素 特点: 1.在页面中 独占一行 ,不会与任何元素共用一行,是从上到下排列的。 2.默认宽度:撑满 父元素 。 3.默认高度:由 内容 撑开。 4.可以 通过 CSS 设置宽高。
行内元素(inline) 又称:内联元素 特点: 1.在页面中 不独占一行 ,一行中不能容纳下的行内元素,会在下一行继续从左到右排 列。 2.默认宽度:由 内容 撑开。 3.默认高度:由 内容 撑开。 4.无法 通过 CSS 设置宽高。
行内块元素(inline-block) 又称:内联块元素 特点: 1.在页面中 不独占一行 ,一行中不能容纳下的行内元素,会在下一行继续从左到右排 列。 2.默认宽度:由 内容 撑开。 3.默认高度:由 内容 撑开。 4.可以 通过 CSS 设置宽高。
各元素的显示模式
主体结构标签: 、
排版标签: ~ 、 、 、
、
列表标签: 、 、 、 、 、
表格相关标签: 、 、 、 、 、
文本标签: 、 、 、 、 、 、
与
图片:
单元格: 、
表单控件: 、
框架标签:
修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式,常用值如下:
值
描述
none
元素会被隐藏。
block
元素将作为块级元素显示。
inline
元素将作为内联元素显示。
inline-block
元素将作为行内块元素显示。
盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子,所有的样式也都是基于这个盒子。
margin(外边距) : 盒子与外界的距离。
border(边框) : 盒子的边框。
padding(内边距) : 紧贴内容的补白区域。
content(内容) :元素中的文本或后代元素都是它的内容。 图示如下:
盒子的大小 = content + 左右 padding + 左右 border 。
注意点:外边距 margin 不会影响盒子的大小,但会影响盒子的位置。
盒子内容区
CSS 属性名
功能
属性值
width
设置内容区域宽度
长度
max-width
设置内容区域的最大宽度
长度
min-width
设置内容区域的最小宽度
长度
height
设置内容区域的高度
长度
max-height
设置内容区域的最大高度
长度
min-height
设置内容区域的最小高度
长度
注意点: 1.max-width 、 min-width 一般不与 width 一起使用。 2.max-height 、 min-height 一般不与 height 一起使用。
关于默认宽度
所谓的默认宽度,就是 不设置 width 属性 时,元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。
盒子内边距(padding)
padding 复合属性的使用规则:
padding: 10px; 四个方向内边距都是 10px 。
padding: 10px 20px; 上 10px ,左右 20px 。(上下、左右)
padding: 10px 20px 30px; 上 10px ,左右 20px ,下 30px 。(上、左右、下)
padding: 10px 20px 30px 40px; 上 10px ,右 20px ,下 30px ,左 40px 。(上、右、 下、左)
padding 的值 不能为负数 。
行内元素 的 左右内边距是没问题的,上下内边距不能完美的设置。
块级元素 、行内块元素 ,四个方向内边距都可以完美设置。
margin注意事项
子元素的 margin ,是参考父元素的 content 计算的。(因为是父亲的 content 中承装着 子元素)
上 margin 、左 margin :影响自己的位置;下 margin 、右 margin :影响后面兄弟元素 的位置。
块级元素、行内块元素,均可以完美地设置四个方向的 margin ;但行内元素,左右 margin 可以完美设置,上下 margin 设置无效。
margin 的值也可以是 auto ,如果给一个块级元素设置左右 margin 都为 auto ,该块级 元素会在父元素中水平居中。
margin 的值 可以是负值 。
margin塌陷问题
解释:第一个子元素的上 margin 会作用在父元素上,最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷? 方案一: 给父元素设置不为 0 的 padding 。 方案二: 给父元素设置宽度不为 0 的 border 。 方案三:给父元素设置 css 样式 overflow:hidden
margin合并问题
解释:上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。
如何解决 margin 塌陷? 无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。
处理内容溢出
CSS 属性名
功能
属性值
overflow
溢出内容的处理方式
visible :显示,默认值;hidden :隐藏;scroll :显示滚动条,不论内容是否溢出;auto :自动显示滚动条,内容不溢出不显示
overflow-x
水平方向溢出内容的处理方式
同 overflow
overflow-y
垂直方向溢出内容给的处理方式
同 overflow
注意点: 1.overflow-x 、 overflow-y 不能一个是 hidden ,一个是 visible ,是实验性属性,不 建议使用。 2.overflow 常用的值是 hidden 和 auto ,除了能处理溢出的显示方式,还可以解决很多 疑难杂症。
隐藏元素的方式
方式一:visibility 属性 visibility 属性默认值是 show ,如果设置为 hidden ,元素会隐藏。 元素看不见了,还占有原来的位置(元素的大小依然保持)。
方式二: display 属性 设置 display:none ,就可以让元素隐藏。 彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。
样式的继承
会继承的 css 属性 字体属性、文本属性(除了vertical-align)、文字颜色 等。
不会继承的 css 属性 边框、背景、内边距、外边距、宽高、溢出方式 等。
规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的
布局技巧
行内元素、行内块元素,可以被父元素当做文本处理。 即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。 例如: text-align 、 line-height 、 text-indent 等。
如何让子元素,在父亲中 水平居中 :
若子元素为 块元素 ,给父元素加上: margin:0 auto; 。
若子元素为 行内元素、行内块元素 ,给父元素加上: text-align:center 。
如何让子元素,在父亲中 垂直居中 : 若子元素为 块元素 ,给子元素加上: margin-top ,值为: (父元素 content -子元素盒子总高) / 2 若子元素为 行内元素、行内块元素 : 让父元素的 height = line-height ,每个子元素都加上: vertical-align:middle; 。
补充:若想绝对垂直居中,父元素 font-size 设置为 0 。
元素之间的空白问题
产生的原因: 行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案: 1.方案一: 去掉换行和空格(不推荐)。 2.方案二: 给父元素设置 font-size:0 ,再给需要显示文字的元素,单独设置字体大小(推 荐)。
行内块的幽灵空白问题
产生原因: 行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
解决方案: 1.方案一: 给行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、 top 均可。 2.方案二: 若父元素中只有一张图片,设置图片为 display:block 。 3.方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置 font-size 。
浮动
元素浮动后会有哪些影响
对兄弟元素的影响 : 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
对父元素的影响 : 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。
解决浮动产生的影响(清除浮动)
解决方案:
方案一: 给父元素指定高度。
方案二: 给父元素也设置浮动,带来其他影响。
方案三: 给父元素设置 overflow:hidden 。
方案四: 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置 clear:both 。
方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===> 推荐使用
.parent::after {
content : "" ;
display : block;
clear : both;
}
布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。
浮动相关属性
CSS 属性
功能
属性值
float
设置浮动
left : 设置左浮动;right : 设置右浮动;none :不浮动,默认值
clear
清除浮动;清除前面兄弟元素浮动元素的响应
left :清除前面左浮动的影响;right :清除前面右浮动的影响;both :清除前面左右浮动的影响
定位
相对定位
如何设置相对定位?
给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
相对定位的参考点在哪里?
相对定位的特点:
1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。 2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
默认规则是:
都发生定位的两个元素,后写的元素会盖在先写的元素之上。
3.left 不能和 right 一起设置, top 和 bottom 不能一起设置。 4.相对定位的元素,也能继续浮动,但不推荐这样做。 5.相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。
注意点:绝大多数情况下,相对定位,会与绝对定位配合使用。
绝对定位
如何设置绝对定位?
给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位的参考点在哪里?
参考它的 包含块 。
什么是包含块? 1.对于没有脱离文档流的元素:包含块就是父元素; 2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都 没定位,那包含块就是整个页面)。
绝对定位元素的特点:
脱离文档流,会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置, top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高。
固定定位
如何设置为固定定位?
给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位的参考点在哪里?
参考它的 视口 什么是视口?—— 对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”。
固定定位元素的特点
脱离文档流,会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置, top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
粘性定位
如何设置为粘性定位?
给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过 最常用的是 top 值 。
粘性定位的参考点在哪里?
离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点
不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置,但不推荐这样做。
粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做。
粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
定位层级
定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字,没有单位,值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。
定位的特殊应用
注意点: 1.发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设 置宽高。 2.发生相对定位后,元素依然是之前的显示模式。 3.以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。
让定位元素的宽充满包含块
块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致, top 和 bottom 设置为 0 。
让定位元素在包含块中居中
left : 0;
right : 0;
top : 0;
bottom : 0;
margin : auto;
left : 50%;
top : 50%;
margin-left : 负的宽度一半;
margin-top : 负的高度一半;
布局
版心
在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心。
版心的宽度一般是 960 ~ 1200 像素 之间。
版心可以是一个,也可以是多个。
常用布局名词
位置
顶部导航条
topbar
页头
header 、 page-header
导航
nav 、 navigator 、 navbar
搜索框
search 、 search-box
横幅、广告、宣传图
banner
主要内容
content 、 main
侧边栏
aside 、 sidebar
页脚
footer 、 page-footer
VSCode中的注释折叠
本文仅作个人学习笔记使用,无商业用途。
上述内容笔记大部分摘自“B站尚硅谷”
如若转载,请先声明。
你可能感兴趣的:(前端,学习,笔记,css)
x86-64汇编语言训练程序与实战
十除以十等于一
本文还有配套的精品资源,点击获取简介:汇编语言是一种低级语言,与机器代码紧密相关,特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器,支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题,鼓励编程技巧应用,前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令,提升了数据处理效率。学习汇编语言能够深入理解计算机底层
三菱PLC全套学习资料及应用手册
good2know
本文还有配套的精品资源,点击获取简介:三菱PLC作为工业自动化领域的核心设备,其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源,包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析,旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器(PLC)是工业自动化
移动端城市区县二级联动选择功能实现包
good2know
本文还有配套的精品资源,点击获取简介:本项目是一套为移动端设计的jQuery实现方案,用于简化用户在选择城市和区县时的流程。它包括所有必需文件:HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项,实现城市到区县的联动效果,支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用,并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
日更006 终极训练营day3
懒cici
人生创业课(2)今天的主题:学习方法一:遇到有用的书,反复读,然后结合自身实际,列践行清单,不要再写读书笔记思考这本书与我有什么关系,我在哪些地方能用到,之后我该怎么用方法二:读完书没映像怎么办?训练你的大脑,方法:每读完一遍书,立马合上书,做一场分享,几分钟都行对自己的学习要求太低,要逼自己方法三:学习深度不够怎么办?找到细分领域的榜样,把他们的文章、书籍、产品都体验一遍,成为他们的超级用户,向
day15|前端框架学习和算法
universe_01
前端 算法 笔记
T22括号生成先把所有情况都画出来,然后(在满足什么情况下)把不符合条件的删除。T78子集要画树状图,把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索:每个边都走完,再回溯应用:二叉树搜索,图搜索回溯算法=DFS+剪枝T200岛屿数量(非常经典BFS宽度把树状转化成队列形式,lambda匿名函数“一次性的小函数,没有名字”setup语法糖:让代码更简洁好写的语法ref创建:基本类型的
《极简思维》第三部分
小洋苏兮
整理你的人际关系如何改善人际关系?摘录:因为人际关系问题是人们生活中不快乐的主要原因。感想:感觉这个说的挺对,之前我总是埋头学习,不管舍友不管自己的合作伙伴的一些事情,但实际上,这学期关注了之后好多了摘录:“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说,人类就是建立在人脉关系上的。”感想:但是如果有时想的太多就不太好,要以一个开放的心态跟别
你要记住,最重要的是:随时做好准备,为了你可能成为更好的自己,放弃现在的自己。
霖霖z
打卡人:周云日期:2018年11月09日【日精进打卡第180天】【知~学习】《六项精进》0遍共214遍《通篇》1遍共106遍《大学》2遍共347遍《坚强工作,温柔生活》ok《不抱怨的世界》104-108页《经典名句》你要记住,最重要的是:随时做好准备,为了你可能成为更好的自己,放弃现在的自己。【行~实践】一、修身:(对自己个人)1、坚持打卡二、齐家:(对家庭和家人)打扫卫生,接送孩子,洗衣做饭,陪
贫穷家庭的孩子考上985以后会怎样?
Mellisa蜜思言
我出生在一个贫穷的农村家庭,据我妈说,我出生的时候才4斤多,而她生完我以后月子里就瘦到70斤。家里一直很穷,父母都是在菜市场卖菜的,家里还有几亩地种庄稼的。我很小开始就要去帮忙,暑假的生活就是帮忙去卖菜和割稻谷,那时候自己对于割稻谷这种事情有着莫名的恐惧,生怕自己长大以后还是每年都要过着割稻谷这种日子。父母因为忙于生计无暇顾及我的学习,幸好我因为看到他们这样子的生活,内心里有深深的恐惧感,驱使着我
2019-06-05
第十七把巴鲁克
今天去实验田里实习,见到了福寿螺真的可怕且牛皮,六级也快来了,说实话还是害怕。我昨天考了环工原理,真的太难了,太烦了,理工科真的难,烦。实验报告还是没写,要抓紧速度抓紧时间,还是应该学会努力学习,远离一些不上进的事物。
为什么焦虑、抑郁、自残的青少年越来越多?
精神健康
很多家长觉得没缺孩子吃的穿的,他们有安稳的生活,他们有什么可焦虑、抑郁的,但现在的孩子,学习压力越来越大,每天休息的时间越来越少,出现焦虑抑郁是很正常的。从发展的角度看,青少年时期,人的身体、情绪,智力、人格都急剧发展,正从未成熟走向成熟,情绪起伏不定,易冲动,再者,由于缺乏生活经验,以及来自于家长、学校、社会的各种要求和压力,从而不知所措,心中的焦虑、恐惧、彷徨得不到及时的排解,从而导致心理上的
读书打卡《别想太多啦》
chenchen_68ed
第一,世间之事,不去尝试永远不知道其中的奥秘,在尝试中有失败是必然的。如果担心失败,那什么都学不会。第二,经历的失败越多,越会对失败者抱有宽容的态度,“原来如此,我也经历过类似的失败啦,那只是暂时的”。经历越多失败的长者,越能包容别人,这也就是所谓的“越年长越宽容”。成熟的人,就是在众多失败经历中不断学习,并接纳别人的失败。对于他人的小小过失不吹毛求疵,自己的心态会更加平和。在不断失败中学习,让自
2023-01-26
胡喜平
我觉得《可见的学习》一书确实从底层逻辑说清楚了,教学的本质。可是太多术语和概念,一时间难以消化啊。而且知道和懂得有距离,运用就更不行了,需要高手和专家的指导。我需要多听听新课标的讲座了,来反复印证。读论文也有了一点点灵感,明天修改我的论文。
平静得接受自己的笨拙 20190118 晨间日记
吴伯符
图片发自App最近做了一个关于微习惯的分享,这里有八个字:微量开始,超额完成。这里的言下之意其实是要你在一开始的时候,平静地接受自己的笨拙。接受自己的笨拙,理解自己的笨拙,放慢速度尝试,观察哪里可以改进,再反复练习,观察自己哪里可以再进一步改进,再反复…这是学习一切技能的必须的过程。这里的两个关键点是:1.尽快的开始这个过程,这就能够用到微习惯的微量开始。2.尽快的度过这个过程,这就需要用到超额完
【花了N长时间读《过犹不及》,不断练习,可以越通透】
君君Love
我已经记不清花了多长时间去读《过犹不及》,读书笔记都写了42页,这算是读得特别精细的了。是一本难得的好书,虽然书中很多内容和圣经吻合,我不是基督徒,却觉得这样的文字值得细细品味,和我们的生活息息相关。我是个界线建立不牢固的人,常常愧疚,常常害怕他人的愤怒,常常不懂拒绝,还有很多时候表达不了自己真实的感受,心里在说不嘴里却在说好……这本书给我很多的启示,让我学会了怎样去建立属于自己的清晰的界限。建立
二十四节气组诗 谷雨
离陌_6639
图片来源网络,若侵犯了你的权益,请联系我删除6.谷雨文/离陌背上行囊背上如行囊的我从此任行程马不停蹄今天家乡的田野春雨快马加鞭播下希望的种子观音不语目送着我和夏天一道在观音山出关图片来源网络,若侵犯了你的权益,请联系我删除你好啊,我是离陌,已然在懵懂中走过了16年的岁月,为了珍惜当下的每一秒,所以立志做一名终身学习者。文学对于我来说是一种信仰,诗歌是我的生命。人生之道,四通八达,即入文学,自当持之
你好,2020年
瑄瑄妍妍的妈咪
早上好,今天是2020年的第一天,也就是元旦,新年新的一天开始了。新的开始,重新规划未来的一年。从今天开始,用了一个新的记账软件,之前的随手记软件,也没有删除,只是重新下载了一个别的软件,开始一个新的记账旅程,对于理财开支,有个新的规划。通过小红书视频软件,学习了不少育儿知识,和各种不同的美食,以后动手制作,给宝宝做健康美味的营养餐。学习方面,继续学英语吧!虽然是抽出时间学的,进度也比较慢,但是积
基于redis的Zset实现作者的轻量级排名
周童學
Java redis 数据库 缓存
基于redis的Zset实现轻量级作者排名系统在今天的技术架构中,Redis是一种广泛使用的内存数据存储系统,尤其在需要高效检索和排序的场景中表现优异。在本篇博客中,我们将深入探讨如何使用Redis的有序集合(ZSet)构建一个高效的笔记排行榜系统,并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台,用户可以发布各种笔记,系统需要根据用户发布的笔记数量来生成一个实时更新的
常规笔记本和加固笔记本的区别
luchengtech
电脑 三防笔记本 加固计算机 加固笔记本
在现代科技产品中,笔记本电脑因其便携性和功能性被广泛应用。根据使用场景和需求的不同,笔记本可分为常规笔记本和加固笔记本,二者在多个方面存在显著区别。适用场景是区分二者的重要标志。常规笔记本主要面向普通消费者和办公人群,适用于家庭娱乐、日常办公、学生学习等相对稳定的室内环境。比如,人们在家用它追剧、处理文档,学生在教室用它完成作业。而加固笔记本则专为特殊行业设计,像军事、野外勘探、工业制造、交通运输
《云襄传》:云襄做的局是浑水摸鱼吗?
书生号贺
云襄入南都是要浑水摸鱼吗?他是云台的高材生吗?他为啥笃定师父一定会让他留在南都?他为啥觉得他能够做局成功?他是在经商吗?还是在经营人心与欲望?云襄是云台弟子,云台属千门的一支,另一支叫凌渊,云台教人经商之道,重智慧,凌渊以武力取胜,但倍受打压。云襄学习十五年,下高山奔越州,途经南洋,因恩人闻聪被害,囚于白驹镇,念于情分,被卷入这样一个局面里,结识了舒亚南与金十两,于是,复仇小组成立,目标是南都漕帮
js操作样式
郝加升
DOM样式属性和方法:指定的元素,它的style有这么几个属性和方法:cssText:通过这个属性可以访问到元素的特性style设置的属性,并且可以直接赋值设置。removeProperty(属性名称):从样式中删除给定属性。setProperty(属性名称,值,权重):可以通过这个方法设置给定样式的同时设置其权重,可以传入”important”或者一个空字符串。获取计算后样式:window.ge
心力践行营十二期一阶学习打卡
LX_王彤彤
姓名:王彤彤时间:2021年4月24日一:朗读师父的十大人生哲学二:师父的早安分享感悟很喜欢这句话:所有的行动都是基于目标的尝试,没有所谓的失败,只是不同尝试后得到的不同结果,让我们更好地调整下一次的行动。三:感恩日记1.我太幸福了,我很感恩姑姑,因为姑姑放假又投喂了我,还给我带了饺子回家,这让我感觉很幸福。谢谢,谢谢,谢谢。2.我太幸福了,我很感恩师父晚上的直播,因为听他的分享我知道怎么更好的去
为了在未来的人工智能世界中取得成功,学生们必须学习人类写作的优点
睿邸管家
澳大利亚各地的学生在新学年开始使用铅笔、钢笔和键盘学习写字。在工作场所,机器也在学习写作,如此有效,几年之内,它们可能会写得比人类更好。有时它们已经做到了,就像Grammarly这样的应用程序所展示的那样。当然,人类现在的日常写作可能很快就会由具有人工智能(AI)的机器来完成。手机和电子邮件软件常用的预测文本是无数人每天都在使用的一种人工智能写作形式。据AI行业研究机构称,到2022年,人工智能及
闭组进行时...
李亚青_强化班
今天是2019年12月1号距离开始三月学习的日子:2019年10月07,已经过去将近两个月,回顾这一阶段的学习,收获了什么?又学会了什么呢?图片发自App我想,收获最大的就是身边这一群人吧,有和蔼可亲的学姐,贴心的学长,嬉戏打闹,玩的不亦乐乎,但也同样认真踏实学习小伙伴图片发自App本以为在这样的时刻,有太多太多话,太多太多想法想要表达,可言到此处,又觉得似乎没有什么想要说的了还是那句话,幸运遇到
2021-10-23
赵甄文的幸福
秀荣感恩日记Day42[烟花]感恩语录感恩自己有能力有好身体,可以到处走动,做自己想做的事情10.23感恩日记今天做的事情瑜伽一小时户外散步一小时泡脚20分钟学习打卡和孩子沟通[爱心]感动的瞬间今天瑜伽回来,发现老公在厨房里做鱼。每次老公有时间休息的时候都会给我做硬菜。刘姐约我一起去公园散步晒太阳。虽然完美错过,但心里还是暖暖的。每天睁开眼打开手机,先去自己的群里逛一逛,每每发现有人点赞或者互动都
孤独的守候
怒吼的生命
孤独了时光岁月了寂寞带来了惆怅那些孤独的日子里我们珍惜奋斗起来品味人生的真谛做到更好奋斗当中的你是那么努力格外自律学习起来五彩斑斓那些日子时光匆匆人生的机会很多需要把握痛苦的回忆记得住那些忧愁孤苦五一的日子寂寞当中的你时光荏苒独自带给我荒草学习起来努力奋斗可是我们做的还不够把握发展生活带给我们更多希望静静的述说你的故事你的精彩人生当中我们总是努力把握生活带给我们更多的学习生活当中我们奋斗可是做的还
第八课: 写作出版你最关心的出书流程和市场分析(无戒学堂复盘)
人在陌上
今天是周六,恰是圣诞节。推掉了两个需要凑腿的牌局,在一个手机,一个笔记本,一台电脑,一杯热茶的陪伴下,一个人静静地回听无戒学堂的最后一堂课。感谢这一个月,让自己的习惯开始改变,至少,可以静坐一个下午而不觉得乏味枯燥难受了,要为自己点个赞。我深知,这最后一堂课的内容,以我的资质和毅力,可能永远都用不上。但很明显,无戒学堂是用了心的,毕竟,有很多优秀学员,已经具备了写作能力,马上就要用到这堂课的内容。
AI模型训练中过拟合和欠拟合的区别是什么?
workflower
人工智能 算法 人工智能 数据分析
在AI模型训练中,过拟合和欠拟合是两种常见的模型性能问题,核心区别在于模型对数据的学习程度和泛化能力:欠拟合(Underfitting)-定义:模型未能充分学习到数据中的规律,对训练数据的拟合程度较差,在训练集和测试集上的表现都不好(如准确率低、损失值高)。-原因:-模型结构过于简单(如用线性模型解决非线性问题);-训练数据量不足或特征信息不充分;-训练时间太短,模型尚未学到有效模式。-表现:训练
2018-08-29精进打卡
米兰王
姓名:王兰英【日精进打卡第25天】【知~学习】《六项精进》1遍共39遍《大学》1遍共50遍【经典名句分享】一切都是最好的安排。【行~实践】一、修身:(对自己个人)1,散步1小时。2,每天坚持读书。二、齐家:(对家庭和家人)1,指导孩子开车。2,和家人一起逛超市。三、建功:(对工作)用心做好每件事。{积善}:发愿从2018年8月5日起1年内365个善事。今日1善,累计27善。【省~觉悟】正人先正己。
python笔记14介绍几个魔法方法
抢公主的大魔王
python python
python笔记14介绍几个魔法方法先声明一下各位大佬,这是我的笔记。如有错误,恳请指正。另外,感谢您的观看,谢谢啦!(1).__doc__输出对应的函数,类的说明文档print(print.__doc__)print(value,...,sep='',end='\n',file=sys.stdout,flush=False)Printsthevaluestoastream,ortosys.std
陶勇:要不要参加分班考试学习?看完再说。
陶勇
每年到了升学季,有很多培训机构都特别忙,为什么呢?因为有成千上万的学生,会选择升学前的分班考试的培训。比如说,小升初的孩子,到了暑假,很多孩子都会去选择一个初中,初一的分班考试的培训,那考入高中的孩子也有很多孩子会选择这种新高一的分班考试的培训。当然了,我个人认为这种选择并不是孩子自身的选择,主要还是家长的选择。当然也有少数孩子会对自己有比较高的要求,他们也会主动的去选择。为什么要去上分班考试的这
二分查找排序算法
周凡杨
java 二分查找 排序 算法 折半
一:概念 二分查找又称
折半查找(
折半搜索/
二分搜索),优点是比较次数少,查找速度快,平均性能好;其缺点是要求待查表为有序表,且插入删除困难。因此,折半查找方法适用于不经常变动而 查找频繁的有序列表。首先,假设表中元素是按升序排列,将表中间位置记录的关键字与查找关键字比较,如果两者相等,则查找成功;否则利用中间位置记录将表 分成前、后两个子表,如果中间位置记录的关键字大于查找关键字,则进一步
java中的BigDecimal
bijian1013
java BigDecimal
在项目开发过程中出现精度丢失问题,查资料用BigDecimal解决,并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习,特转载。
原文地址:http://blog.csdn.net/ugg/article/de
Shell echo命令详解
daizj
echo shell
Shell echo命令
Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出。命令格式:
echo string
您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串:
echo "It is a test"
这里的双引号完全可以省略,以下命令与上面实例效果一致:
echo Itis a test 2.显示转义
Oracle DBA 简单操作
周凡杨
oracle dba sql
--执行次数多的SQL
select sql_text,executions from (
select sql_text,executions from v$sqlarea order by executions desc
) where rownum<81;
&nb
画图重绘
朱辉辉33
游戏
我第一次接触重绘是编写五子棋小游戏的时候,因为游戏里的棋盘是用线绘制的,而这些东西并不在系统自带的重绘里,所以在移动窗体时,棋盘并不会重绘出来。所以我们要重写系统的重绘方法。
在重写系统重绘方法时,我们要注意一定要调用父类的重绘方法,即加上super.paint(g),因为如果不调用父类的重绘方式,重写后会把父类的重绘覆盖掉,而父类的重绘方法是绘制画布,这样就导致我们
线程之初体验
西蜀石兰
线程
一直觉得多线程是学Java的一个分水岭,懂多线程才算入门。
之前看《编程思想》的多线程章节,看的云里雾里,知道线程类有哪几个方法,却依旧不知道线程到底是什么?书上都写线程是进程的模块,共享线程的资源,可是这跟多线程编程有毛线的关系,呜呜。。。
线程其实也是用户自定义的任务,不要过多的强调线程的属性,而忽略了线程最基本的属性。
你可以在线程类的run()方法中定义自己的任务,就跟正常的Ja
linux集群互相免登陆配置
林鹤霄
linux
配置ssh免登陆
1、生成秘钥和公钥 ssh-keygen -t rsa
2、提示让你输入,什么都不输,三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub
其中id_rsa为秘钥,id_rsa.pub为公钥,使用公钥加密的数据只有私钥才能对这些数据解密 c
mysql : Lock wait timeout exceeded; try restarting transaction
aigo
mysql
原文:http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html
原因是你使用的InnoDB 表类型的时候,
默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s,
因为有的锁等待超过了这个时间,所以抱错.
你可以把这个时间加长,或者优化存储
Socket编程 基本的聊天实现。
alleni123
socket
public class Server
{
//用来存储所有连接上来的客户
private List<ServerThread> clients;
public static void main(String[] args)
{
Server s = new Server();
s.startServer(9988);
}
publi
多线程监听器事件模式(一个简单的例子)
百合不是茶
线程 监听模式
多线程的事件监听器模式
监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到
创建多线程的事件监听器模式 思路:
1, 创建线程并启动,在创建线程的位置设置一个标记
2,创建队
spring InitializingBean接口
bijian1013
java spring
spring的事务的TransactionTemplate,其源码如下:
public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{
...
}
TransactionTemplate继承了DefaultT
Oracle中询表的权限被授予给了哪些用户
bijian1013
oracle 数据库 权限
Oracle查询表将权限赋给了哪些用户的SQL,以备查用。
select t.table_name as "表名",
t.grantee as "被授权的属组",
t.owner as "对象所在的属组"
【Struts2五】Struts2 参数传值
bit1129
struts2
Struts2中参数传值的3种情况
1.请求参数绑定到Action的实例字段上
2.Action将值传递到转发的视图上
3.Action将值传递到重定向的视图上
一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上
Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上,绑定的规则使用ognl表达式语言
【Kafka十四】关于auto.offset.reset[Q/A]
bit1129
kafka
I got serveral questions about auto.offset.reset. This configuration parameter governs how consumer read the message from Kafka when there is no initial offset in ZooKeeper or
nginx gzip压缩配置
ronin47
nginx gzip 压缩范例
nginx gzip压缩配置 更多
0
nginx
gzip
配置
随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢?
gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用
java-13.输入一个单向链表,输出该链表中倒数第 k 个节点
bylijinnan
java
two cursors.
Make the first cursor go K steps first.
/*
* 第 13 题:题目:输入一个单向链表,输出该链表中倒数第 k 个节点
*/
public void displayKthItemsBackWard(ListNode head,int k){
ListNode p1=head,p2=head;
Spring源码学习-JdbcTemplate queryForObject
bylijinnan
java spring
JdbcTemplate中有两个可能会混淆的queryForObject方法:
1.
Object queryForObject(String sql, Object[] args, Class requiredType)
2.
Object queryForObject(String sql, Object[] args, RowMapper rowMapper)
第1个方法是只查
[冰川时代]在冰川时代,我们需要什么样的技术?
comsci
技术
看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?
那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...
&nb
js 获取浏览器型号
cuityang
js 浏览器
根据浏览器获取iphone和apk的下载地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="text/html"/>
<meta name=
C# socks5详解 转
dalan_123
socket C#
http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html 这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯,Socket4的实现是类似的,注意的事,这里不是讲用C#实现一个代理服务器,因为实现一个代理服务器需要实现很多协议,头大,而且现在市面上有很多现成的代理服务器用,性能又好,
运维 Centos问题汇总
dcj3sjt126com
云主机
一、sh 脚本不执行的原因
sh脚本不执行的原因 只有2个
1.权限不够
2.sh脚本里路径没写完整。
二、解决You have new mail in /var/spool/mail/root
修改/usr/share/logwatch/default.conf/logwatch.conf配置文件
MailTo =
MailFrom
三、查询连接数
Yii防注入攻击笔记
dcj3sjt126com
sql WEB安全 yii
网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查,可以使用正则表达式或者直接输入字符判断,大部分是只允许输入字母和数字的,其它字符度不允许;对于内容复杂表单的内容,应该对html和script的符号进行转义替换:尤其是<,>,',"",&这几个符号 这里有个转义对照表:
http://blog.csdn.net/xinzhu1990/articl
MongoDB简介[一]
eksliang
mongodb MongoDB简介
MongoDB简介
转载请出自出处:http://eksliang.iteye.com/blog/2173288 1.1易于使用
MongoDB是一个面向文档的数据库,而不是关系型数据库。与关系型数据库相比,面向文档的数据库不再有行的概念,取而代之的是更为灵活的“文档”模型。
另外,不
zookeeper windows 入门安装和测试
greemranqq
zookeeper 安装 分布式
一、序言
以下是我对zookeeper 的一些理解: zookeeper 作为一个服务注册信息存储的管理工具,好吧,这样说得很抽象,我们举个“栗子”。
栗子1号:
假设我是一家KTV的老板,我同时拥有5家KTV,我肯定得时刻监视
Spring之使用事务缘由(2-注解实现)
ihuning
spring
Spring事务注解实现
1. 依赖包:
1.1 spring包:
spring-beans-4.0.0.RELEASE.jar
spring-context-4.0.0.
iOS App Launch Option
啸笑天
option
iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:,其中第二个参数launchOptions为NSDictionary类型的对象,里面存储有此程序启动的原因。
launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。
1、若用户直接
jdk与jre的区别(_)
macroli
java jvm jdk
简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包,可以包括函数库、编译程序等。
JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境,是面向Java程序的使用者,而不是开发者。 如果安装了JDK,会发同你
Updates were rejected because the tip of your current branch is behind
qiaolevip
学习永无止境 每天进步一点点 众观千象 git
$ git push joe prod-2295-1
To git@git.dianrong.com:joe.le/dr-frontend.git
! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward)
error: failed to push some refs to 'git@git.dianron
[一起学Hive]之十四-Hive的元数据表结构详解
superlxw1234
hive hive元数据结构
关键字:Hive元数据、Hive元数据表结构
之前在 “[一起学Hive]之一–Hive概述,Hive是什么”中介绍过,Hive自己维护了一套元数据,用户通过HQL查询时候,Hive首先需要结合元数据,将HQL翻译成MapReduce去执行。
本文介绍一下Hive元数据中重要的一些表结构及用途,以Hive0.13为例。
文章最后面,会以一个示例来全面了解一下,
Spring 3.2.14,4.1.7,4.2.RC2发布
wiselyman
Spring 3
Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。
其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止),后续会继续根据需求和bug发布维护版本。此时,Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。
其中Spring 4.1.7主要包含这些更新内容。