900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > div层级结构 – CSS – 前端 css ul 点样式

div层级结构 – CSS – 前端 css ul 点样式

时间:2019-09-27 06:06:46

相关推荐

div层级结构 – CSS – 前端 css ul 点样式

1、定位

定位:

1、普通流定位

普通流,又称为文档流

块级元素:从上到下一个一个的排列

行内元素:一行内从左到右的排列

2、浮动定位

1、什么是浮动定位

将元素排除在普通流之外,即脱离文档流

浮动元素不会占据页面空间

浮动元素会放置在"包含框"的左边或右边

浮动元素依旧位于包含框之内

浮动元素可以向左或向右浮动,直到碰见包含框的边缘或另一个已浮动的元素框为止

2、特点

1、浮动元素边缘不会超过其父元素的边缘

2、浮动元素不会重叠

3、浮动只能左右浮动,不会上下浮动

注意:非块级元素浮动的话,那么将会变成块级元素,允许修改 width 和 height

3、处理问题

1、让块级元素在同一行内显示

2、修改行内元素的 width 和 height

4、浮动属性

属性:float

取值:

none

left

right

清除浮动所带来的影响:

属性:clear

取值:left

right

both

5、子级元素的浮动,为父层元素所带来的影响

如果一个元素的所有子级内容都是浮动的,那么它的高度会变成 0

解决方案

1、设置父容器高度

2、设置父元素的 overflow:hidden;

3、在父元素中,增加一个空元素,添加clear:both;

2、显示方式

1、display

none:生成元素没有框,不占据页面空间,隐藏

block:按块级显示

inline:按行内方式显示

inline-block:行内块,所有的元素在一行内显示,允许修改width 和 height

使用场合:

1、控制元素的显示与隐藏

隐藏:display:none;

显示:

块级 :display:block

行内 :display:inline

2、将行内元素变成块级 或 行内块

目的:修改行内元素的宽和高

2、显示效果

1、visibility

可见性

取值:

visible :默认值,可见的

hidden :元素不可见,占据页面空间

collapse :用在表格上

问题:visibility:hidden 与 display:none的区别

2、opacity

透明度

取值:0 – 1

opacity:0.5;

3、vertical-align

垂直方向对齐

td

img

取值:

baseline : 默认,基线对齐

top : 顶部对齐

bottom :底部对齐

middle :居中对齐

放在img 上,控制的是 img 左右两端文本的垂直对齐方式

4、光标

改变鼠标的显示效果

属性:cursor

取值:

default

pointer :小手

crosshair :+

text : I

wait : 等待

help : ?

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。