WEB前端学习日志第二周 Day5

WEB前端学习日志第二周 Day5

今日总结：通过今天的学习，主要对元素类型的转换，如何让一个元素在父元素里面左右上下居中，定位。不过定位只是浅浅的学习。

元素类型的转换

元素类型的转换：
display属性：
属性值：
block
inline
none

大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)

内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1: 可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inlin-block 能支持vertical-align属性

如何让一个元素在父元素里面左右上下居中

让一个元素在父元素中上下左右居中需要用到vertical-algin属性
vertical-algin:; 垂直对齐。
top（top指的是文字的顶线）
bottom（bottom指的是文字的底线）
middle（middle指的是文字的中线）
baseline（baseline指的是文字的基线）

让一个元素在父元素里面左右上下居中。
1:给父元素添加text-align:center (左右居中)
2:给当前元素添加
display:inline-block;
vertical-align:middle;

3:在当前元素后面（不要回车），添加一个空的span给span设置样式：

display:inline-block;
width:0;
height:100%;
vertical-align:middl
通过制作导航栏来熟悉


最终得出的效果

定位

先简单的说一个问题，把汽车停到停车位分为几步？
1.把车打动
2.找到停车位
3.确定好方位然后停车

这和定位的原理差不多
css定位需要几步：
1: 让元素知道自己要做位置的变动。
2：确定谁是参照物
3：指定固定的坐标
定位属性：
position属性:设置或检索元素定位方式。（如果元素有了position属性，元素就知道自己要做位置的移动了）

position的属性值：（属性值才是告诉元素参照物是谁）

指定坐标：left\right\top\bottom

position的属性值：

1: position:static 【静态定位】 (默认值：添加和不设置的效果一样的)

2: position:absolute 【绝对定位】
a: 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以整个文档为参照物。
b: 绝对定位的特点:
不占据空间,脱离布局流