HTML&&CSS复习（五）

CSS position 相对定位和绝对定位

position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

position:absolute;

（绝对定位 脱离原来位置进行定位 相对于最近父级进行定位 如果没有那么相对于文档进行定位，元素设置此属性会脱离文档流，如果设置偏移量，会影响其他元素的位置定位）

（body有默认的margin 8px可以用*{margin:0;}清除）

position：relative；（相对定位 保留原来位置进行定位 相对于原来的位置进行定位，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局）

position：fixed；元素位置相对于浏览器窗口是固定的，即使窗口滚动也不会移动。fixed定位使元素脱离文档流，因此不占据空间。fixed定位元素会和其他元素重叠。

Position:static;默认值，没有定位。元素出现在正常的流中（忽略top、bottom、right、left、z-index声明）

居中

相对于文档居中

div{

position:absolute;

left：50%;

top:50%;

width:100px;

height:100px;

background-color:red;

margin-left:-50px;

margin-top:-50px;

}

相当于窗口居中

div{

position:fixed;

left：50%;

top:50%;

width:100px;

height:100px;

background-color:red;

margin-left:-50px;

margin-top:-50px;

}

vertical-align: 1px/middle;（垂直对齐）

效果实现

position +z-index:0; 覆盖层

圆环

div{

width:100px;

height:100px;

border:10px solid black;

border-radius:50%（圆角）

}

并列

<div  class=”right”></div>

<div  class=”left”></div>

*{

margin:0;

 padding:0;

}

.right{

position:absolute;

right:0;

width:100px;

height100px;

background-color:#fcc;

0pacity:0.5;

}

.left{

margin-right:100px;

height:100px;

background-color:#123;

}

溢出容器打点展示

1.单行文本

2.多行文字

操作步骤：

1）单行文本--三步：

让文本失去换行的功能：white-space：nowrap;

超出部分隐藏：overflow：hidden;

溢出部分文本打点展示：text-overflow：ellipsis;

2）多行文本

一般不做技术性打点，做多行截断处理。只用text-overflow：ellipsis；

bfc解决margin塌陷（设置这些属性可以解决margin塌陷）

1、overflow: hidden;（父级）

2、display: inline-block;

3、position: absolute;

float:left/right;浮动模型

浮动元素产生浮动流的元素，块级元素看不到他们。产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素

clear：both;清除周围浮动流  (使用时必须是块级元素 display:block;)在伪元素中使用

伪元素 （可当作正常元素使用  行级元素）

伪元素

::before 该伪元素定义在元素之前添加内容
::after 该伪元素定义在元素之后添加内容

::first-letter 选择元素的首字母。

::first-line  选择元素的首行。

::selection 选择用户选择的元素部分。

网页由哪几部分组成：结构html  样式css  行为js

单标签<br>  <hr>  <command>   <meta>

标签规则

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

p标签中不能套块级元素

a标签中不能套a标签

凡是有inline 元素都有文本特点。

设置position: absolute;   float:left/right;  转化为display: inline-block; （可设置宽高）