css(五)---css中的一些问题
来源:互联网 发布:淘宝守望先锋代练 编辑:程序博客网 时间:2024/05/25 23:28
不定宽高水平和垂直居中
如给元素一个宽高进行水平垂直居中,这个自然是很简单的。方法也有很多种,那么今天就复习一下不定宽高的。当然本质也是差不多的。
在说居中之前,首先讲一下文字的水平垂直居中:
height: 300px; width: 300px; border: 1px solid black; color: rgb(216, 50, 38); text-align: center; line-height: 300px;
这个居中主要是利用 text-align: center;和 line-height: height;这两个属性进行居中的。
接下来,进入主题吧:
- 给父级设一个flex盒子
- 这是利用css3中的弹性盒子的一些属性,主要是利用flex属性。给父级一个宽高,而子级则没有给宽高,让子级进行水平垂直居中的。
.wrapper{ width: 200px; height: 200px; border: 1px solid black; display: flex; align-items: center;//子元素水平居中 justify-content: center;//子元素垂直居中 } <div class="wrapper"> <div>不定宽高居中</div> </div>
通过 align-items: center;和 justify-content: center;属性,将子元素进行水平垂直居中,这种方式在移动布局页面的时候经常的使用。是现在比较火得页面布局方式,讲到css3时,再详细的介绍吧。
- 利用table-cell的方法
- display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。
大家可以好好研究一下IE6/7,因为这个浏览器当时是比较牛的一款,基本上霸占了整个市场,它也不顾及兼不兼容的问题,我是老大都得听我的。但随着谷歌公司推崇的Google浏览器,IE再也不能像以前任性了,才开始注重兼容性的问题。导致以前的浏览器有一些问题,具体可以自己去研究一下。
- display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。
<style> .wrapper{ width: 200px; height: 200px; border: 1px solid black; display: table-cell; text-align: center;//水平居中 vertical-align: middle;//垂直状态是什么样的形式,里面的属性值还有top、bottom。 } .wrapper div{ vertical-align: middle; display: inline-block; } </style> <div class="wrapper"> <div>不定宽高居中</div> </div>
最终显示效果和之前的差不多,都是让其子元素相对与父元素水平垂直居中的。
- 利用css3的transform属性
- 因为子元素没有宽高,所以不能根据margin进行缩进的。因此就引入了transform属性,对没有宽高的元素进行水平垂直居中。
- 这是css3动画中的一个属性,为了改变元素的相对值,里面有相应的属性值,分别是translateX()、translateY()、translateZ()。最后一个是3d效果的,在z方向上进行运动。
<style> .wrapper{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .wrapper div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);//第一个参数是X,第二个参数是Y的值。 } </style> <div class="wrapper"> <div>不定宽高居中</div> </div>
这种方式也能实现水平垂直居中的的要求。虽然实现这种方式的方法有很多的,但是第一种用的比较多,也是现在最流行的方式。
三栏布局
布局是制作页面最基础的思想,那么我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法。这些方法简洁实用,且无兼容性问题。
- 绝对定位法
这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
<style> width: 100%; height: 200px; position: relative; } .left,.right{ width: 200px; height: 200px; position: absolute; top: 0; } .left{ left: 0; background: red; } .right{ right: 0; background: yellow; } .main{ margin: 0 200px; height: 200px; background: green; } </style> <div class="wrapper"> <div class="left">1</div> <div class="main">2</div> <div class="right">3</div> </div>
结果如下:
- margin负值法
- 这种方法是在实际的网站中应用的最多的,首先,中间的主体要使用双层标签。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200px。
.wrapper{ width: 100%; height: 200px; } .main{ width: 100%; height: 200px; float: left; } .body{ height: 200px; margin: 0 200px; background: green; } .left,.right{ float: left; width: 200px; height: 200px; } .left{ margin-left: -100%; background: red; } .right{ margin-left: -200px; background: yellow; }
<div class="wrapper"> <div class="main"> <div class="body"></div> </div> <div class="left">1</div> <div class="right">3</div> </div>
三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。因为不受内部影响,所以在实际操作中用的比较多。
- 自身浮动法
- 此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动,右栏右浮动,主体直接放后面,就实现了自适应。
.wrapper{ width: 100%; height: 200px; } .left{ width: 200px; height: 200px; float: left; background: red; } .main{ height: 200px; margin: 0 200px; background: green; } .right{ width: 200px; height: 200px; float: right; background: yellow; }
<div class="wrapper"> <div class="left">1</div> <div class="right">3</div> <div class="main">2</div> </div>
这布局需要注意的是主体main的属性,这个主体必须放在坐后面,其它两个位置随意放。如果主体放在最前的时候,后面两个固定栏就会被主体的margin撑开,从而会在下一行显示。所以一定要注意。
这三种布局方法各有各的好处,其中margin负值法用的最为广泛,实际用的也比较的多。
阅读全文
0 0
- css(五)---css中的一些问题
- 一些开发中的css问题
- CSS中的一些细节问题
- css中的一些技巧
- CSS中的一些属性
- css中的一些概念
- CSS中的一些术语
- css中的一些小贴士
- Css中的一些疑问
- 一些css样式问题
- CSS的一些问题
- 一些css样式问题
- css中的display问题
- css中的优先级问题
- css中的浮动问题
- css中的居中问题
- css中的定位问题
- css中的层级问题
- CGU 2017 APAC完美落幕 五国争霸收官之战!
- Scala学习(十)--- 访问修饰符
- 大汽车有大智慧:Honda携手东软睿驰打造智慧交通世界
- 2017中国第三届亿欧创新奖评奖结果揭晓:新科技、新政策共迎新时代
- Array Partition I
- css(五)---css中的一些问题
- 大屏、激光、人工智能,谁将成为2018彩电行业关键词?
- 男生都是如何折磨自己的女朋友的?
- Linux下的tar压缩解压缩命令详解
- 22A
- 拥有拦截器的Okhttp3封装
- 技术是没有局限
- oracle基本语句
- 10_锁重入,异常,继承,同步代码块,死锁