html之CSS样式学习笔记
2018-06-24 02:20:59来源:未知 阅读 ()
本文内容:
- 字体样式
- 文本样式
- 背景样式
- 尺寸样式
- 盒子模型
- 边框样式
- 边距样式
- 浮动布局
- 定位布局
- 【CSS3】伸缩布局
- 标签显示方式
- 列表样式
- 【CSS3】过渡样式
- 【CSS3】变换样式之2D变形
- 【CSS3】变换样式之3D变形
- 【CSS3】动画样式
首发日期:2018-04-04
修改:
- 2018-05-02:增加了CSS3的常用样式,增加了对各种样式的使用说明。去掉了一些无关样式的内容。
这里不讨论CSS选择器,如果想要了解,可以参考我的另外一篇博文,我已经划分明了了,
http://www.cnblogs.com/progor/p/8495520.html
考虑排版问题,所以下面的演示的样式都是行内样式。
字体样式:
介绍:
- 字体样式是指标签的内容的字体的样式。(诸如表格中的字体、段落中的字体。。。)
- 字体样式主要包括字体风格(决定是否倾斜)、字体类型、字体大小、字体颜色、字体粗细等
样式:
字体粗细:font-weight
- 设置字体的粗细。
- 可以赋予的值:
- 数字:100-900;100到900字体逐渐变粗。
- 关键字:bold较粗的(相当于700),lighter较细的(正常的相当于400)。
<div style="font-weight: 200;">200的粗细</div> <div style="font-weight: bold;">bold的粗细</div>
字体风格:font-style
- 设置字体是否倾斜。
- 可以赋予的值:
- 关键字:italic代表字体倾斜,normal代表字体正常不倾斜(用于把一些倾斜的字体改正)
<p style="font-style:normal">正常字体</p> <div style="font-style: italic;">倾斜字体</div>
字体类型:font-family
- 设置字体的类型(宋体、微软雅黑之类的)
- 可以赋予的值:
- 字体的英文名字:比如Verdana、Tahoma、Arial 【注意:如果因为名字有空格分隔的话,需要使用引号包裹;如果是一个整体,那么可以不使用引号;】
- 字体的中文名字:比如宋体、微软雅黑、【中文字体名字需要加引号包裹】
- 字体的unicode代码[这里不列举,有兴趣可以自己百度]
- 【注意:可以赋予多个值,为多个值使用,分隔,代表从左到右判断到一个存在的字体就设置,如果不存在对应字体就继续向右设置字体】【多个值时,英文名字的字体类型必须在中文字体名字之前。】
<div style="font-family: '宋体';">字体类型</div> <div style="font-family: '微软雅黑';">字体类型abc</div> <div style="font-family: tahoma;">字体类型abc</div> <div style="font-family: 'Times New Roman';">字体类型abc</div> <div style="font-family: '微软雅黑C','宋体';">没有微软雅黑C,所以显示宋体</div>
字体大小:font-size
- 设置字体的大小
- 可以赋予的值:
- 关键字:small(代表小字体),large(代表大号字体)
- px值
- em值(em是是默认字体大小,2em代表两倍默认字体大小)
<div style="font-size: small;">小号字体</div> <div >正常字体</div> <div style="font-size: 20px;">20px字体</div> <div style="font-size: 1em;">1em字体</div> <div style="font-size: 2em;">2em字体</div>
字体颜色:color
- 设置字体的颜色
- 可以赋予的值:
- rgb值:比如rgb(255,255,255)
- 颜色的英文字符串:比如"green","red"
- 十六进制RGB颜色值:比如#FFFFFF【如果两两相同可以简写,比如#aa4455可以简写成#a45】
<div style="color: purple;">紫色字体</div> <div style="color: rgb(128,0,128);">紫色字体</div> <div style="color: #800080;">紫色字体</div>
综合设置字体样式:font
- 同一设置字体样式,包括四个属性:font-style,font-weight,font-size,font-family【使用font属性来综合设置字体样式时,必须按照这个的顺序来书写。 】
- 注意:font-size和font-family属性是必须的,没有的时候会导致设置不生效。【所以对应的,前面两个属性是可选的】
<div style="font:larger '微软雅黑';">larger '微软雅黑'字体</div> <div style="font:italic larger '微软雅黑';">italic larger '微软雅黑字体</div>
补充:
- [CSS3]:css3中允许字体颜色带有透明度,设置方法为使用rgba(r,g,b,a),它比普通的rgb多出一个值,最后一个值为透明度,范围0-1。
<div style="color:rgba(0,0,0,0.3)">透明度0.3</div> <div style="color:rgba(255,0,0,0.7)">透明度0.7</div>
文本样式:
介绍:
- 文本的样式主要涉及多个文字之间的排版问题(以text打头的样式)
- 文本的常见样式有文本修饰、大小写、行高、字距、词距、文本水平对齐方式、段落首行缩进、文本方向、文本内容溢出显示等
样式:
文本修饰:text-decoration
- 设置文本的划线修饰
- 可以赋予的值:
- 关键字:underline(代表下划线),line-through(代表删除线),none(代表没有划线修饰) 【一般用来给a标签清除下划线】
<div style="text-decoration: underline;">下划线文本</div> <div style="text-decoration: line-through;">删除线文本</div>
行高:line-height
- 给文本设置行高【行高可以说是字体所占据的空间,与padding,margin不同,有点类似写作文的小格子】
- 可以赋予的值:
- px值
- 百分比(大小相对于内容所在的标签)
- em值
<div style="line-height: 20px;background-color: red;">20px行高文字</div> <div style="line-height: 40px;background-color: blue;">40px行高文字</div>
文本水平对齐方式:text-align
- 设置文本水平对齐方式【这个样式针对块级标签,好比一张床你可以靠右睡,靠左睡,但如果你的床只能刚好塞下你,那就不需要谈论靠哪边睡了】
- 可以赋予的值:
- 关键字:left(靠左对齐),center(居中对齐),right(靠右对齐)
<div style="text-align: right;">右对齐</div> <div style="text-align: center;">居中对齐</div> <div style="text-align: left;" >左对齐</div>
首行缩进:text-indent
- 设置文本的首行缩进大小
- 可以赋予的值:
- px值
- 百分比(大小相对于内容所在的标签)
- em值【一般使用em值,因为1em是一个字体大小。 】
<p style="text-indent: 2em;">首行缩进两个字</p> <p >用来对照上面是否缩进两个字</p>
文本方向:direction
- 设置文本方向【在一些浏览器不生效】【这个设置针对一句话,它把一句话当作一个块,然后再像我们认识的从右到左(或从左到右)来排列】
- 可以赋予的值:
- 关键字:ltr(从左到右), rtl(从右到左)
<p style="direction: rtl;">i am li lei.</p> <p style="direction: rtl;">雷猴啊.</p> <p style="direction: rtl;">123.</p> <p style="direction: ltr;">.123</p>
字间距:letter-spacing
- 设置字符间的间距,比如可以用来定义中文之间的间距。
- 可以赋予的值:
- em值
- px值
- 百分比(大小相对于内容所在的标签)
<div style="letter-spacing:2em;"> 大中国 </div>
单词间距:word-spacing
- 设置单词之间的间距,主要针对英文单词之间的间距
- 可以赋予的值
- em值
- px值
- 百分比
<div style="word-spacing: 15px;"> my name is lilei </div>
标签中文本的显示方式:white-space
- 设置标签中文本的显示方式
- 可以赋予的值:
- normal:默认模式,可能会超出标签来显示
- nowrap:强制一行内显示[可以使用br标签强制换行]
<div style="width:100px;height: 20px;border:1px solid red;white-space: normal;"> 我爱北京天安门我爱北京天安门我爱北京天安门 </div> <br> <br> <br> <br> <br> <div style="width:100px;height: 20px;border:1px solid red;white-space: nowrap;"> 我爱北京天安门我爱北京天安门我爱北京天安门 </div>
补充:
- 【CSS3】text-shadow:给文本添加阴影效果,需要四个值(水平阴影的位置,垂直阴影的位置,[模糊的距离],[阴影的颜色])
-
水平阴影的位置,垂直阴影的位置是指阴影相对原字体的位置,默认0,0代表不偏移
-
模糊距离是指文本跟阴影的距离.[可以说阴影是文本的投影,如果投影越近,那么我们看得越清晰]
<div style="text-shadow: 3px 3px 1px red;">北京天安门</div> <div style="text-shadow: 0px 0px 3px red;">北京天安门</div>
- text-shadow也可以连续设置多个【有时候利用多个阴影效果来使文本变得立体。】比如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ font-size:70px; background-color: #CCC; color:#ccc; } div:first-child{ text-shadow:1px 1px 1px #000; text-shadow:-1px -1px 1px #FFF; } div:last-child{ text-shadow:1px 1px 1px #FFF,-1px -1px 1px #000; } </style> </head> <body> <div>我是凸起的文字</div> <div>我是凹下去的文字</div> </body> </html>
-
- CSS3文本内容溢出显示:text-overflow
- 设置文本内容超出标签大小后如何显示[前提是设置了white-space:nowrap;overflow:hidden]
- 可以赋予的值:
- clip:超出的内容隐藏
- ellipsis:超出的内容隐藏,使用省略号代替
<div style="width:100px;height: 20px;border:1px solid red;white-space: nowrap;overflow:hidden;text-overflow: clip;"> 我爱北京天安门我爱北京天安门我爱北京天安门 </div> <div style="width:100px;height: 20px;border:1px solid red;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;"> 我爱北京天安门我爱北京天安门我爱北京天安门 </div>
背景样式:
介绍:
- 背景样式主要包括背景图像,背景颜色,背景图像是否重复、背景起始位置,背景透明度、背景滚动
样式:
背景颜色:background-color
- 设置背景颜色
- 可以赋予的值:
- rbg值
- 十六进制RGB颜色值
- 英文颜色字符串
<p style="background-color:blue">雷猴啊</p>
背景图片:background-image
- 设置背景图片
- 可以赋予的值
- url(地址):地址可以为图片路径 ,也可以为网页路径
<div style="background-image: url(123.gif);height: 65px;">背景图片</div> <div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 30px;">背景图片</div>
背景图片是否重复:background-repeat
- 设置背景图片是否重复
- 可以赋予的值:
- 关键字:no-repeat(不重复),repeat-x(水平方向重复),repeat-y(垂直方向重复)
<div style="width:200px;height:200px;background-image: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png');background-repeat: no-repeat;"></div>
<div style="width:200px;height:200px;background-image: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png');background-repeat: repeat-x;"></div>
<div style="width:200px;height:200px;background-image: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png');background-repeat: repeat-y;"></div>
背景图片位置:background-position
- 设置背景图片显示的位置【设置的是标签的基位置(左上角(0,0))与图片的相对位置;比如想从图片的中部开始显示,可以设置x,y为图片中部位置】
- 可以赋予的值【有两个值,默认情况下两个都是center】:
- 第一个值:x轴方向位置,可以为px值,百分值,或一些关键字(top图片顶部,center图片中心,bottom图片底部,left图片左边,right图片右边)
- 第二个值:y轴方向位置,可以为px值,百分值,或一些关键字(top,center,bottom,left,right)
- 【注意,只赋予一个值时,默认把这一个值同时付给x,y】
- 【background-position可以拆分为background-postion-x和background-postion-y,即为把两个值拆分为一个个来赋予】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ width:106px; height: 120px; background-image: url("https://static.ename.cn/data/article/201512/22/1450753767.jpg"); background-position:-331px 0; } </style> </head> <body> <div></div> </body> </html>
利用background-postion来开始从“D”开始显示
背景图片滚动:background-attement
- 设置背景图片是否滚动
- 可以赋予的值:
- 关键字:fixed(背景图像相对于窗体固定),scroll(背景随着窗体滚动。)
背景的综合设置:background
- 综合设置背景,设置顺序为背景颜色,背景图片,背景图片位置,背景图片大小,背景是否重复,背景是否滚动,
- 【上面的属性都是可选的】
<div style="width: 100px;height: 100px;background: blue;"></div> <div style="width: 100px;height: 100px;background: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png') no-repeat;"></div> <hr>
背景透明度:opacity
- 设置背景的透明度
- 可以赋予的值
- 0-1:越靠近0就越透明
<div style="background-color: bisque;">透明度测试,无透明度</div> <div style="background-color: bisque;opacity: 0.2;">透明度测试,0.2</div> <div style="background-color: bisque;opacity: 0.5;">透明度测试,0.5</div>
补充:
- CSS3中支持使用带透明度的背景颜色。使用rgba(r,g,b,a)。最后一个值为透明度
<div style="background-color:rgba(255,0,0,0.1)">0.1透明度红色背景 </div>
- CSS3支持使用多张背景图片。在一条语句中使用,来分隔多个背景图片设置。【当多张背景图重叠在一起时,前面的背景图会覆盖后面的背景图】
<div style="width: 200px;height: 200px;background-image: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png') ,url('https://i0.hdslb.com/bfs/archive/bdb288021ff854d3ac618ac8c1eafd300ec9ed9b.png');"></div>
- 同样的,可以background设置多个背景图片(CSS3)
<div style="width: 200px;height: 200px;background: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png') no-repeat ,url('https://i0.hdslb.com/bfs/archive/bdb288021ff854d3ac618ac8c1eafd300ec9ed9b.png')no-repeat;"></div>
- background-position可以用来节省资源,只需要下载一张图片,然后依靠background-position截取下自己想要的部分即可。【这种操作称为“精灵图”】http://www.cnblogs.com/progor/p/8975490.html
- CSS3背景缩放:background-size :设置背景图片的大小
- 可以像设置图片大小一样设置宽 高 值,第一个值为宽值,第二个为高值;如果只给一个值的话,会等比缩放。
- 也可以设置成cover,cover可以使背景图片自动调整缩放比例,保证图片填充满背景区域,缩放后的图片超出范围的部分会隐藏。
- 也可以设置成contain,contain可以使背景图片自动调整缩放比例,保证图片完整地显示在背景区域中,不会发生超出部分被隐藏。
尺寸样式:
介绍:
- 尺寸样式只对块级标签生效,样式包括宽度和高度。
- 有些特殊的标签如img,input也可以设置宽度和该度
样式:
- height:高度
- min-height:最小高度
- 最小高度是任由浏览器伸缩后,标签能达到的最小高度
- max-height:最大高度
- 设置最大高度、宽度之后,那么标签会随内容增多而变大,但最大就那么大,如果再大,则会超出。
- width:宽度
- min-width:最小宽度
- 最小宽度是任由浏览器伸缩后,标签能达到的最小宽度
- max-height:最大宽度
它们可以赋予的值:
- px值
- 百分比
补充:
- 默认情况下,如果内容过大,那么三种设置的大小都会随内容而增大,他们的主要区别在于:如果一起使用,那么max-height这些能限制height的设置,如果设置超过最大值就会失效。min-height就是设置最小值。
盒子模型:
介绍:
- 盒子模型可以把每一个标签都看作一个盒子,并且占据一定的页面空间,而这个盒子是由内容、外边距、内边距、边框四个属性组成,并且内容的大小受width宽度、height高度影响。
如下图所示,可以把一个网页划分成一个个“盒子”:
一个手机盒子一样,它有手机位(实际内容大小),防震垫(内边距),盒子包装(边框),与其他盒子的距离(外边距)
理论上一个标签的大小由margin+padding+border+内容大小(width+height)
样式:
改变大小计算方式:box-sizing
- 改变标签大小计算方式
- 可以赋予的值:
- border-box:把标签的padding,border计算到width和height中,避免因为padding而撑大内容
- content-box:默认情况,标签的大小由margin+padding+border+内容大小(width+height)
补充:
- 盒子模型包括几大类样式(边框、边距。。。),归类到下面。
边框样式:
介绍:
- 边框样式是对于能设置边框的标签的边框的样式。(div,img,table,span等)
- 边框样式主要有宽度,外观,颜色,
样式:
边框类型:borer-style
- 设置边框的类型
- 可以赋予的值:
- 关键字:solid实线,dashed虚线,dotted点线,double双线,ridge脊线,groove槽线
- 【可以赋予四个值,依次为“上右下左”的边框类型】
<span style="border-style: dashed;">虚线</span> <span style="border-style: solid;">实体线</span> <span style="border-style: dotted;">点线</span> <span style="border-style: double;">双线</span> <span style="border-style: ridge;">脊线</span> <span style="border-style: groove;">槽线</span>
边框宽度:border-width
- 设置边框的宽度
- 可以赋予的值:
- px值
- 关键字:thin(细线,相当于1px),mediun(相当于3px),thick(粗线,相当于5px)
- 【注意:单独的设置边框宽度是没用的,前提是设置边框的类型】
<span style="border-style: solid;">实体线</span> <span style="border-style: solid;border-width: 5px;">实体线</span>
边框颜色:border-color
- 设置边框的颜色
- 可以赋予的值:
- 英文颜色字符串
- RGB值
- 十六进制RGB颜色值
- 【注意,单纯设置边框颜色是无效的,因为默认没有边框 】
综合设置边框:
- 统一设置边框的样式,设置顺序为边框宽度,边框类型,边框颜色 【事实上因为后面两个都是关键字作为值,所以顺序可以不固定】
- 除了border-style是必须之外,其他两个属性都可以省略
<div style="border:3px solid red">123</div><br> <div style="border: dotted thin green;">border属性</div><br> <div style="border: dotted green;">border属性</div><br> <div style="border: dotted thin green;">border属性</div><br> <div style="border: dotted;">border属性</div>
补充:
- 也可以设置一边的边框的样式:border-XXXX-样式,XXXX为bottom底部\left左边\right右边\top顶部
<span style="border-left-style: dotted;border-left-color: #008000;">单左边框</span> <span style="border-left-style: dotted;border-left-width: thick;">单左边框</span>
- 同样的,也有border-XXXX来统一设置单边边框的三个属性,XXXX为bottom底部\left左边\right右边\top顶部
<span style="border: dotted thin green;">border属性</span> <span style="border: dotted green;">border属性</span> <span style="border-right: dotted thin green;">border属性</span>
- 【CSS3】border-radius:将边框设置成圆角边框(圆框头像的实现方法)
- 可以赋予的值:【大小为标签大小的一半时就是一个圆】
- px值
- 百分比值
<div style="width:100px;height:100px;background-color:red;border-style:solid;border-radius: 50px;"></div> <div style="width:100px;height:100px;background-color:red;border-style:solid;border-radius: 50%;"></div>
- 可以赋予的值:【大小为标签大小的一半时就是一个圆】
- 【CSS3】box-shadow:给盒子加上阴影
- 属性列表:阴影的水平偏移,阴影的垂直偏移,阴影的模糊度,阴影的尺寸,阴影的颜色,阴影的类型
- 可以赋予的值:
- 阴影的水平偏移,阴影的垂直偏移相当于x,y,可以给px值或者百分比
- 阴影的模糊度也可以给px值
- 阴影的尺寸是阴影的大小,可以给px值
- 阴影的颜色可以给颜色值,也可以为带透明度的颜色值
- 阴影的类型可以给一个值:inset(代表是内阴影,阴影在盒子内部);如果不是内阴影,那么不要给值,留空。
<div style="width: 100px;height: 100px;border:2px solid black;box-shadow: -5px 5px 3px 1px gray ;"></div>
<div style="width: 100px;height: 100px;border:2px solid black;box-shadow: -3px 5px 3px 1px gray inset;"></div
边距样式:
介绍:
- 边距样式有内边距和外边距
- 外边距就是标签与标签的间距。
- 内边距就是标签内容与边框的距离。
样式:
内边距 :paddng
- 设置标签内文字与边框的四个方向上的距离
- 可以赋予的值:
- px值
- em值
- 百分比(大小相对于内容所在的标签)
- [可以赋予一个值,两个值,四个值]
- 只有一个值时,是统一设置四个方向的内边距,比如padding: 5px相当于设置其他四个方向的边距都为5px
- 两个参数时,第一个参数是上下内边距,第二个参数是左右内边距
- 有四个值时,为依次设置“上右下左”(顺时针)的内边距
- [可以设置某一边的边距:padding-bottom下内边距,padding-top上内边距,padding-left左内边距 ,padding-right右内边距
<span style="background-color: cornflowerblue;padding: 15px;">内容1</span> <span style="background-color: cornflowerblue;padding: 15px;border: dashed;">内容1</span> <span style="background-color: cornflowerblue;padding-left: 15px;border: dashed;">内容1</span>
外边距 :margin
- 设置标签与其他标签的四个方向上的间距
- 可以赋予的值:
- em值
- px值
- 百分比(大小相对于内容所在的标签)
- [可以赋予一个值,两个值,四个值]
- 只有一个值时,是统一设置四个方向的外边距,比如margin: 5px相当于设置其他四个方向的外边距都为5px
- 两个参数时,第一个参数是上下外边距,第二个参数是左右外边距
- 四个参数时,分别为“上、右、下、左”(顺时针)
- [可以设置某一边的边距:margin-bottom下外边距,margin-left左外边距 ,margin-right右外边距 ,margin-top上外边距
<span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">内容1</span> <span style="background-color: cornflowerblue;padding: 15px;margin-left:20px;border: dashed;">内容1</span> <span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">内容1</span> <span style="background-color: cornflowerblue;padding: 15px;margin:5px 6px 7px 8px;border: dashed;">内容1</span>
补充:
- 使用auto值时会默认居中于父标签中,比如左右auto的话就会变成水平居中.[但是如果标签没有设置大小的话,auto会无效]
- 考虑到盒子的计算方式和边距合并,一般在调整标签之间的间距时,优先度是width[不使用间距,之间就是占那个大小]>padding>margin
浮动布局:
介绍:
- 谈浮动布局之前要谈一下html标准文档流,标准文档流的标签布局从上到下,从左到右,依次排列,块级标签独占一行。
- 而浮动布局是“脱离”标准文档流的,根据给定的属性left\right来向父标签贴靠(据说float设计初衷是做成图片环绕),
由于初衷是图片环绕,所以float的标签的内容会影响其他标签的文本排布.不会发生“漂浮起来后会掩盖下面的内容”,但可以掩盖非内容部分(即使div是块级的,没有内容的时候依旧可以漂浮在上面)(重点),下面是例子
浮点起来,脱离标准流之后,会认为它不占据空间了而挤上来,但是对于文本内容来说,会避免被浮点起来的标签遮挡.而对于背景之类的非文本内容,就避免不了被浮点起来的标签遮挡.
样式:
浮动:float
- 使标签浮动起来
- 可以赋予的值
- left:漂浮起来靠左
- right:漂浮起来靠右
<div style="background-color: coral;border:dashed black"> <div style="background-color: blue;">111</div> <div style="background-color: chartreuse;float: right;top: 0px;">3333</div> <div style="background-color: blueviolet;">222</div> <div style="background-color: chartreuse;float: left;top: 0px;">33333</div> <div style="background-color: blueviolet;">222</div> <div style="background-color: blueviolet;">222</div> </div>
补充:
- 任何标签漂浮起来后,都会变成“块级“的,不会占整行。
- 为了避免浮动遮掩内容,需要给浮动的标签加一个标准流的父标签,标准流的父标签会占据空间,不让后面的标签挤上来.
- 在加了一个标准流的父标签后,如果不给父标签设置大小则会发生一个问题:因为子标签浮动起来了,那么父标签无法被子标签撑起来,在没有其他内容的情况下,它的大小为0
- 解决方案1:父标签清除浮动:clear:both 【不是清除标签的float,只是影响】
- 使用方式1:在父标签的中加上一个<div style="clear:both"></div>
<div style="background-color: coral;border:dashed black"> <div style="background-color: chartreuse;float: right;top: 0px;">3333</div> <div style="background-color: chartreuse;float: left;top: 0px;">33333</div> <div style="clear: both;"></div> </div>
- 使用方式2:利用after【这不讲解,想了解可以查找".clearfix:after"】
- 使用方式1:在父标签的中加上一个<div style="clear:both"></div>
- 解决方式2:父标签定义overflow:hidden 【称为BFC方法】
<div style="background-color: coral;border:dashed black;overflow:hidden"> <div style="background-color: chartreuse;float: right;top: 0px;">3333</div> <div style="background-color: chartreuse;float: left;top: 0px;">33333</div> </div>
- 解决方式3:给父标签设置合适的大小(不建议使用,因为不确定子标签大小)
- 解决方案1:父标签清除浮动:clear:both 【不是清除标签的float,只是影响】
定位布局:
介绍:
- 定位布局能够使你将一个标签精确的放置在页面上你指定的位置。
- 定位布局一般有三种方式:fixed固定定位,relative相对定位,absolute相对定位,static静态定位(标准流定位模式,不讲)
样式:
定位:positon
- 设置标签的定位模式
- 可以赋予的值:
- fixed:相对于浏览器一直处于一个固定位置
- relative:如果单纯有position,而没有top等属性,那么没有实际变化,与标准流没有区别,与不添加position没有区别;一般依靠top等属性定位 ,它的四个属性的基准是原有的边框
- absolute:相对于网页一直处于一个固定位置
- 与定位配合的属性:
- top:定义标签跟父标签的顶部距离(relative的为基于原标签位置的距离),值为百分值或px值
- right:定义标签跟父标签的右边距离(relative的为基于原标签位置的距离),值为百分值或px值
- bottom:定义标签跟父标签的底端距离(relative的为基于原标签位置的距离),值为百分值或px值
- left:定义标签跟父标签的左边距离(relative的为基于原标签位置的距离),值为百分值或px值
三个属性的区别:
top等属性相对的位置 | 是否保留标准流位置 | |
fixed | 相对于浏览器 | 不保留 |
relative | 基于原标签位置 | 保留 |
abosolute | 相当于网页左上角 | 不保留 |
relative下的abosolute | 相对于父标签的左上角 | 不保留 |
fixd:
<div style="background-color:lightcoral;position: fixed;bottom: 0;right: 0;left: 0;">这是一个不论如何滚动,永远在浏览器底端的菜单栏</div>
abosolut:
<div style="background-color:lightcoral;position: absolute;bottom: 0;right: 0;left: 0;">这是一个随页面滚动的菜单栏</div>
relative:
<div style="background-color:lightcoral;position: relative;top: 10px;right: 0;left: 20px;">这是一个基于原来位置改变位置的标签</div> <div style="background-color: bisque;">这是一段要被覆盖的内容</div>
relative+abosolut:
<div style="background-color: coral; width: 200px;height:200px;position: relative;"> <div style="position: absolute;bottom: 0;right: 0;border: dashed;">靠父标签的右下角</div> <div style="position: absolute;top: 0;left: 0;border: dashed;">靠父标签的左上角</div> </div>
【CSS3】伸缩布局:
介绍:
- 伸缩布局是一种能够等分标签大小的布局,在窗体缩小时仍然能保持等分。
- 伸缩布局比普通的百分比来分块的方式多了的好处:简洁了计算、计算方式是剩余计算的(所以如果边距占了空间之后,会减去边距再划分等分)
样式:
将大小划分成几份,将其中若干份分给一个标签 flex:x
- x是占有的份数
- flex的前提是父标签使用了伸缩布局:display:flex
- 【如果某个标签使用了固定的大小,那么剩下的大小会按份数等分给使用了flex的标签】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> section{ width:400px; height:100px; display:flex; } div:first-child{ flex:1; height:100px; background-color:red; } div:nth-child(2){ flex:2; /* 中间占两份 */ height:100px; background-color:green; } div:last-child{ flex:1; height:100px; background-color:blue; } </style> </head> <body> <section> <div></div> <div></div> <div></div> </section> </body> </html>
改变等分方向:flex-direction
- flex-direction可以改变划分的方向,比如原本是竖着分成三等分,可以改成column使得划分的结果是一行行的。
- 可以赋予的值:
- row:在行中划分
- column在列中划分
- 其他。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> section{ width:400px; height:100px; display:flex; flex-direction:column; /* flex-direction:row; */ } div:first-child{ flex:1; height:100px; background-color:red; } div:nth-child(2){ flex:2; /* 中间占两份 */ height:100px; background-color:green; } div:last-child{ flex:1; height:100px; background-color:blue; } </style> </head> <body> <section> <div></div> <div></div> <div></div> </section> </body> </html>
调整排列顺序:order
- 调整排列顺序
- 可以赋予的值:
- 自然数
- 【order数值小的会排列到前面】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> section{ width:400px; height:100px; display:flex; flex-direction:column; } div:first-child{ flex:1; height:100px; background-color:red; } div:nth-child(2){ flex:2; /* 中间占两份 */ height:100px; background-color:green; } div:last-child{ flex:1; height:100px; background-color:blue; order:-1; } </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> </section> </body> </html>
标签显示方式:
样式:
display:
- display样式可以改变标签的“块级或行内”,也可以使隐藏标签
- 可以赋予的值:
- inline:将块级变成行内标签
- block:将行内标签变成块级标签
- inline-block:兼容行内-块级的属性【比如div变成行内后,想给div标签设置高度,就需要设置这个】
- none:隐藏标签【一些标签是需要进行某些操作之后才显示的,比如模态对话框,那么可以在之前先设置为display:none】
visibility:
- 可以赋予的值:
- hidden:隐藏标签
- visible:显示标签
- 与display:none的区别:display:none的隐藏之后不会保留标签的位置,而visibility会保留
当内容超出标签大小时怎么显示:overflow
- 设置当内容超出标签大小时怎么显示
- 可以赋予的值:
- auto:当内容超出时使用滚动条来显示超出内容,不超出则不显示滚动条
- hidden:超出的内容不显示,选择隐藏,忽略超出的内容。
- scroll:一直显示滚动条,不管内容超不超出。
- visible:默认的,会超出标签显示的大小来显示。
标签之间对齐方式:vertical-align
- 标签设置大小之后,如果它旁边还有别的标签,会发生对齐问题,使用vertical-align设置他们的对齐方式
- 可以赋予的值:
- 关键字:top顶部对齐、middle中间对齐、bottom底端对齐,baseline基线对齐
z-index:当多个标签发生层叠时,谁显示在上面
- 仅有浮点布局有这个属性
- 可以赋予的值:
- 自然数
<div style="background-color: blueviolet;text-align: center;position: fixed;top:0;bottom:0;right:0;left:0;z-index: 10;"> 底层内容 </div> <div style="background-color: palegreen;opacity:0.5;position: fixed;top:200px;bottom:200px;right:200px;left:200px;z-index: 11;"> 顶层内容 </div>
列表样式:
介绍:
- 列表样式主要有列表项目符号类型、使用图片作为项目符号...
样式:
列表的项目符号类型:list-style-type
- 设置项目符号类型
- 可以赋予的值:
- disc:实心圆
- none:没有项目符号 【用来去除项目符号】
- circle:空心圆
- decimal: 阿拉伯数字
- 其他....
- 可以统一的设置列表样式,一般来说都是直接使用list-style:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> li { list-style-type:none; } </style> </head> <body> <div> <ul> <li>admin</li> <li>admin</li> </ul> </div> </body> </html>
使用图片作为项目符号:list-style-image
- 使用图片作为项目符号
- 可以赋予的值:
- url(地址):地址可以为图片路径 ,也可以为网页路径
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> li { list-style-image:url('用户.png'); /* 图片需要小一点,不然会撑的很开 */ } </style> </head> <body> <div> <ul> <li>admin</li> <li>admin</li> </ul> </div> </body> </html>
CSS3过渡样式:
介绍:
- 过渡样式是使某些样式的变化变慢来形成"动画效果"
- 过渡样式主要与hover来配合使用
样式:
过渡:transition
- 属性:要过渡的属性,花费时间,运动曲线,开始时间
- 可以赋予的值:
- 第一个值(要过渡的属性):就是样式属性,如width,height,color等等.[多个属性或不想精确填时可以填all]
- 第二个值(花费时间):多少秒,以s作为单位
- 第三个值(运动曲线):[默认值是]
- linear:动画的进行是匀速的
- ease:动画的进行是逐渐减速的
- ease-in:动画的进行是先慢后快的
- ease-out:动画的进行是先快后慢的
- 其他...
- 第四个值(开始时间):延迟多少秒后开始"动画",以s作为单位[默认值是0s]
- [其实可以单独设置某个属性,transition-property代表要过渡的属性,transition-duration代表花费时间,transition-timing-function代表运动曲线,transition-delay代表开始时间]
- 后面的两个值是可以省略的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color:blue; transition:width 3s ease-in 1s; } p{ width: 100px; height: 100px; background-color:gray; transition:background-color 5s ; } div:hover{ width: 200px; } p:hover{ background-color:black; } </style> </head> <body> <div></div> <p></p> </body> </html>
补充:
- 如果要过渡的属性有多个,需要使用all
【CSS3】变换样式之2D变形:
介绍:
- 2D变形有几个效果:移动、旋转、倾斜、缩放
样式:
移动:transform:translate(x,y):
- x,y是位置,原点是标签原位置的左上角。
- x,y也可以是百分比值,百分比值为标签的宽高百分比
- 移动可以是静态的(有时候用来居中,先margin父标签一半,再translate自己一半),也可以是动态的(hover?)
- x,y也可以是负值,-x代表左移动,-y代表上移动。
- translate也可以与transition配合使用。
- 也可以单个方向上移动:translateX(x),translateY(y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> /* 静态 */ div:first-child{ width: 100px; height: 100px; background-color:blue; margin-left:50%; transform:translate(-50%, 20px); } /* 动态 */ div:last-child{ width: 100px; height: 100px; background-color:skyblue; transition:transform 2s; } div:last-child:hover{ transform:translate(100%, 100%);/* 右移动100px,下移动100px */ } </style> </head> <body> <div ></div> <div ></div> </body> </html>
缩放:transform:scale(x,y)
- x是水平方向变化程度,y是水平方向变化程度;它们的取值是自然数,1代表不变大,大于1代表变大,小于1代表缩小
- 缩放的方式是各个方向缩放的。
- 也可以单方向缩放:scaleX(x),scaleY(y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div:first-child{ width: 100px; height: 100px; margin: 60px auto; background-color:skyblue; transition:transform 2s; } div:last-child:hover{ transform:scale(1.2, 1.2);
} </style> </head> <body> <div ></div> </body> </html>
旋转:rotate(deg)
- deg是度数,使用数值表示,后面跟单位deg
- 旋转的中心点默认是中心点,可以使用transform-orign来更改
- transform-orign有两个属性值,可以使用四个方向(top,bottom,right,left)作为属性值,如果想设置旋转中心点为左上角:transform-orign:left top;也可以使用坐标值作为属性值,坐标值的原点为标签左上角,比如设置(10px,10px)的位置作为旋转中心点:transform-origin:10px 10px;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div:first-child{ width: 100px; height: 100px; margin: 60px auto; background-color:skyblue; transition:transform 2s; /* transform-origin:left top; 更改旋转中心点为左上角 */ /* transform-origin:100px 100px; 更改旋转中心点为右下角 */ } div:last-child:hover{ transform:rotate(90deg);/* 旋转90度 */ } </style> </head> <body> <div >123</div> </body> </html>
【CSS3】变换样式之3D变形:
介绍:
- 3D变形有几个效果:移动、旋转、
- 3D变形效果的实现依靠于perspective[只有设置了perspective才能给3D变形加上立体的效果]【perspective越大效果越不明显】【perspective设置在父标签中】
CSS3中的坐标轴如下,截图来源于网易博客"独行冰海"
样式:
旋转:rotateZ(deg)、rotateY(deg)、rotateX(deg)
- rotateZ是绕着Z轴旋转,rotateY是绕着Y轴旋转,rotateX是绕着X轴旋转,deg是旋转的度数。
- 也可以使用rotate3D(x,y,z,deg)来绕着指定位置旋转。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> body { perspective:300px; /* perspective设置在父标签中 越大立体效果越不明显 */ } div:first-child { width:100px; height: 100px; margin:20px auto; transition:all 2s; background-color:gray; } div:first-child:hover { transform:rotateY(90deg); } </style> </head> <body> <div>123</div> </body> </html>
位移:transform:translateZ(z)
- z是z轴方向移动的距离
- 可以使用translate3d(x,y,z)来设置三条坐标轴上的移动。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> body { perspective:300px; /* perspective设置在父标签中 越大立体效果越不明显 */ } div:first-child { width:100px; height: 100px; margin:20px auto; transition:all 2s; background-color:gray; } div:first-child:hover { transform:translateZ(100px); /* transform:translate3d(30px, 30px, 100px); */ } </style> </head> <body> <div>123</div> </body> </html>
【CSS3】动画样式:
介绍:
- 动画样式可以定义一系列操作,这就像一个动画了
样式:
声明动画:animation
- 属性列表:动画名称 花费时间 运动曲线 开始时间 播放次数 是否反向播放
- 可以赋予的值:
- 动画名称animation-name:可以赋予一个字符串
- 花费时间animation-duration:动画花费的时间,一个数值,带上单位s【可不写,默认0s】
- 运动曲线animation-timing-function:跟过渡类似,有ease,ease-in ,linear….【可不写,默认ease】
- 开始时间animation-delay:动画开始的时间,一个数值,带上单位s【可不写,默认0s】
- 播放次数animation-iteration-count:一个自然数;如果想无限循环,使用关键字infinite【可不写,默认1】
- 是否反向播放animation-direction:normal代表不方向,reverse代表反向播放,alternate代表正反交替【可不写,默认是normal】
- 上面给出了对应的设置单个属性时的对应名称,可以逐个设置对应属性,但通常使用animation统一设置
- 除了动画名称,其他属性都是可选的。
- 有一个辅助属性:animation-play-state可以设置动画的状态,running代表运动的,paused代表暂停,利用这个可以使用鼠标移到后使动画暂停。
- animation声明动画,@keyframes定义动画
定义动画:@keyframes 动画名称 {}
- keyframes的括号里面是动画的步骤
- 定义步骤的方式:
- 1:form to:
- 2.百分比(可以任意设置,但要求百分比逐渐变大):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ width:100px; /* 如果这里不设置大小,那么动画结束后将不会显示div*/ height:100px; background-color:gray; animation:autoanimation 2s; /* 第一步:声明动画 */ } div:hover { } @keyframes autoanimation { /* from{ width:100px; height:100px; } to{ width:200px; height:200px; } */ 0%{ width:100px; height:100px; } 50%{ width:200px; height:200px; } 100%{ width:100px; height:100px; } } </style> </head> <body> <div></div> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash