你要学的CSS样式都在这了

前言：在各类网站论坛上,没有找到与工作比较贴切的技能,所以特此写一些对刚步入工作或者工作中没有重视的技能与问题,各位大牛请及时关闭文章.最近事情稍微多了点,文章更新稍慢,但小编一定会努力写好每一篇文章,让大家有所收获.

ps：即使你是一个后端工程师,前端必备技能的学习一样很重要,虽然我不是特别牛逼的前端,但常用的前端知识还是略懂一二的,我的文章内容是希望让已经步入工作但尚未"修炼升仙"的同学们得到一些帮助,纯属个人原创见解,若不正确,请各位批评指正.

CSS2常用属性

为什么不介绍CSS3属性呢,因为呢,我们现在工作中所做的项目还需考虑兼容性问题,目前还没有完全普及CSS3,所以我们还是把CSS2中的常用属性熟悉起来才是重中之重.

有人会疑问,那我去W3School教程不就好了么?我还有必要看文章么?

区别在于:小编只介绍没有兼容性问题并且十分常用的样式,非常用的一律不介绍,我相信工作中你也用不到

由于CSS内容还是较多的,所以需要分篇来写,我们也定个小目标,分篇来掌握,下面我们按照规范书写的顺序来介绍CSS属性.

位置属性

1.display

定义:控制元素显示与否,以及布局时元素生成的显示框类型.(我们只介绍这个属性的4个常用属性值)

display:none;该元素不显示,且不占位置

display:block;块元素,此元素前后会带有换行符,可设置宽高属性,宽度默认100%

display:inline;行元素,与其他行元素在一排,元素前后没有换行符,设置宽高属性无效

display:inline-block;行内块元素,聪明的人可以看出,它既有与行元素在一行的特性,也有块元素可设置宽高的特性,算是一个综合体

例子如下:(图中结合边框,让大家更清晰的看到宽高属性的作用),下图左侧为代码,右侧为示意图

display示例

注意:这边我只简单提了提 块元素 与 行元素 的主要区别,实际运用的时候,大家得根据情况来琢磨

2.position

定义:规定元素的定位类型

position:static;默认值.没有定位(top, bottom, left, right 或者 z-index 属性都无效)

position:absolute;生成绝对定位的元素,相对于该元素外层的第一个非static定位的父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性来具体设置,会生成一个块级元素,而不论该元素本身是什么类型

position:fixed;生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性来具体设置,会生成一个块级元素,而不论该元素本身是什么类型

position:relative;生成相对定位的元素,相对于其本来应该所在位置进行定位

例子如下:(图中介绍了4种位置类型,一般relative会与absolute结合使用,fixed用于做浏览器漂浮效果,relative单独用于纠偏)

position示例

注意:postion一般都要和top,right,left,bottom来结合使用,top等属性的单位可以是%,也可以是具体的px,cm等

3.z-index

定义:设置元素的堆叠顺序,这个值越高,堆叠的层次越高,即z-index值高的会遮挡住z-index值小的.z-index必须配合非static值的position属性使用

z-index示例

如上图中,我们结合postion属性,演示了z-index的叠层效果

应用场景:有了display,position与z-index其实我们就可以做一个简易的弹出框效果了,具体实现就当是作业吧~

4.visibility

定义:元素是否可见(比较简单,记住即可)

visibility:visible;默认值,元素可见

visibility:hidden;元素不可见,即使不可见,但仍会占据页面上的空间,与display:none不同.

5.float

定义:元素在哪个方向浮动.(这个属性很重要,也经常使用,不好好理解,使用的时候会出各种问题)

float示例1

float示例2

注意:以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.会生成一个块级元素,而不论该元素本身是什么类型,如果这行所剩宽度不够,浮动元素会自动折行到下一行进行浮动.

一般float常与 ul, li 标签结合使用,实现导航条,菜单,列表等样式

6.clear

定义:元素的哪一侧不允许其他浮动元素.

clear:none;默认值.允许浮动元素出现在两侧.

clear:left;在左侧不允许浮动元素.

clear:right;在右侧不允许浮动元素.

clear:both;在左右两侧均不允许浮动元素.

clear示例

上图应该是clear最常用的场景了,结合:before,:after伪元素实现仅 ul 标签中的 li 标签左浮动,但不影响后面的h1,以及p标签.可能说的有些抽象,我还是把反面教材做个示例,大家比较上图与下图的区别

反面教材

我们可以看出如果去除了ul:before,ul:after这一行样式内容,则ul后面的h1标签则并不是另起一行,而是也携带了float:left的效果,这显然不是我们想要的.

7.overflow

定义:当内容溢出元素框时发生的事情

overflow:visible;默认值,内容不会被裁剪,会呈现在元素框之外

