前端学习之路-css使用的一些小技巧

已经好几天没有更新博客了,在这里解释下;是因为这几天刚好遇上星期天休息;以及最近两天在做英雄联盟的静态页面任务,所以博客一直没怎么更新而且在百度前端学院报的课也没怎么来得及看了。下面总结下这两天我在CSS中遇到的坑 以及自己总结的一些CSS的小技巧:

1.margin:0 auto;可以设置一个元素水平居中与它的父元素

但是注意啦:margin:0 auto在以下情况下是无效的:

a.当要设置居中的元素没有为其本身设置宽度是无效,继承父元素的宽也不能产生作用;如果要将和父元素同宽的元素设置居中的时候,我们只需要设置父元素水平居中即可

b.元素设置了浮动(float)或者绝对定位(absolute)以及固定定位(fixed)时

c.在HTML中使用了<center>标签时,其子元素全部都会居中;因此当margin用在祖先元素有center的元素中是,水平居中效果失效。但需要注意的是center标签只能让其下属所有的后代元素居中

以及其他的一些情况,详细的说明可以参考这篇文章https://blog.csdn.net/dong_pt/article/details/51239526

下面讲述一些我自己学到的小技巧:当我们需要设置一个替代元素水平和垂直居中时,我们可以先设置margin:0 auto来实现水平居中;另外我们可以通过设置line-height属性为元素的高度是当前元素的高度时;文字会有垂直居中的效果

继承作为CSS重要的一大特性,在某些时候继承是不会产生效果;下面我们整理了一些继承的小知识点:

1.所有元素都可以继承的属性:visibility和cursor

2.内联元素可以继承的:letter-spacing、word-spacing、white-space、line-height、color、font、font-familly、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、directions。

扫描二维码关注公众号,回复: 5386330 查看本文章

3.块状元素可继承:text-indent和text-aligin

4.列表元素可继承:List-style...

5.表格元素可继承:border-collapse

更具体的说明可以查看这篇文章:https://www.cnblogs.com/cuteblackcat/p/6675890.html

 另外讲一下之前学到的定位的知识点:

定位的概念,作用。

定位是我们将某些元素,从普通的文档流中取出;使元素具有不同的行为。

定位的作用是将某些元素指定在某个位置,或者相对于某个位置

为什么要用定位

定位让我们实现对页面更精准的控制和布局,使用盒子模型和浮动来进行布局;使用定位来将页面元素更精准将一些小的元素放到我们需要放的位置。定位更精准更灵活,但只能用于微调而最好不要用于布局

定位分为3种:

1.相对定位(relative)

2.绝对定位(absolute)

3.固定定位(fixed)

其中当我们没有为元素设置position属性值的时候,其默认值为static

相对定位:相对定位总有一个相对的参考点(相对于自身定位),而这个参考点就是自己;通过设置TOP

以及left可以改变其为值。不会脱离文档流,且元素定位前所占的区域不会被占据;会保存下来

绝对定位:绝对定位会根据其最近的poisiton值不为static的祖先元素的来进行定位,当祖先元素都没有设置position值时;以body元素作为参考点

绝对定位的元素会脱离文档流,因此其本来所占的区域在设置为absolute后;原先的宽高会不占据区域。我们通常设置父元素相对定位,子元素绝对定位来配合使用。

固定定位 和相对定位,唯一 的区别是;相对定位大小会随着浏览器的大小而改变。而固定定位不会随着浏览器大小的变化而发生位置的变化。多用于侧导航栏的制作

猜你喜欢

转载自blog.csdn.net/shengbeer/article/details/81194505
今日推荐