css布局方法

2018-06-12 admin

1、左右布局

这就要说到一个属性float,使用float: left;就可以让浮动元素 会脱离正常的文档布局流,并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容,此时会围绕着浮动元素,填满其右侧的空间。但是,子类使用float来使元素并排,那么父类就需要使用clearfix来防止子元素下方的标签浮动上来贴和。

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

这样所有元素就会紧贴左边浮动,如果想要左右浮动,就可以把最右边的元素设置为float: right;这样就可以实现左右布局。

2、左中右布局

左中右布局,父元素有三个子元素,首先先把三个子元素浮动并排起来如左右布局一样,然后给后两个元素都设置一个margin左边距,父元素设置水平居中;就可以实现左中右布局

<ol>
    <li id="portfolio1">所有</li>
    <li id="portfolio2">框架</li>
    <li id="portfolio3">原生 JS&amp;CSS</li>
</ol>
li{
    float: left;
    margin-left: 40px;
}
ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

3、水平居中

  • 对于行内元素(inline):text-align: center;
  • 对于块级元素(block):设置宽度且 marigin-left 和 margin-right 是设成 auto
  • 对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;;或者使用 flex 布局

4、垂直居中

  • 对于行内元素(inline)设置上下 pandding 相等;或者设置 line-height 和 height 相等
  • 对于块级元素(block),父元素需使用相对定位:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度

5、其他小技巧

  • box-shadow可以给块设置阴影,看起来更立体,谷歌搜索css shadow generator可以自己调整样式。
  • transition: all 0.3s;动画属性,可以给所有变化加入过渡动画和过渡时间。
  • cursor: pointer;鼠标悬停时I型可以变成手指点击形状
  • border: 1px solid red; border边框可以用来调试标签的所占位置。
  • 当设置display: inline-block; 需要加上vertical-align: top; 来去除底层多出的空间。
  • background-image: url(…/img/girl.jpg); 设置背景图片background-position: center center;可以使背景图片垂直水平居中, background-size: cover;使背景图片可以按比例缩放。
  • 谷歌搜索css linear-gradient generator可以设置一个元素的渐变色,来使一个元素包含多种颜色。

原文链接:https://segmentfault.com/a/1190000015263625

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33878.html

文章标题:css布局方法

相关文章
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
JavaScript将字符串转换成字符编码列表的方法
本文实例讲述了JavaScript将字符串转换成字符编码列表的方法。分享给大家供大家参考。具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 A...
2017-03-21
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
回到顶部