overflow:hidden;内容会被修剪,并且溢出的其余内容是不可见的

overflow:scroll;浏览器始终显示滚动条以便查看可能溢出的其余内容

overflow:auto;如果内容溢出时,浏览器才会显示滚动条以便查看其余的内容

下面我们直接上例子,scroll:始终显示横向与纵向滚动条,auto:会根据实际内容来判断是否展示滚动条,hidden:直接裁剪,超出部分不展示

overflow示例

overflow还有一个常用的场景,如下图:(展示一行文字信息,如果溢出显示省略号,结合width,white-space,text-overflow属性)

overflow示例2

8.vertical-align

定义:设置元素的垂直对齐方式

该属性定义行内子元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式.常用属性值如下:

vertical-align:top;把元素的顶端与行中最高子元素的顶端对齐

vertical-align:middle;把此元素放置在父元素的中部

vertical-align:bottom;把元素的顶端与行中最低的子元素的顶端对齐

vertical-align示例

9.cursor

定义鼠标移入显示的光标的类型(形状)

cursor:default;默认光标(通常是一个箭头)

cursor:auto;默认,浏览器设置的光标(根据不同场景自动显示不同的光标形状)

cursor:pointer;光标呈现为指示链接的指针(一只小手)

cursor:text;文本选择光标(大写 I 字母/罗马数字1的形状)

还有其他光标形状,但不常用,此处不做介绍,这个也不做例子介绍了,比较简单

尺寸属性

1.width:设置元素的宽度,比较好理解,但注意display:inline的行元素设置该属性无效,如span

2.min-width:设置元素的最小宽度,注意display:inline的行元素设置该属性无效,如span

3.max-width:设置元素的最大宽度,注意display:inline的行元素设置该属性无效,如span

4.height:设置元素的高度,注意display:inline的行元素设置该属性无效,如span

5.min-height:设置元素的最小高度,注意display:inline的行元素设置该属性无效,如span

6.max-height:设置元素的最大高度,注意display:inline的行元素设置该属性无效,如span

7.margin

定义:规定元素的上右下左的外边距,该属性可以有 1 到 4 个值,单位可以是%,也可以是px,cm等

margin:1px 2px 3px 4px;4个值的顺序分别表示上,右,下,左的外边距为1px,2px,3px,4px

margin:1px 2px 3px;3个值时,表示上,右,下的外边距为1px,2px,3px

margin:1px 2px;2个值时,表示上下的外边距为1px,左右的外边距为2px

margin:1px;1个值时,表示上右下左的外边距都为1px

以上请牢记,上右下左,上右下左,上右下左...多记几次.

margin还经常用于块元素居于父元素的水平居中位置,例子如下:

margin示例

margin:0px auto;解释:上下外边距为0px,左右外边距自动计算,则实现了块元素的居中效果

8.padding

定义:规定元素内的上右下左的内边距,该属性可以有 1 到 4 个值,单位可以是%,也可以是px,cm等

padding与margin的属性值类似,聪明的同学都会类推,所以小编就不赘述了撒.

9.border

边框border,在工作中,小编确定,一定以及肯定会用到它,所以对它的掌握,必须像知道自己是男是女一样熟悉.

边框示例

上图中,上图中有3个段落,第2个段落四周都有边框.

border:1px solid #000000; 样式解释:第一个是边框宽度border-width(一般使用px作为单位),第二个是边框样式border-style,第三个是边框颜色border-color(一般使用#加6位16进制数字表示),建议就按照这个顺序编写

当然也可以单独写宽度,样式,颜色,如下图:

单独写属性

这时候,有同学可能想问,如果我不想要四周边框,只需要部分怎么办?

示例

上图中,第一个,第二个段落没有下边框(也是没有下边框的两种写法),第三个段落只有左边框,引入下面三个属性:

border-bottom:5px solid #F00;写法与border一致,但只影响下边框,而不是四周所有边框

border-bottom-width:底部边框宽度

border-bottom-style:底部边框样式

border-bottom-color:底部边框颜色

当然同理,上边框top,左边框left,有边框right也有同样的属性,请依次类推

最后借一张图来总结下尺寸属性,如下图,710 x 18是元素内的子元素宽高,padding是子元素与父元素四个边框的距离,padding的外面是四个方向的边框宽度,再外面是元素距离其他元素的四个方向的外边距

尺寸示意图

结尾总结:

文章略显枯燥,但句句干货,各位小伙伴能读到这边,说明你已经成功的将css的重要属性已经学习了一半,今天我们主要学习了位置属性和尺寸属性,下次我们学习文本属性和背景属性

有兴趣的朋友以及需要巩固的同学建议关注小编,查看HTML篇,有疑问与指正之处请留言