前端UI页面布局汇总

居中的实现

1. 使用属性vertical-align（垂直）

首先vertical-align要搭配inline-block使用才能生效。

其次vertical-align:middle是将该元素的中心和父元素基线对齐。

span{display:inline-block;vertical-align:baseline;}

.heighest{display:inline-block;height:200px;width:50px;background:red;vertical-align:baseline;}

.second_heighest{display:inline-block;height:180px;width:50px;background:red;vertical-align:baseline;}

.third_heighest{display:inline-block;height:150px;width:50px;background:red;vertical-align:baseline;}

例子：

.picture{width: 170px;height: 230px;border: 1px solid #ddd;padding: 5px;margin: 20px auto;text-align: center;}
.picture:before{content:"";height: 100%;display: inline-block;vertical-align: middle;width:0;}
.picture img{vertical-align: middle;max-width: 170px;max-height: 230px;}

效果如下：

2.使用定位position（垂直,水平）

父框设置为相对定位

子元素如下：

.child{
	position:absolute;
	top:50%;
	left:50%;//百分比是按照父框的宽高
	transform:translate(-50%,-50%);//百分比是按照子框的宽高
}

如果确定父元素及子元素大小，可以计算top/left，就不用transform了
缺点：IE9以下不支持transform属性

3.使用flex布局（垂直,水平）

.parent{
display:flex;
justify-content:center;//水平
align-items:center;//垂直
}
父元素可配置属性如下
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content:
子元素可配置属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self

3.margin和width实现水平居中（水平）

.item { width: 293px; margin-left: auto; margin-right: auto; }
优点：实现方法简单易懂，浏览器兼容性强；

**缺点：扩展性差，无法自适应未知项情况(必须设定width，但有时元素宽度未知)。

4.fit-content实现水平居中（水平）

3中无法确定元素宽度，fit-content属性就是使包裹全部内容，然后自行计算宽度，结合margin也能实现水平居中
（fill-available、fit-content、max-content、min-content）
.item { width:-webkit-fit-content; margin-left: auto; margin-right: auto; }

5.table-cell实现居中（水平垂直）

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table; √√√
}
.content {
    background-color: #F00;//红色
    display: table-cell; √√√
    vertical-align: middle;//使子元素垂直居中 √√√
    text-align: center;//使子元素水平居中√√√
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

其中table-cell的元素定位相当于td标签，是个行内元素

除去浏览器原生滚动条

方案一：

修改css默认样式，在webkit的内核中我们添加

::-webkit-scrollbar{
display:none;
}

这样就消除了scroll元素的滚动条。

方案二：

设置一个外层div，overflow:hidden;设置宽度，例如width:250px；

经过测试发现内部ul的width被差分成ul呈现的实际宽度+滚动条的宽度，测试环境下滚动条宽17px;

就是说如果我将ul的width设为250px;呈现时ul只有233px，有17px被滚动条占用。

所以我们将ul宽度设为267px,呈现时ul为250px，占满了外层div，17px的滚动条就被隐藏了。

方案三：

设置ul的margin-right：-17px；来隐藏滚动条，这样会固定margin,在不影响其他布局时可以使用。

关于元素宽度的获取

文章链接：https://www.cnblogs.com/ifworld/p/7605954.html

鼠标事件
event.clientX:鼠标相对于浏览器的x轴距离，不随浏览器滚动条滚动改变
event.pageX：鼠标相对于浏览器的x轴距离，随浏览器滚动条滚动改变
screenX：鼠标到显示器的x轴距离
offsetX:鼠标相对于事件源(目标元素target左上角)x轴的距离

元素属性
1.offset

offsetWidth:元素本身宽度,包括内容，内边距，边框，不含外边距
offsetHeight:同理
offsetTop:距离父元素上壁的距离（要求父元素position不为static),否则就是距离文档上壁的距离
offsetLeft:同理
2.client
clientWidth:元素本身宽度,包括内容，内边距，不含边框，外边距
clientHeight:同理
clientTop:border-top的宽度
clientLeft:border-left的宽度
3.scroll
scrollWidth:元素的完整宽度，包含内容，溢出内容，内边距，不含边框，外边距。
在不溢出时和clientWidth相同。
scrollHeight:同理.
scrollTop:元素向上溢出的高度,只算溢出部分
scrollLeft:同理
4.style
e.style.width:只包含内容，不含内边距，边框，外边距
e.style.top:定位距离父框上壁的距离

其中style.width/scrollWidth是可读写的，offsetWidth/clientWidth是只读的
style是字符串，其余是数字

百分比的使用

margin-top:xx%
这个百分比是相对于父元素的宽度而言的
top:xx%
这个百分比是相对于父元素的高度而言的
transform:translateY(50%)
这个百分比是相对于自身而言的