day10 html5

   day10知识点

元素类型的转换:
display属性:
属性值:
1.block
2.inline
3.none
注:大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)

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

vertical-algin:; 垂直对齐
属性值 top
bottom
middle
baseline

让一个元素在父元素里面左右上下居中。
    1:给父元素添加text-align:center (左右居中)
    2:给当前元素添加
        display:inline-block;
        vertical-align:middle;
    3:在当前元素后面(不要回车),添加一个空的span
        给span设置样式:
            display:inline-block;
            width:0;
            height:100%;
            vertical-align:middle;

元素类型的分类:
块状元素、内联元素、可变元素

元素类型的转换:
    display属性:
        属性值:
            block
            inline
            inline-block
            none
            list-item


行内块元素:input      display为inline-block
img标签:浏览器默认解析的display的值inline

标签的嵌套规则:
    1:尽量让块状元素作为父元素(容器)存在
    2: 内联元素的子元素尽量也是内联元素
    3: p标签中不能出现h1 - h6
    4:p标签 h1 - h6  不能互相嵌套

定位:让元素的位置放生改变。

css定位需要几步:
    1: 让元素知道自己要做位置的变动。
    2:确定谁是参照物
    3:指定固定的坐标

定位属性: position属性:设置或检索元素定位方式。

(如果元素有了position属性,元素就知道自己要做位置的移动了)
position的属性值:(属性值才是告诉元素参照物是谁)

指定坐标:left\right\top\bottom
position的属性值:
    1: position:static 【静态定位】 (默认值:添加和不设置的效果一样的)

    2: position:absolute  【绝对定位】
        a: 绝对定位的参照物:
            已经有定位的父元素为参照物
            如果父元素都没有定位或者没有父元素,以整个文档为参照物。
        b: 绝对定位的特点:
            不占据空间,脱离布局流
发布了21 篇原创文章 · 获赞 0 · 访问量 288

猜你喜欢

转载自blog.csdn.net/jiatinghui/article/details/105151454