1、浮动 元素 对 父层元素带来的影响
影响:一个元素内如果包含了浮动元素,那么该元素的高度可能会变成0。
原因:浮动元素 脱离了 文档流,理论上讲,就不在父层容器内
解决方案:
1、显示设置父层元素的高度
2、通过overflow:hidden 来撑起父层元素的高度
******************************************************************
1、显示方式
1、块级元素
<div></div>
hn
p
特点:单独占一行
2、内联元素/行内元素
span , b , i , u , s , a
display属性:
改变元素的显示方式 比如:由行内 改变成块级
取值:
1、none
隐藏,让生成的元素没有框
特点:隐藏之后在页面不显示,并且不占据页面空间
2、block
让行内元素 变成 块级元素
使用场合:想显示修改行内元素的宽度和高度的时候,可以将其显示形式设置为 block(块级)
3、inline
将 块级元素 更改成 行内元素
4、inline-block
行内块
特点:本身为行内元素,但是具备块级元素的特点
多个行内块会在同一行内显示,但是可以改变其宽度和高度
使用场合:想改变行内元素的宽度和高度的时候去使用
2、显示效果
属性:visibility
作用:真正实现元素显示 与 隐藏的
取值:
1、visible
默认值,元素可见
2、hidden
隐藏,元素可以隐藏,但是空间依然保留
3、collapse
用在表格上,删除一行和一列时不影响表格的布局
visibility 与 display 的区别
1、visibility 是真正实现元素的 显示与隐藏的
而 display 是改变元素的显示方式的。
2、visibility:hidden ,能够实现元素的隐藏,但是会占据页面空间
display:none ,没有显示方式,能实现元素的隐藏,并且不会占据页面空间
3、visibility取值:hidden,visible,collapse
display取值:none,block,inline,inline-block
3、opacity
透明度
属性:opacity
取值:0 - 1 之间的小数
值越小,越透明
值越大,越不透明
4、vertical-align
属性:vertical-align
取值:top , middle ,bottom ,baseline(基线对齐)
5、cursor
当鼠标放在某个元素上时,可以改变鼠标的显示状态
属性:cursor
值:
default 默认
pointer : 小手
crosshair : +
text: I
wait: 圆圈在转
help: 箭头加问号
**********************************************
1、列表
1、列表项标志
list-style-type
取值:
1、无序列表
none , disc , circle , square
2、有序列表
none , decimal , lower-roman , upper-roman
3、none
2、列表项图像
属性:list-style-image
取值:url(图像的路径)
list-style-type:none;
list-style-image:url(Images/type.png);
3、列表项位置
属性:list-style-position
取值:
outside : 在文本区域之外
inside : 在文本区域之内
4、列表属性(综合)
属性:
list-style:type url() position;
常用值:list-style:none;
5、用法
1、CSS重写
将一些标签的默认样式修改掉
*{
margin:0px;
padding:0px;
list-style:none;
}
2、导航
<ul>
<li>
<h3>图书、音像、数字商品</h3>
</li>
</ul>
2、定位
1、什么是定位
... ...
2、定位方式
1、浮动定位
脱离文档流,不占用页面空间,会靠在包含框的左边或者右边,或者离他最近的浮动元素
2、相对定位、绝对定位、固定定位、[静态定位]
3、定位属性
1、定位方式相关属性
position
取值:
1、static : 默认,静态定位
2、relative : 相对定位
3、absolute : 绝对定位
4、fixed : 固定定位
2、与定位位置相关属性
top
bottom
left
right
以像素为单位的值
3、堆叠顺序
z-index : value;
值越大越靠近用户
4、static
页面中默认定位方式,即文档流定位
5、相对定位
相对于当前元素本身出现的位置而实现定位的一种方式
实现方式:
position:relative;
通过 top bottom left right 来实现位置移动
使用场合:
1、会进行位置的微妙的调整
2、配合着绝对定位使用
6、绝对定位
特点:脱离文档流,不占据页面空间
定位位置:相对于【最近】的【已定位】的【祖先】元素
如果祖先元素没有进行定位,它的位置就相对于最初的包含块(body)
<nav>
<div>
<p>
<span></span>
</p>
</div>
</nav>
已定位:非static , 指 relative、absolute、fixed
实现方式:
position:absolutel
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。
使用场合:
1、弹出菜单的位置
所有的弹出菜单都是绝对定位
7、固定定位
将元素固定在页面上的某一个位置,不随滚动条滚动而发生改变
语法:
position:fixed;
top、left、right、bottom
影响:一个元素内如果包含了浮动元素,那么该元素的高度可能会变成0。
原因:浮动元素 脱离了 文档流,理论上讲,就不在父层容器内
解决方案:
1、显示设置父层元素的高度
2、通过overflow:hidden 来撑起父层元素的高度
******************************************************************
1、显示方式
1、块级元素
<div></div>
hn
p
特点:单独占一行
2、内联元素/行内元素
span , b , i , u , s , a
display属性:
改变元素的显示方式 比如:由行内 改变成块级
取值:
1、none
隐藏,让生成的元素没有框
特点:隐藏之后在页面不显示,并且不占据页面空间
2、block
让行内元素 变成 块级元素
使用场合:想显示修改行内元素的宽度和高度的时候,可以将其显示形式设置为 block(块级)
3、inline
将 块级元素 更改成 行内元素
4、inline-block
行内块
特点:本身为行内元素,但是具备块级元素的特点
多个行内块会在同一行内显示,但是可以改变其宽度和高度
使用场合:想改变行内元素的宽度和高度的时候去使用
2、显示效果
属性:visibility
作用:真正实现元素显示 与 隐藏的
取值:
1、visible
默认值,元素可见
2、hidden
隐藏,元素可以隐藏,但是空间依然保留
3、collapse
用在表格上,删除一行和一列时不影响表格的布局
visibility 与 display 的区别
1、visibility 是真正实现元素的 显示与隐藏的
而 display 是改变元素的显示方式的。
2、visibility:hidden ,能够实现元素的隐藏,但是会占据页面空间
display:none ,没有显示方式,能实现元素的隐藏,并且不会占据页面空间
3、visibility取值:hidden,visible,collapse
display取值:none,block,inline,inline-block
3、opacity
透明度
属性:opacity
取值:0 - 1 之间的小数
值越小,越透明
值越大,越不透明
4、vertical-align
属性:vertical-align
取值:top , middle ,bottom ,baseline(基线对齐)
5、cursor
当鼠标放在某个元素上时,可以改变鼠标的显示状态
属性:cursor
值:
default 默认
pointer : 小手
crosshair : +
text: I
wait: 圆圈在转
help: 箭头加问号
**********************************************
1、列表
1、列表项标志
list-style-type
取值:
1、无序列表
none , disc , circle , square
2、有序列表
none , decimal , lower-roman , upper-roman
3、none
2、列表项图像
属性:list-style-image
取值:url(图像的路径)
list-style-type:none;
list-style-image:url(Images/type.png);
3、列表项位置
属性:list-style-position
取值:
outside : 在文本区域之外
inside : 在文本区域之内
4、列表属性(综合)
属性:
list-style:type url() position;
常用值:list-style:none;
5、用法
1、CSS重写
将一些标签的默认样式修改掉
*{
margin:0px;
padding:0px;
list-style:none;
}
2、导航
<ul>
<li>
<h3>图书、音像、数字商品</h3>
</li>
</ul>
2、定位
1、什么是定位
... ...
2、定位方式
1、浮动定位
脱离文档流,不占用页面空间,会靠在包含框的左边或者右边,或者离他最近的浮动元素
2、相对定位、绝对定位、固定定位、[静态定位]
3、定位属性
1、定位方式相关属性
position
取值:
1、static : 默认,静态定位
2、relative : 相对定位
3、absolute : 绝对定位
4、fixed : 固定定位
2、与定位位置相关属性
top
bottom
left
right
以像素为单位的值
3、堆叠顺序
z-index : value;
值越大越靠近用户
4、static
页面中默认定位方式,即文档流定位
5、相对定位
相对于当前元素本身出现的位置而实现定位的一种方式
实现方式:
position:relative;
通过 top bottom left right 来实现位置移动
使用场合:
1、会进行位置的微妙的调整
2、配合着绝对定位使用
6、绝对定位
特点:脱离文档流,不占据页面空间
定位位置:相对于【最近】的【已定位】的【祖先】元素
如果祖先元素没有进行定位,它的位置就相对于最初的包含块(body)
<nav>
<div>
<p>
<span></span>
</p>
</div>
</nav>
已定位:非static , 指 relative、absolute、fixed
实现方式:
position:absolutel
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。
使用场合:
1、弹出菜单的位置
所有的弹出菜单都是绝对定位
7、固定定位
将元素固定在页面上的某一个位置,不随滚动条滚动而发生改变
语法:
position:fixed;
top、left、right、bottom