最近重返css世界,分享一些我的心得体会吧
最开始网页有个p的布局,基本上打开大屁股头电脑能看文字就好了,再后来随着Web技术的发展,你可以选择浮动布局float
,也可以结合position
进行布局,还有table
表格布局等,再往后发展就是flex
,媒体查询
以及grid
啦,什么栅栏布局,960网格布局啦。从这条发展主线看,感觉还是回到了最初的表格,抓重点,flex
是基于轴的一维布局,而grid
是最新的基于二维的布局。关于这方面的资料国内可以看张鑫旭
大佬写的书和文章,还有像什么《CSS禅意花园》《精通CSS高级解决方案》《CSS解密》之类的书等,国外的资料可以去https://css-tricks.com,推特,油管上看看,都不错的选择。
这边说了是基础布局,所以不会在这里介绍flex
和grid
,百分比布局,媒体查询以及移动端布局,可能会在后续文章介绍,那么我们开始吧。
box-model
)border-width
你不给它设置形状和颜色就仅仅宽度是无效果的content-box
和bordr-box
我们来看这样一个例子,同样设置了width:600px
为什么效果却截然不同呢?
从中我们可以看到,默认情况下(即content-box
的时候),它会把你的border
和padding
算上去,这样一对比,是不是清晰了很多,那么我们如何解决呢?来看看border-box
的效果。
具体的选择盒模型的方案,你根据具体情况具体分析吧。
float
与 clear
)float
float
最初是为了解决文字环绕而存在的,后期也被用来进行布局。我们还是来看这样一个例子。分别是没用浮动和用了右浮动的效果,可以看到是为了解决文字环绕。
clear
clear
属性被用于控制浮动
同样的,我们来看这样一个例子,两个兄弟元素之间的浮动关系,如楼下布局,设置.boy
左浮动
<div class="boy"><span class="s1">Boy</span></div>
<div class="girl"><span class="s2">Girl</span></div>
用了clear:left
之后,可以看到解决了堆积在一起的问题。
display:none
与visibility: hidden;
)display
设置成 none
元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden;
还会占据空间这个是display:none的情况
这个是visibility: hidden;的情况
margin
) 在写页面用margin
频率最高的一句我是margin: 0 auto;
,我们来看看这句话的优缺点吧。同样我还是举例子,优点是可以使部分网页元素水平居中
显示,
我们理科生说话要讲证据,这里说部分,我是有证据的,在移动端体验略微差了点,还有就是你想要表达的元素大于浏览器的尺寸。为了能够看到明显的区别,我把它加了一个灰度的框。
其实都是元素大于浏览器的宽度,我们来看看PC端的表现,可以看到当元素大于浏览器的时候,就有滚动条了,居中显然是不可能的了。
我们再来看看移动端的情况,看见了没有同学们,它并没有很好地实现居中。
这是个让人头大的问题,我们需要解决它。max-wdith
巧妙地解决了这个问题,在主流浏览器和IE7+都有较好的表现,适合移动端,校正后的模样。
position
) position
可以设置的属性有很多,默认是static
,还有一些其他属性例如,fixed
,relative
,absolute
等等,然后可以设置top
,left
,right
,bottom
等。
我们还是看下楼下我准备的例子。
static
遇到relative
static
遇到加了点佐料的relative
static
遇到两个relative
随后跟了一位fixed
relative
生下一个absolute
这里没有像以往过多地分享代码的实现,而是更多地采用了视觉的呈现。是应为css
这块知识吧,还是需要同学们自己动手实践,一万个人有一万个人的看法,这个是我亲身经历的一些想法,只有当你亲身经历过才能够更好地去理解学习它,最后,同学们一起来动手试试吧。