==========================浮动====================
1、浮动
1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列 ,当前行显示不时,会自动换行
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
4、浮动定位(主要用来解决多个块级元素在一行显示的情况)
1、什么是浮动定位(先飘起来脱离文档流,后左右移动,后面的元素进行补位,下面的位置可用哦,空中是位于同一平面哒,若后面仍有浮动,要分先来后到,不能占据已浮动的位置,红绿蓝块儿的栗子)
如果将元素的定位方式设定为浮动定位的话,那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流,不占据页面空间,其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边,或平级的其他已浮动元素的边缘上
3、浮动元素依然位于父元素之内,并且只会在当前行内浮动
4、浮动定位解决的问题------让多个块级元素在一行内显示
2、属性
属性:float
取值:
1、none
默认值,无浮动定位
2、left
左浮动,让元素停靠在父元素(长为body元素)的左边,或紧挨着左侧已有的浮动元素
3、right
右浮动,让元素停靠在父元素的右边,或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时,那么最后一个子元素将换行显示----其中“老二永远是老二”(也有可能会卡住,红色多一个像素都会卡住后面的色块)
2、元素一旦浮动起来之后,元素的宽度将变成自适应(内容决定宽度),前提:不指定元素宽度的情况下
3、元素一旦浮动起来之后,将变成块级元素,尤其对行内元素影响较大(浮动起来就能改啦,哈哈哈)
块级元素:允许修改尺寸
行内元素:不允许修改尺寸
4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的,会巧妙的避开浮动元素。
!!!记住:是当前行浮动,若是上一行有非浮动元素,则不能跑到上一行去了,人家是环绕哒
6、清除浮动影响
元素浮动起来之后,除了影响自己的位置之外,还会影响后续元素。
清除浮动用于不想受前面的元素所影响的元素,谁受影响给谁设置clear;清理上边儿浮动带来的影响,自己可以继续设置浮动;
属性:clear
取值:
1、none
默认值,不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响,及当前元素不会上前占位,并且左边不允许有浮动元素
3、right
清除该元素右边的浮动元素所带来的影响,及当前元素不会上前占位,并且右边不允许有浮动元素
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流,所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话,那么该元素的高度将变成0
解决方案:
1、直接设置父元素高度
弊端:必须要知道父元素准确高度是多少
2、设置父元素也浮动
弊端:对后续元素会带来位置的影响
3、为父元素设置 overflow 属性(溢出处理)
取值:hidden 或 auto
弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。
4、(最好哒)在父元素中,追加空(里面不写内容,不然会到下一行去)子级块级元素,并设置其clear属性值为 both
===========================显示=============================
2、显示
1、显示方式
1、what
每个元素都有自己的显示方式,显示方式决定了元素的显示特点
2、属性
属性:display
取值:
1、none
不显示元素--隐藏
特点:脱离文档流--不占据页面空间
2、block
像块级元素一样显示元素
场合:将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意:不要块级元素(div/p..)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块:多个元素会在一行内显示,但是允许修改尺寸
场合:将行内元素改变为行内块,以便修改尺寸
2、显示效果
1、元素可见性
属性:visibility
取值:
1、visible
默认值,元素可见
2、hidden
元素不可见,但依然占据页面空间
3、collapse
用在表格元素上,删除一行或一列时不影响整体表格布局
面试:dispaly:none 与 visibility:hidden之间的区别
display:none;脱离文档流,所以不占空间
visibility:hidden;没有脱离文档流,所以元素隐藏,空间保留
2、透明度(整个所有的)
属性:opacity
取值:0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐
属性:vertical-align
作用:
1、设置单元格的内容垂直对齐方式
2、设置 img 或 行内块元素周围(左右两边)的文本 的垂直对齐方式
取值:
top/middle/bottom /baseline:默认值,基线对齐(相对于文本来说,是文本的最后一行)
注意:
基线对齐方式,会将图片扩大3px
3、光标
属性:cursor
取值:
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?
=========================列表===========================================
3、列表
1、列表项标识
属性:list-style-type
取值:
1、none : 无标记
2、disc:
3、circle
4、square
5、... ...
2、列表项图像
属性:list-style-image
取值:url(图像路径)
3、列表项位置
属性:list-style-position
取值:
outside : 默认值,标识位于列表项区域之外,列表的内边距范围内,即若padding设为0则无列表项图像
inside : 标记放在列表项区域之内,不会受padding影响
4、列表属性
属性:list-style
取值:type url position;
常用方式:list-style:none;
5.列表使用场合:导航栏那些,可以纵向排列,也可以横向排列(float)