html-day07垂直对齐&定位

简介: html-day07垂直对齐&定位

html-day07垂直对齐&定位


1.垂直对齐:只有行内块元素可以使用该属性


         

2.定位

概念:将一个元素放在指定的位置上。特指position.  [将a强行放在b身上]
语法:
    position:定位方式;
    left:*px; | right:*px;
    top:*px; | bottom:*px;
1.定位方式
    1.static静态定位。【默认值】
    2.fixed固定定位:基于浏览器当前屏进行定位。
        盒子完全居中于未知大小的盒子【面试题】
            法1.
                position:fixed;
                top:50%;
                left:50%;
                margin-top:负盒子高度的一半;
                margin-left:负盒子宽度的一半;
           法 2.
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    3.relative相对定位:基于元素本身的位置进行定位.不会脱离文档流
    4.absolute绝对定位:基于最近的被设置非静态定位的上级元素进行定位,如果没有,就基于浏览器第一屏进行定位。
        应用:子绝父相。
    注意:fixed和absolute都会脱离文档流!

2.锚点链接

<div id='id名'>要跳转到的区域内容</div>
<a href='#要跳转区域的id名'>链接提示内容</a>

3 img图片和背景图片的选用:

        数据从数据库来,经常更换,使用img [产品图。广告图]
        是页面结构的一部分,使用img  [logo]
        精灵图用背景图。
相关文章
|
6天前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
10 0
|
6天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
10 1
|
6天前
|
前端开发 容器
css中元素水平居中的方式
css中元素水平居中的方式
50 0
|
7月前
HTML去除横向滚动条
HTML去除横向滚动条
24 0
|
7月前
|
前端开发
css如何让实现一个元素在网页中垂直水平居中
css如何让实现一个元素在网页中垂直水平居中
26 0
|
8月前
|
前端开发
HTML table 表格内容垂直对齐、边框颜色、标题
HTML table 表格内容垂直对齐、边框颜色、标题
32 0
|
11月前
|
前端开发
css给超出内容设置滚动条和去除滚动条显示:
css给超出内容设置滚动条和去除滚动条显示:
140 0
HTML中图片和文字按照上下排列并且水平居中显示
HTML中图片和文字按照上下排列并且水平居中显示
246 0
HTML5-11(标签水平和垂直居中)
HTML5-11(标签水平和垂直居中)
87 0
HTML5-11(标签水平和垂直居中)
|
前端开发 容器
关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)
关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)
103 0
关于html元素Css样式设置的一点心得(特别是与位置有关的,还有外边距、内边距有关的那些)