浮动
文档流
文档流的简单定义：正常文档流，将窗体自上而下地分成一行一行，块元素 独占一行，相邻行元素在每行中按照从左到右依次排列顺序。
而脱离正常文档流可以将正常显示顺序打乱，比如将最底部的某个div元素抽出来，显示在其他元素前边。
float脱离正常文档流，但不脱离正常文本流。
其他元素会无视它所占据了的区域，直接在它身下布局。
demo1设置float以后
但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
| float属性值 | 样式 |
|---|---|
| left | 元素浮动到其容器的左侧 |
| right | 元素浮动在其容器的右侧 |
| none | 元素不会浮动（将显示在文本中刚出现的位置）。默认值。 |
| inherit | 元素继承其父级的 float 值 |
clear
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
定位
| position属性 | 样式 |
|---|---|
| static | 默认 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 混合定位（滑动鼠标但是位置不变） |
| inherit | 继承父类 |
| z-index | 指定元素的堆栈顺序 |
代码示例：
position: absolute;
top: 10px;
left: 10px;
伪类伪元素
a:link{
color:black;}
a:hover{
color:red;}
a:visted{
color:purple;}
a:active{
color:green;}
link为未点击时的样式，hover为鼠标悬停时的样式，visted为点击过的样式，active为点击的一瞬间的样式。
点击前
鼠标悬停
点击的一瞬间
点击以后
结构伪类选择器：
table tr:nth-child(odd){
color:red;
}
可以对table的odd奇数或者even偶数行进行设定。
还有一些其他的：
::first-line 伪元素用于向文本的首行添加特殊样式。
p::first-line {
color: red;
}
::first-letter 伪元素用于向文本的首字母添加特殊样式。
p::first-letter {
color: red;
}
::before 伪元素可用于在元素内容之前插入一些内容。
h1::before {
content:"before";
}
::after 伪元素可用于在元素内容之后插入一些内容。
h1::after {
content:"after";
}
标签：浮动,定位,伪类,样式,元素,color,点击,文本 来源： https://blog.csdn.net/gwhfamily/article/details/116429979
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。