CSS布局

 1.左右布局:

方法一:

给子元素加上“float:left、right,父元素加上clearfix



方法二:

利用position。position可使元素脱离文档流。父元素设position: relative; 子元素设position: absolute 并且设置距离上下左右的位置即可


方法三:

属性:table-cell:




2.左中右布局

 左中右布局与左右布局类似

方法一:利用float

方法二:利用position


方法三:

类似左右布局中使用table-cell。


3.水平居中:

行内元素居中:设置text-align:center即可


块级元素居中

(1)单个块级元素:设置: margin左右为auto;

(2)多个块级元素:子元素设display: inline-block,父元素设text-align:center


4.垂直居中

方法一: 设置height和line-height的高度一致;


方法二:设置padding和margin


5.其他

1.内联元素设置宽高是无效的;设置margin-top和margin-bottom也是无效的

2.要好好利用box-sizing: border-box/content-box; border-box设置width是包括border及padding的,content-box的width只是指内容的宽度,不包括border和padding

3.设置宽度时设置max-width比设置width要更好

4。尽量不要设置width和height,多想想设置padding和margin

5. 伪类”xxx: nth-child(even/odd)可选中第偶数/单数个元素对其进行设置


     其实方法有很多,最重要是根据实际情况需要运用不同的方法

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,598评论 5 15
  • CSS布局解决方案(终结版) 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又...
    杀个程序猿祭天阅读 597评论 0 2
  • 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布...
    一个敲代码的前端妹子阅读 822评论 0 12
  • 攻击流程 1. 判断是否存在注入,注入是字符型还是数字型 用1’ or 1=1#若返回正常则为字符型,否则用1 o...
    l0st阅读 362评论 0 0