1. 和其它元素都在一行上。
2. 元素的高度以及顶部和底部边距不可设置。
3. 元素的高度就是他所包含的图片或文字的宽度。
共同点：它们的共同点是都是DOM树中的一个节点。
1.2.定位布局(position属性)
1. 什么是定位布局：
定位的基本思想为，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
2. 定位布局的原理：
css中定位布局基于position属性。
1.在父元素没有设置相对定位或绝对定位的时候，元素相对于根元素html元素进行绝对定位。
2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置相对定位或绝对定位的父元素进行定位。这里离自己最近的父元素定位不是默认的static。
3. 定位布局的生成：
position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))，通过定位属性可以设置一些不规则的布局，使用TLBR(top，left，bottom，right，下同)来调整元素位置。
position的默认值为static，当静态定位时，元素会依据正常的文本流布局。
4. 定位布局的影响：
1. static未脱离文本流，对文本流没有影响
2. relative未脱离文本流，就算有偏移，其在文本流中的位置依然存在
3. fixed、absolute是彻底脱离文本流的，它不会影响其他元素的布局
1.3浮动布局（float属性）
1. 什么是浮动布局：
在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2. 浮动布局的原理：
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
3. 浮动的生成：
使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
4. 浮动的影响：
1. 对附近的元素布局造成改变，使得布局混乱；
2. 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征；
3. 因为浮动元素脱离了普通流，会出现一种高度塌陷的现象：原来的父容器高度是当前子元素撑开的，但是当子元素浮动后，脱离普通流，那父容器的高度就会坍塌。
5. 清除浮动 clear：both
使用clear元素清除外面浮动，解决外面元素浮动对自己的影响
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离
- 闭合浮动
常用属性：overflow：hidden；display：table
当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。
浮动没有闭合：
没有闭合元素，父元素的高度为0
代码示例：
显示结果：
结论：子元素脱离文本流，不占有文本的高度，导致父元素高度塌陷，所以背景设置的黄色没有显示。
推荐闭合方式
使用伪元素 :after，用元素闭合浮动。
代码示例：
显示结果：
结论： 给box1添加上clearfix 这class，可以清除浮动。
display:block 使生成的元素以块级元素显示,占满剩余空间；
clear:both 清除外部元素的浮动，控制子元素高度对父元素的影响；
闭合浮动之后：父元素的高度为21px（chrome默认字体行高），显示黄色背景。
二、Position属性概况
一．Position各属性的理解
1.1 static的理解和用法
static定位，也叫静态定位，默认值。是html元素默认的定位方式，它遵循正常的文本流，占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
代码示例：
显示结果：
结论：值为static的情况下，元素相较于它的正常位置没有任何改变。
1.2 fixed的理解和用法
fixed定位，又叫固定定位。它脱离了文本流，并且能够根据top、right、left、bottom属性进行定位。它是根据窗口为原点进行偏移定位的，不会随滚动条的滚动而进行偏移。
代码示例：
显示结果：
结论：
1. 值为fixed的情况下，元素相较于浏览器窗口偏移了距离头部50px，距离左边50px;
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
1.3 relative的理解和用法
relative定位，又叫相对定位，遵循正常的文本流，生成相对定位的元素，相对于其正常位置进行定位。
top、right、left、bottom属性是生效的。
代码示例：
显示结果：
1.4 absolute的理解和用法
absolute定位，也叫绝对定位，脱离文本流，只能根据祖先类元素(父类以上)进行定位，而且这个祖先类还必须是以position属性非static方式定位的。
使用绝对定位，它会从父类开始找起，寻找以position属性非static方式定位的祖先类元素，直到标签为止。
代码示例：
显示结果：
1．值为absolute的情况下，元素相较于<html>根元素偏移了距离头部50px，距离左边50px;
结论：
- 值为relative的情况下，元素相较于原本位置偏移了距离头部50px，距离左边50px；
- 普通文本流为它保留了位置；
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
1.5 inherit的理解和用法
inherit 关键字指定一个属性应从父元素继承它的值。
inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。所以，position也有inherit值
代码示例：
显示结果：
结论：
1．值为inherit的情况下，子元素继承了父元素absolute的值，相较于父元素元素偏移了距离头部50px，距离左边50px;
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
二、属性值是否受TRBL影响
思路：给每个属性值的top,right,bottom,left都设置成50px；看页面会怎样渲染，由此看出TRBL是否生效。
Static
代码示例：
显示结果：
结论：position的值为static时，TRBL都不生效。
Fixed
代码示例：
显示结果：
结论：position的值为fixed时，TRBL都生效。
Fixed定位垂直水平居中的
Relative
代码示例：
显示结果：
结论：position的值为relative时，TRBL只有TL生效；
如果top和bottom同时存在，那么只有top生效；
如果left和right同时存在，那么只有left生效；
Absolute
代码示例：
显示结果：
结论：position的值为absolute时，TRBL都生效。
三．position属性各值的特点
static
1. 根据文本流定位；如果该标签是页面最外层标签，则根据进行定位
2. 不可以设置定位属性，即不受TRBL，z-index影响；
3. 不脱离文本流；不影响其他元素位置；
4. 不会把行内元素变为行内块元素
Fixed
1. 以浏览器窗口为原点进行定位；
2. 可以设置定位属性，受TRBL, z-index影响；会把行内元素变为块状元素
3. 脱离文本流；不影响其他元素位置；
4. 会把行内元素变为行内块元素
Relative
1. 根据元素原本位置进行定位；如果该标签是页面最外层标签，则根据进行定位
2. 可以设置定位属性，即受TRBL, z-index影响；如果top和bottom同时存在，那么只有top生效；如果left和right同时存在，那么只有left生效
3. 未脱离文本流，但其在文本流中的位置依然存在；不影响其他元素位置；
4．不会把行内元素变为行内块元素
Absolute
1. 从父元素开始找起，寻找以position属性非static方式定位的祖先类元素，如果父元素没有position属性，则根据口进行定位;
2. 可以设置定位属性，即受TRBL, z-index影响
3. 脱离文本流；不影响其他元素位置；
4. 会把行内元素变为行内块元素
四：主要元素之间的关系与异同
relative和absolute的关系
这两个元素经常搭配使用：子绝父相。父元素相对定位，子元素绝对定位，然后设置子元素的TRBL值。
不同点：
1. relative未脱离文本流，但其在文本流中的位置依然存在；absolute脱离文本流，但其在正常流中的位置不在存在。
2. relative定位方式总是相对于文本流中最近的父元素，无论其父元素是何种定位方式；
absolute定位方式是.从父元素开始找起，寻找以position属性非static方式定位的祖先类元素，如果父元素没有position属性，则根据口进行定位;
Fixed和absolute的异同
相同点：
1. 脱离文本流，不占文本流的位置，不影响其他元素的显示；
2. 会将行内元素转换为行内块状元素，将display置为inline-block
3. 覆盖非定位文档元素
4. 没有滚动条的情况下没有差异
不同点：
1. fixed基于浏览器窗口定位；absolute基于非static值的父元素或定位
2. 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
五. z-index属性介绍
z-index，又称为对象的层叠顺序。它的特性分为如下4点：
- 同级元素间的堆叠，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面；
示例代码：
显示结果：
结论：红色块的层高为1，黄色块的层高为2，蓝色块的层高为3，红色在最下，黄色在中间，蓝色在最上面；所以同级元素之间，整数值越大，则被层叠在越上面。
- 两个同级元素的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
示例代码：
显示结果：
结论：红色块和黄色块的层高都为1，黄色块显示在红色块的上面；所以依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
- 父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
代码示例：
显示结果：
结论：红色是父元素，黄色是子元素，虽然红色的层高为100，黄色层高为1，黄色还是显示在红色元素的上方，由此可见，父子关系是用z-index来设定层叠顺序是无效的。
- 使用static 定位或无position定位的元素z-index属性是无效的。
代码示例：
显示结果：
结论：红色元素和黄色元素的同级的，红色元素层高为100，黄色元素为1，但黄色元素还是显示在红色
元素的上方，由此可见，使用static 定位，层高是无效的。
本章总结：
对本人而言，加深了position各值之间的定位的理解，熟悉专业术语，增强了对各属性理解的表达能力。
为快速选择最合适的定位模式，显示出最好的效果奠定了坚实的理论基础。
一．float各属性的理解
1.none
默认值。元素不浮动，并会显示在其在文本中出现的位置。
代码示例：
显示结果：
结论：按照正常的文本流显示。
2.left
元素向左移动
代码示例：
显示结果：
结论：元素脱离文本流向左移动；li标签按照顺序依次显示；ul的高度塌陷，所以黄色背景没有显示。
虽然float:left是脱离文本流的，但不是绝对脱离的，所以会导致文本环绕它；常见于一些文章中图片和文字的环绕效果排版，这也是这个属性设计的初衷。
代码示例：
显示结果：
3.right
元素向右浮动。
代码示例：
显示结果：
结论：元素脱离文本流向右浮动；li标签按照倒序依次显示；ul的高度塌陷，所以黄色背景没有显示。
跟float:left一样，float:right也是脱离文本流的，但也不是绝对脱离的，所以会导致文本环绕它；
代码示例：
显示结果：
4.inherit
规定应该从父元素继承 float 属性的值。
没有设置float属性时
代码示例：
显示结果：
结论：按照正常的文本流显示。
父类设置了float:left值时
代码示例：
显示结果：
结论：float会把元素设置为行内块，所以ul和li都被渲染成行内块显示，ul会随li的宽高变化而变化;
li标签按顺序依次显示。
父类设置了float:right值时
代码示例：
显示结果：
结论：float会把元素设置为行内块，所以ul和li都被渲染成行内块显示，ul会随li的宽高变化而变化;li标签按倒序依次显示。
float的破坏性
float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素
四、Position 和 float 的结合使用
1.static与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：static时，距离左边50px没有生效，float:left把块状元素转换成了行内块元素；
2.fixed与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：fixed时，有无float属性显示的结果相同，由此可见，fixed定位时，float设定值是无效的。
3. relative与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position:relative时，无float属性时元素的按块状的规则显示的；
有float属性时元素是按行内块的规则显示的
4. absolute与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：absolute时， 有无float属性显示的结果相同，由此可见，absolute定位时，float设定值是无效的。
五、定位布局和浮动布局的异同
相同：
1. 浮动和绝对定位/固定定位都是脱离文本流；
2. float和absolute/fixed都能引起父元素的高度塌陷
3. fixed和absolute, float:left/right,都可以将行内元素转换成块状元素；
不同：
1. 绝对定位/固定定位是彻底脱离文本流，不会影响其他元素的布局；浮动布局是会影响的，会导致文本环绕它。
2. float 的父元素高度塌陷是有办法清除的；absolute/fixed是完全脱离文本流，这种情况的高度塌陷是没办法清除的；
3. 绝对定位/固定定位时，文本会直接覆盖普通文本流的元素；float布局时，其他元素会环绕显示，不会遮挡其他元素；
你可能感兴趣的:(css,静态页面)
- JMETER+ANT+JENKINS持续集成并生成html报告
qq_40447533
jmeter持续集成
1.下载ant2.配置build.xml文件3.在本地运行antrun4.部署到jenkins上5.在jenkins上查看测试报告jenkins-HTMLreport没有css样式问题注;如果运行后还是没有css样式，清理缓存试试对于测试报告来说，除了内容的简洁精炼，样式的美观也很重要。常用的做法是，采用HTML格式的文档，并搭配CSS和JS，实现自定义的样式和动画效果（例如展开、折叠等）。在Je
- 健身运动俱乐部主题网页设计制作 | html网页模板源码
学博星辰
网页成品htmlcssjavascriptjquery前端bootstrap
文章目录网站主题网站描述网站介绍网站演示学习理念更多干货一、网站主题健身网站、健身房网站、健身网页、健身房网页、健身网页、团操运动网页、健身俱乐部html网页、html健身运动主题网页、html网页设计与制作、学生期末网页大作业二、网站描述编码：A04、页数：6页，技术：html+css+js健身运动是一项通过徒手或利用各种器械，运用专门的动作方式和方法进行锻炼，以发达肌肉、增长体力、改善形体和陶
- 基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件
练练科技
java课程设计mysql
基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
- css居中大全
阿龙哟
css居中大全Horizontally水平居中内联元素text-align:center;块级元素margin:0auto;多个块级元素display:flex;justify-content:center;Vertically垂直居中内联元素中单行文字给定相同paddingpadding-top:30px;padding-bottom:30px;文字垂直居中height:100px;line-h
- webpack 深入浅出分析之style-loader、css-loader、配置sass与less
城南花开ze
WebpackViteGulpwebpackcss-loaderstyle-loader配置sass与less
一、webpack打包style-loader创建一个空文件夹，通过npminit初始化创建package.json文件，通过npminstallwebpack--save-dev命令下载webpack，通过npminstallstyle-loadercss-loader--save-dev命令下载style-loader和css-loader。创建css文件夹，在里面创建base.css和com
- Css-loader安装失败,webpack打包css文件时，确认css-loader和style-loader安装正确，import路径都正确，打包反复报错...
Malong Wu
Css-loader安装失败
webpack打包css文件时，确认css-loader和style-loader都安装正确，且import路径都正确，打包反复报错：ERRORin./src/assets/styles/test.css1:0Moduleparsefailed:Unexpectedtoken(1:0)Youmayneedanappropriateloadertohandlethisfiletype,current
- java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署
鸿源网络
数据库mysqljava
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
- 分享JavaScript中直接调用CSS中的类名
奔跑的呱呱牛
javascriptcss开发语言
分享JavaScript中直接调用CSS中的类名在现代的JavaScript框架（如React、Vue）中，使用CSS模块（CSSModules）是一种非常流行的方式。.module.css文件扩展名代表的是CSS模块，它与普通的CSS文件不同，能够解决样式全局污染的问题，并且实现更好的样式隔离。为什么要使用.module.css作用域隔离：传统的CSS文件中的类名是全局的，这意味着如果多个组件或
- CSS基本语法结构
nice66660
css前端开发语言javaidea算法数据结构
1.CSS基本语法结构文章目录1.CSS基本语法结构2.HTML中引入CSS样式2.1行内样式2.2内部样式表2.3外部样式表2.3.1链接式2.3.2导入式2.4CSS基本选择器2.4.1标签选择器2.4.2类选择器2.4.3ID选择器3.CSS的高级选择器3.1层次选择器3.1.1后代选择器3.1.2子代选择器3.1.3相邻兄弟选择器3.1.4通用兄弟选择器3.2结构伪类选择器3.3属性选择器
- 基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
源新网络
java开发语言
基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
- CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸魚
WEB前端javascript前端csshtml多列布局css3
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。一、CSS多列布局概述CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括column-count、column-width和column-gap，这些属性可以单独或结合使用，以实现所需的列布局效果。多列布局的基本属性column-count：指定列的数量。例如，column-
- css-loader/style-loader/less-loader/sass-loader/postcss-loader各有什么作用，一次性说明白
iWangsd
css
大家都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader，但这些loader在其中起到什么作用呢？本篇主要阐述这些loader在打包中所扮演的角色。概述1、css-loader:加载.css文件的loader，会对@import和url()进行处理2、style-loader:
- uniapp 小程序样式兼容
zpjing~.~
uni-app小程序前端
一、遇到的问题使用uniapp一起开发h5和小程序版本，在h5上样式是正常的，但是小程序里样式未生效二、遇到的情况1、*标签经过小程序编译后会变成label标签，css中span样式的位置label标签*标签位置添加class，class在h5和小程序中都兼容2、ulli*标签标签经过小程序编译后会变成view标签*标签位置添加class，class在h5和小程序中都兼容3、引用子组件div中几个
- hr标签和注释的总结
Rashore
web零基础学习htmlcsshtml5
hr标签的定义与使用说明定义以及使用说明标签定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。元素被用来分隔HTML页面中的内容（或者定义一个变化）。实例hr标签的使用HTMLHTML是用于描述web页面的一种语言。CSSCSS定义如何显示HTML元素。html中注释的使用定义注释标签用来在源文档中插入注释。注释不会在浏览器中显示。使用范围我们可使用注释对您的代码进行解释，这样做
- jQuery选择器
VaporGas
前端jquery前端javascript学习
jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
- springboot-jQery-增删改查分页
浩瀚无疆~
java
主要写controller层和html页面因为其余层都是用EasyCode生成的目录一、controller层二、static静态页面层1.分页查询--删除2.插入3.修改总结一、controller层packagecn.gsm.demo01.controller;importcn.gsm.demo01.entity.Student;importcn.gsm.demo01.service.Stud
- Java架构师学习路线
网络全息测量
心得体会
(1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
- 使用Electron读取本地文件
ch_s_t
前端开发electronjavascript前端
Electron原来叫AtomShell,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。一运行简单
- 块级标签不自动换行的解决方式
搜捕鸟了
HTML&CSS前端csshtml
关键点：任何固定了长度的块级元素里，长单词和长数字不自动换行，中文字符会自动换行效果如下：https://codepen.io/xiao_5/pen/oNQZOpZ解决方案：给块级元素添加word-wrap:break-word;或word-break:break-all;样式。扩展知识点：CSS属性word-break，用于控制文本在换行时的断字规则，参考链接CSS属性word-wrap，允许长
- css 个人喜欢的样式 速查笔记
waterHBO
css笔记前端
起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
- div和textarea中英文和数字不换行解决方案
k_t_feng
网页前端
设置div的css：word-wrap:break-word;word-break:break-all;解释：word-wrap:break-word;强制换行以单词为分解word-break:break-all;强制换行以最后一个单词，会强制拆分单词
- html animation 属性,css3学习--css3动画详解一(animation属性）
蜗牛老湿
htmlanimation属性
***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
- css3动画延迟运行 animation-delay
努力，加油，奋斗
笔记
1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
- CSS接入的四种方式
本来无一物_f1f2
1.内联内联式是将CSS样式集中写在网页的标签对的标签对中。格式如下：...此处写CSS样式缺点是对于一个包含很多网页的网站，在每个网页中使用内联式，进行修改样式时非常麻烦。单一网页可以考虑使用内联式。2.内嵌具体表现形式3.外联也是将一个.css文件引入到HTML文件中，在网页的标签对中使用标记来引入外部样式表文件，使用语法如下：4.链接式在css文件中@importurl(./b.css);总
- CSS前端经典面试题及解析——小白入门必备
2301_82243710
程序员前端css
12.如何实现一个使用非标准字体的网页设计？使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从DOM中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。例如，对于形如
- 前端基础面试题·第二篇——CSS（其一）
DT——
前端面试前端css
1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的
- 前端基础面试题·第二篇——CSS（其二）
DT——
前端面试前端css
1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
- Css——媒体查询
一只漫步前行的羊
csscss媒体前端
@mediamediatypewhere(mediafeature){/*CSS样式*/}属性备注mediatype媒体类型：screen（电脑屏幕、平板电脑、智能手机）、print（打印预览）、all（所有设备）where条件：and（表示可以将多个媒体特性连接到一起，相当于“且”的意思）、not（表示排除某个媒体类型，相当于“非”的意思）、only（表示指定某个特定的媒体类型）mediafea
- notepad++软件介绍（含安装包）
LQS2020
notepad++
Notepad++是一款开源的文本编辑器，主要用于编程和代码编辑。它是一个功能强大的替代品，常常被用来替代Windows系统自带的记事本。Notepad++win系统免费下载地址以下是Notepad++的一些主要特点和功能：多语言支持：Notepad++支持多种编程语言，包括Python、JavaScript、HTML、CSS、C++、Java等。它能够根据文件类型自动高亮显示语法，使代码更加易读
- html字体如何设置渐变,CSS 实现文字渐变色
甄公子
html字体如何设置渐变
CSS实现文字渐变，有下面两种方法：1.background属性.text-gradient{background-image:linear-gradient(toright,orange,purple);-webkit-background-clip:text;color:transparent;font-size:30px;}文字渐变效果如下：实现原理：background-image属性为该
- html页面js获取参数值
0624chenhong
html
1.js获取参数值js
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = windo
- MongoDB 在多线程高并发下的问题
BigCat2013
mongodbDB高并发重复数据
最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫 展，重复去看 MongoDB 的 API , 终于有了新发现 ：
com.mongodb.DB 这个类有
- c++ 用类模版实现链表(c++语言程序设计第四版示例代码)
CrazyMizzz
数据结构C++
#include<iostream>
#include<cassert>
using namespace std;
template<class T>
class Node
{
private:
Node<T> * next;
public:
T data;
- 最近情况
麦田的设计者
感慨考试生活
在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。
- linux系统中用pkill踢出在线登录用户
被触发
linux
由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户
1/#who 查出当前有那些终端登录（用 w 命令更详细）
# who
root pts/0 2010-10-28 09:36 (192
- 仿QQ聊天第二版
肆无忌惮_
qq
在第一版之上的改进内容:
第一版链接:
http://479001499.iteye.com/admin/blogs/2100893
用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题.
增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑.
信息修改后上传至服务器再告诉所有用户,自己的窗口
- java读取配置文件
知了ing
1，java读取.properties配置文件
InputStream in;
try {
in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径
Properties p = new Properties()
- __attribute__ 你知多少？
矮蛋蛋
C++gcc
原文地址:
http://www.cnblogs.com/astwish/p/3460618.html
GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。
__attribute__ 书写特征是：
- jsoup使用笔记
alleni123
java爬虫JSoup
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.7.3</version>
</dependency>
2014/08/28
今天遇到这种形式，
- JAVA中的集合 Collectio 和Map的简单使用及方法
百合不是茶
listmapset
List ,set ,map的使用方法和区别
java容器类类库的用途是保存对象，并将其分为两个概念：
Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素 ，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
- 杀LINUX的JOB进程
bijian1013
linuxunix
今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉
系统环境：
ORACLE 10G
Linux操作系统
操作步骤如下：
第一步.查询出来那个job在运行，找个对应的SID字段
select * from dba_jobs_running--找到job对应的sid
&n
- Spring AOP详解
bijian1013
javaspringAOP
最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。
1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
- [Gson六]Gson类型适配器(TypeAdapter)
bit1129
Adapter
TypeAdapter的使用动机
Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。
以Date为例，在序列化和反序列化时，Gson默认使用java.
- 【spark八十七】给定Driver Program， 如何判断哪些代码在Driver运行，哪些代码在Worker上执行
bit1129
driver
Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分
作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。
计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务
- nginx 经验总结
ronin47
nginx 总结
深感nginx的强大，只学了皮毛，把学下的记录。
获取Header 信息，一般是以$http_XX（ＸＸ是小写）
获取body,通过接口，再展开，根据Ｋ取Ｖ
获取uri,以$arg_XX
&n
- 轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点
bylijinnan
数组
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class ExoWeb {
public static void main(String[] args) {
ExoWeb ew=new ExoWeb();
System.out.pri
- Netty源码学习-Java-NIO-Reactor
bylijinnan
java多线程netty
Netty里面采用了NIO-based Reactor Pattern
了解这个模式对学习Netty非常有帮助
参考以下两篇文章：
http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html
http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf
- AOP通俗理解
cngolon
springAOP
1.我所知道的aop 初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和 我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而 已。 2.为什么用aop&nb
- cursor variable 实例
ctrain
variable
create or replace procedure proc_test01
as
type emp_row is record(
empno emp.empno%type,
ename emp.ename%type,
job emp.job%type,
mgr emp.mgr%type,
hiberdate emp.hiredate%type,
sal emp.sal%t
- shell报bash: service: command not found解决方法
daizj
linuxshellservicejps
今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：
脚本报错如下：
./olap_quick_intall.sh: line 57: service: command not found
./olap_quick_intall.sh: line 59
- 40个迹象表明你还是PHP菜鸟
dcj3sjt126com
设计模式PHP正则表达式oop
你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准 ，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
- Android逐帧动画的实现
dcj3sjt126com
android
一、代码实现：
private ImageView iv;
private AnimationDrawable ad;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout
- java远程调用linux的命令或者脚本
eksliang
linuxganymed-ssh2
转载请出自出处：
http://eksliang.iteye.com/blog/2105862
Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)
使用步骤如下：
1.导包
官网下载:
http://www.ganymed.ethz.ch/ssh2/
ma
- adb端口被占用问题
gqdy365
adb
最近重新安装的电脑，配置了新环境，老是出现：
adb server is out of date. killing...
ADB server didn't ACK
* failed to start daemon *
百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。
一个比较彻底的解决办法就是修改
- ASP.NET使用FileUpload上传文件
hvt
.netC#hovertreeasp.netwebform
前台代码：
<asp:FileUpload ID="fuKeleyi" runat="server" />
<asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
- 代码之谜（四）- 浮点数（从惊讶到思考）
justjavac
浮点数精度代码之谜IEEE
在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说， 一点都不简单。
单单是说明 IEEE浮点数 就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。 一次面试
记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试， 多年以后，他已经称为了一名很出色的
- 数据结构随记_1
lx.asymmetric
数据结构笔记
第一章
1.数据结构包括数据的
逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是
顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种，分别是
查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：
输入、输出、可行性、确定性和有穷性。 5.算法分析的
- linux的会话和进程组
网络接口
linux
会话： 一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？ 先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
- 二维数组 元素的连续求解
1140566087
二维数组ACM
import java.util.HashMap;
public class Title {
public static void main(String[] args){
f();
}
// 二位数组的应用
//12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。
public static void f(){
- 也谈什么时候Java比C++快
windshome
javaC++
刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。
你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？
我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C
