IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > css基本语法-显示、定位的介绍(七)

css基本语法-显示、定位的介绍(七)

时间:2017-01-23 09:05来源:原创 作者:恪己 点击:
一、显示 1、显示方式 每个元素都有自己的显示方式,来决定元素在页面中到底该如何显示 块级 :每个元素独占一行 -- 块框 行内 :多个元素一行内显示 -- 行内框 (1)、语法 属性
一、显示
1、显示方式
每个元素都有自己的显示方式,来决定元素在页面中到底该如何显示
块级 :每个元素独占一行 --> 块框
行内 :多个元素一行内显示  --> 行内框
(1)、语法
属性
display
取值
1)、none
没有显示方式,即不显示,隐藏
脱离文档流
常用场合:隐藏页面的元素。
2)、block
让元素显示的和块级一样
常用场合:将行内元素 改变成 块级元素,以便于去修改元素的尺寸。
3)、inline
让元素显示的和行内元素一样
注意:不要将块级元素改变成行内元素。
4)、inline-block
让元素显示的和行内块元素一样
行内块:一行内允许显示多个行内块元素,而且允许修改宽和高。
5)、table
让元素表现的和table一样
尺寸自适应,独占一行
2、显示效果
(1)、隐藏性
属性:visibility
取值:
1)、visible
默认值,元素可见
2)、hidden
元素不可见,但是依然占据空间
3)、collapse
用在表格元素上,删除一行或一列,不影响表格整个布局
解释 visibility:hidden 与 display:none 区别
display:none : 脱离文档流,所以不占据页面空间
visibility:hidden : 隐藏,但是元素并未脱离文档流,所以东西看不到了,空间还在!
(2)、透明度
属性:opacity
作用:控制元素的透明度
取值:0~1之间的数字
从0.0(完全透明)到1.0(完全不透明)
(3)、文本垂直对齐方式
属性:vertical-align
作用:
*设置单元内容的垂直对齐方式
*行内块元素或图片的垂直对齐方式
指定 行内块元素或图片元素两边的文本 相对于他们的 垂直对齐方式
取值:
*baseline
默认,基线对齐
文本基线:最后一行文本的底部
*top
*middle
*bottom
 注意:对于图像来讲,可以设置 vertical-align为 非 baseline 以外的其他值来解决高度多 3px 的问题。
3、光标
属性:cursor
取值:
*default
*pointer 小手
*crosshair +
*text I
*wait 等待
*help 帮助
二、列表
1、列表项标志
属性:list-style-type
取值:
none :无标记
disc :
circle :
square :
2、列表项图像
属性:list-style-image
取值:url(图像URL);
3、列表项位置
属性:list-style-positioin
取值:
*outside:标志位于文本区域之外,默认值
*inside:标志位于文本区域之内
4、列表属性
属性:list-style
取值:type url() position; 
常用方式:list-style:none;
三、定位
1、定位概述
(1)、什么是定位
(2)、定位分类
普通流定位
浮动定位 
相对定位
绝对定位
固定定位
(3)、定位属性
1)、position
作用:指定元素的定位方式
取值:
static : 静态,默认方式
relative : 相对定位
absolute : 绝对定位
fixed : 固定定位
注意:当元素定位方式为 relative/absolute/fixed 的时候,我们称元素为 "已定位元素"
2)、偏移属性
top,bottom,left,right
控制 元素位置的移动方向和距离
3)、z-index
堆叠顺序
2、定位方式
(1)、相对定位
1)、什么是相对定位(特点)
元素会相对于它原来的位置偏移某个距离
配合着 偏移属性 改变元素的位置
2)、属性&值
position:relative;
top/bottom/left/right : 改变元素位置
3)、使用场合
1、位置的微调
(2)、绝对定位
1)、什么是绝对定位(特点)
*脱离文档流-不占据页面空间
*绝对定位元素的位置初始化
绝对定位元素会相对于最近的已定位的祖先元素 实现位置初始化
已定位:relative/absolute/fixed
祖先元素:
 
如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(body,html)实现初始化
 
<div id="d1">
<div id="d2">
<span></span>
</div>
</div>
2)、语法
position:absolute;
通过 top/bottom/left/right 实现位置移动和初始化
3)、特殊注意问题
*对于margin的处理
margin可以使用,但是auto无效
margin的值和位置变化值是共享的。

     

------分隔线----------------------------
栏目列表
推荐内容