css布局以及元素定位

position(定位)

static(默认):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分;行内元素则会创建一个或者多个框,置于其父元素中。

relative:元素框相对于之前正常的文档流中的位置发生偏移,并且原先的位置依旧被占据,发生偏移时,可能会覆盖其他的元素。

absolute:元素框不占有文档流的位置,并且相对于包含快进行偏移(这个包含快是指,最近一级外层元素position不为static的元素)。

fixed:元素框不占有文档流的位置,并且相对于视窗进行定位。

sticky:粘性定位,相当于relative和fixed的融合。


尺寸

%:百分比的参照物是父元素。

rem:相对于复杂的设计图相当有用。

em:是一个相对单位,相对于父元素的font-size。



盒子模型

每个元素都会形成矩形块。margin + border + padding + content

宽度默认的属性是auto,内部元素的长度自动充满父元素。

标准盒子模型:width = content的宽度

box-sizing:border-box时,width = border + padding + content

这里另外插入一个小小的居中内容,块级元素的水平居中只要将水平方向上的margin设置成auto就可以啦~垂直方向的居中就没有如此容易了,在后续的内容中,会有一篇关于居中的。


浮动

在我的理解中,浮动其实是为了实现文字的环绕特效,并不是为了布局而产生的。

这里介绍一些清除浮动的方法

1.将其的父级元素设置成:overflow:hidden;

2.after类:对于元素的after伪类进行设置;

3.写一个<div style="clear:both"></div>,置于改浮动元素之下。


布局

两栏布局:一栏定宽,一栏自适应。

三栏布局:两边定宽,中间width:auto,再加上margin来进行设定。

比如两边使用position:absolute来定位,width:200px;中间栏使用margin:0 200px来进行定位。


媒体查询

既然讲到布局,就不得不提媒体查询了,这是区别不同设备显示不同的利器

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,543评论 1 91
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 3,881评论 5 15
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 5,489评论 2 66
  • 这几天老爹迷上了微信,非要让我教他。我甚感纳闷,对于一个连手机都用不溜的人为什么突然对微信的热情如此之高?细问后...
    luckywby阅读 124评论 0 2
  • 云随小事阅读 93评论 0 1