网站建设营销技巧,seo培训师招聘,网站做动态和静态哪个贵,wordpress密码保护最近有点空闲时间#xff0c;所以想好好看看几个一直没机会看的问题。把它写下来#xff0c;是促进自己更好地理解#xff0c;同时也是一个备忘吧#xff01;
先说元素居中#xff0c;元素居中#xff0c;从最开始接触前端就一直挥之不去的一个问题#xff0c;也许是太…最近有点空闲时间所以想好好看看几个一直没机会看的问题。把它写下来是促进自己更好地理解同时也是一个备忘吧
先说元素居中元素居中从最开始接触前端就一直挥之不去的一个问题也许是太忙了这个本该认真研究的问题竟然一直都没有好好总结总是遇到了临时应付。一个个小问题的深度剖析和积累达到量的积累才能获得质的改变。当然同时所有很大很大的东西其实都是由一点一点的小东西组成的比如一个大的网站是由很多有组织的居中或者浮动等层层嵌套和叠加等而实现的。所以这是一个好的开头元素居中我的第一个深度剖析和总结的问题
很多时候我们实现居中可能只用某一种方式习惯了就会基本上一直使用。讨论的意义在于融会贯通也许实际项目中并不一定会用到其中的很多种居中方式但是这是一件一加一远大于二的事别人给你说一千遍也不如你自己亲自实践一遍实践总是会给你意想不到的“小奖励”你在实践的过程中很多属性你会从陌生到了然于胸而且很多并不能够言传。
先来划分维度这里讲从水平居中和垂直居中两个纬度来讨论。
一水平居中
顾名思义就是水平方向上的居中情境有很多。比如按钮上的文字标题图片相对父容器等等。
1.自动外边距块级、定宽的元素水平居中
从很多文章中了解到这应该是大家使用最普遍的一种水平居中方式。对于一个有固定宽度的块级元素只要设置margin: 0px auto;即可实现水平的居中效果。如果有父容器则相对于父容器居中否则相对于body居中。不定宽的话这个块级元素将会占据整整一行。
原理理解左右auto也就是左右一样多这样就很容易理解为什么能够水平居中了。 div styleheight: 200px;width: 200px;background-color: antiquewhite;margin: 0px auto;定宽块状元素左右margin auto/div 2.文本的text-align: center行内元素水平居中
这个居中方式只针对文本和行内元素有效块级元素可通过设置displayinline使其适用。。给父元素设text-aligncenter则其子元素就能够水平居中。这本是针对文字的一个样式这样的使用方式很方便但是严格意义上来说有点不正规吧但是真的很好用哦兼容性也超好。
原理理解类似于word中文字的居中这里你把所有行内元素想象成文字就好了。 div classtext-centerspan文本同时也是行内元素的居中/spanimg srcimg/img.jpg //div 3.加table标签为table设自动外边距不定宽块级元素水平居中。
此时块级元素宽度会随着内容变化但是布局始终是居中显示的。
原理使用了表格单元格的特殊属性。 table stylemargin: 0 auto;tbodytrtddiv stylebackground-color: aquamarine;不定宽块状元素加table标签给table设margin auto。实现居中/div/td/tr/tbody
/table 4.绝对定位结合百分比不定宽块级元素水平居中。
原理理解容器相对于body有一半的left然后内容相对屏幕的中间那条线向左移动自身一半的距离刚好实现了居中。 div styleposition: absolute;left: 50%;div styleposition: relative;left: -50%;background-color: purple;同时设置容器和元素position然后再分别设置left值/div
/div 二垂直居中
垂直居中同样也要分情况讨论父元素高度确定的单行文本父元素确定的多行文本图片和块状元素等。
1.line-heightheight:父元素高度确定的单行文本
原理理解文字在一行内部是居中显示的让行高等于元素高这样文字在行内居中自然也就在元素内部居中了。 div styleheight: 60px;line-height: 60px;background-color: lawngreen;父元素高度确定的单行文本。上下居中。/div 2.display:table-cell;vertical-align: middle父元素高度确定的多行文本。
原理理解这是通过table-cell激活了vertical-alignmiddle也就是垂直居中 div styleheight: 200px;display:table-cell;vertical-align: middle;background-color: skyblue;多行文本。。。。
/div 3.绝对定位居中技术
原理理解它通过激活margin:auto;来实现居中W3C默认的是元素marginauto时上下边距为零的但是通过绝对定位和相对定位然后设置leftbottomrighttop值为零模拟一个从文档流中分离的边界这是设置marginauto就可以让上下左右margin都相同了。 .center-container{position: relative;height: 100px;}.absolute-center{width: 50%;overflow: auto;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;} * 容器是需要有高度的并且定位属性为relative。
* 内容要有宽度或者高度以防它占据整个容器。
* overflow: auto;防止溢出时错误显示。设为auto溢出时会出现滚动条。保持在容器内部。
原理详解A普通内容流中marginauto;的效果等同于让上下边距为零这是W3C官方文档中定义的。 Bpositionabsolute是绝对定位块跳出了内容流内容流中其余部分渲染时绝对定位部分不进行渲染。 C:为区块设置 top: 0; bottom: 0; left: 0;right:0;将给浏览器重新分配一个边界框此时该元素将填充其父元素所有可用空间一般父元素为body或者声明positionrelative的元素。 D给内容块设置一个高度或者宽度能够防止让内容块占据所有可用空间。 E由于内容块脱离文档流设置了marginauto后浏览器会给margin top和bottom设置相同的值从而实现上下居中。
1、容器内的绝对居中
这是直接利用了margin的均分来实现的。 div classcenter-container stylebackground-color: aquamarine;我是容器div classabsolute-center stylebackground-color: bisque;height: 50%;我是内容我现在是在容器内部居中显示的。/div
/div 2、视区内的绝对居中
结合position:fixed;z-index来实现。 div classcenter-container stylebackground-color: aquamarine;我是容器div classabsolute-center styleposition:fixed;z-index:999;background-color: coral;width: 30%;height: 200px;我是在视区内绝对居中的。br /绝对居中/div/div 3、侧边栏
给left或者right设置具体值然后另一个auto就好了。 div classcenter-container stylebackground-color: aquamarine;我是容器div classabsolute-center styleleft: auto;right: 10px;background-color: lawngreen;width: 300px;我是在视区内偏右侧上下绝对居中的。/div/div 4、响应式居中
结合百分比。 div classcenter-container stylebackground-color: aquamarine;我是容器div classabsolute-center stylewidth:60%;height:60%;min-width:200px;max-width400px;background-color: mediumaquamarine;响应式居中。/div
/div 5、图片居中
这个要控制图片高度auto放置图片显示错误。 div classcenter-container stylebackground-color: orchid;height: 200px;img stylewidth:200px;height: auto;display: table; classabsolute-center srcimg/img.jpg /
/div 还有很多适用情况重要的是理解原理然后灵活应用。
4.floater DIV
原理理解这是通过一个浮动的div宽度为百分之百高度为容器的一半然后通过负的下边距来把需要居中的元素拉到格式的位置来实现的这种方式不是很灵活虽然能够实现居中。 div stylebackground-color: hotpink;height: 200px;div stylefloat: left;height: 50%;width: 100%;margin-bottom: -50px;/divdiv stylebackground-color: aquamarine;clear: both;height: 100px;我是内容/div
/div 5.相同的padding top和bottom实现居中
原理理解这个就很好理解了上下padding相同自然就居中了。不过灵活性也不大。 div stylebackground-color: darkorange;padding: 20px 0;div stylebackground-color: burlywood;相同的上下padding/div
/div
