介绍CSS布局及方式方法

1.左右布局

(1)用浮动float实现左右布局。给左盒子添加float:left;(向左浮动),给右盒子添加float:right;(向右浮动);但是加了浮动效果,同时就要给左右盒子的父级盒子加上class名为clearfix,clearfix::after{content:''; display:block; clear:both;}

(2)用左浮动float:left+外边距margin实现左右布局。给左边盒子设置右边距margin-right,或者给右边盒子设置左边距margin-left

(3)用绝对定位position:absolute实现左右布局。给左右盒子的父级加相对定位position:ralative,给左右盒子加绝对定位position:absolute,同时设置top,left,bottom,right样式属性

2.左中右布局

用浮动实现左中右布局。同上1(2)和1(3)的方法

3.水平居中

内联元素要居中,需要在其父级元素上加css样式text-align:center;

块级元素要居中,可在其本身上加css样式margin:0 auto;

(1)使用inline-block 和 text-align实现

(2)使用margin:0 auto来实现

(3)使用绝对定位实现

(4)使用flex布局实现

4.垂直居中

一般把高度height和行高line-height设置为相同,但是这样操作一般不是正居中;这样的话就用另外一种方式给该元素添加相同的上下内边距padding-top、padding-bottom,然后再去量该元素的整个高度并将行高line-height设置为量出来的高度的值

5.其他小技巧

(1)css中给属性加了display:inline-block;就同时要加vertical-align:top;

因为添加了display:inline-block;容易出现bug,而加vertical-align:top;可以消除这些bug,或者说可以消除hug的出现

(2)给阴影加上过渡时间就不会显得很突兀,transition:shadow 0.2s;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,083评论 5 15
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,423评论 2 66
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6
  • 秦王俊,字阿祗。开皇元年,立为秦王。二年,拜上柱国、河南道行台尚书令、洛州刺史,时年十二。加右武卫大将军,领关东兵...
    aalouie阅读 2,144评论 0 0