CSS其他属性
阅读 (757)一、列表属性
-
定义列表符号样式
{list-style-type:disc|circle| square|none}
属性值 说明 disc 实心圆 circle 空心圆 square 实心方块 none 去掉列表符号 -
使用图片作为列表符号
{list-style-image:url(图像路径); }
url(所使用图片的路径及全称)
-
定义列表符号的位置
{list-style-position:outside|inside;}
取值: outside(外边) inside(里边);
-
简写(应用最多)
{list-style:none ; } /*去掉列表样式*/
简写可直接设置列表属性值
二、边框属性
-
说明
给边框添加样式
-
语法
{border-style: solid/dashed/dotted/double; }
属性值 说明 solid 实线 dashed 虚线 dotted 点状线 double 双线 none/0 去掉边框 -
边框宽度
border-width:取值;
-
边框颜色
border-color:取值;
-
单独设置某个方向的边框属性:
border-top:上边框 border-bottom:下边框 border-left:左边框 border-right:右边框 border-top-style:取值; border-top-width:取值; border-top-color:取值;
-
简写
三、背景属性
CSS 可以设置背景颜色和背景图片,并且可以对图片进行相关设置。
背景颜色
选择符{background-color:red;}
/* 简写:*/
background:red;
背景图片
-
说明
网页中有两种图片形式:一种是插入图片,另一种是背景图。
插入图片:属于网页内容,也就是结构。
背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
-
语法
选择器{background-image : none | url (url) }
参数:
none : 无背景图(默认的)
url : 背景图像路径背景图片的显示原则:
- 容器尺寸等于图片尺寸,背景图片正好显示在容器中;
- 容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
- 容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
- 加载背景图必须有容器区域;
-
注意
- background-image 允许指定一张图片展示在背景中(只有CSS3才可以多背景),通常可以和 background-color 连用。 如果图片不重复,图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
- 建议背景图片后面的地址,url不要加引号。
背景图片平铺
-
说明
平铺
-
语法
选择器{background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 横向平铺
repeat-y : 纵向平铺
-
注意
设置背景图片时,默认把图片在水平和垂直方向铺满。
背景图片位置
-
语法
选择器{background-position:水平方向属性值 垂直方向属性性;}
水平方向值:left/center/right或数值
垂直方向值: top/center/bottom或数值
-
注意
- 水平向右 垂直向下移动 是正数值
- 水平向左 垂直向上移动 是负数值
- 当两个值都是center,写一个值就可以
背景附着
-
说明
设置或检索背景图像是随对象内容滚动还是固定的。
-
语法:
选择器{background-attachment : scroll | fixed }
-
参数:
scroll :背景图像是随对象内容滚动
fixed:背景图像固定
背景简写
-
说明
为了方便记忆,提升可读性,背景图片各属性的书写顺序:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
-
语法
选择符{background:属性值1 属性值2 属性值3;} div{background:#00ff00 url(背景图片的路径及全称) no-repeat scroll center top;}
常用的图片格式
-
jpg
有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )
-
gif
有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;
-
png
有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;
四、浮动属性
普通流(normal flow)
-
说明
前面我们提过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?
CSS的定位机制有3种:普通流(标准流)、浮动和定位。
普通流又称为“文档流”,或者“标准流”,实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种默认的排列方式,不会出现例外的情况的布局叫做普通流布局。
普通流(标准流):类似列车在既定轨道上形式(在地面上)
浮动:好比飞机脱离地面,浮动在空中,但也按照一定的航线飞行。
定位:好比宇宙飞船或卫星,相对于地球摆放
浮动
-
说明
元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程。浮动的目的:就是为了让多个块级元素同一行上显示。
-
语法
div{float:left/right/none}
-
特性
-
浮动只有左右浮动。
-
浮动元素脱离标准流,不占位置,会影响标准流。(标准流在下面,浮动元素漂在标准流的上面)
- 浮动首先创建包含浮动元素的父盒子。因为,浮动的元素总是找距离自己最近的父级元素对齐,但是不会超出父元素的边框和内边距。
<title>浮动</title> <style> #div1 { width: 100px; height: 70px; background-color: hotpink; float: left; border: 1px solid red; } #div2,#div3,#div4 { width: 100px; height: 70px; background-color: hotpink; float: left; border: 1px solid yellow; } </style> <div class="father"> <div class="child"></div> </div>
- 父盒子里的所有子盒子都设置浮动,才能显示在一行上。也就是说,若其中一个子级有浮动,则其他子级都需要浮动。
<style> #div1 { width: 100px; height: 100px; background-color: hotpink; float: left; border: 1px solid red; } #div2,#div3,#div4 { width: 100px; height: 100px; background-color: hotpink; float: left; border: 1px solid yellow; } </style> <div class="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </div>
- 元素添加浮动后,会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。浮动根据元素书写的位置来显示相应的浮动。
<style> div { height: 200px; background-color: pink; float: left; /* 块级元素添加浮动后,会具有行内块元素的特性 */ } span { background-color: hotpink; float: left; /* 行内元素添加浮动后,会具有行内块元素的特性 ,可设置高度*/ height: 100px; } </style> <div id="div1">div1</div> <div id="div2">div2</div> <span>行内元素</span> <span>行内元素</span>
-
总结
float 浮 漏 特
浮: 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。
漏: 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏 给了标准流的盒子。
特: 特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
-
浮动的影响
浮动的影响:对附近的元素布局造成改变,使得布局混乱
因为浮动元素脱离了普通流,会出现父级元素高度坍塌的现象:原来的父容器高度是内部元素撑开的,但是当内部元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌,变为高度0px。
正常标准流:
父容器被子容器高度撑开。
子容器浮动后:
子容器浮动,脱标,父容器没有了高度,就不会被撑开。
当然,我们可以通过给父容器指定高度来解决塌陷问题。但是,很多情况下我们不方便给父容器指定高度,比如新闻,你不知道新闻里有多少字。一般情况下,我们是让下面的内容自动撑开父容器,而不是写死高度。
清除浮动方法
-
说明
清除浮动本质是闭合浮动,把浮动的元素圈到里面,让父容器闭合,不让妖怪(浮动元素)出来兴风作浪。
-
语法
div{clear:属性值;}
属性值 描述 left 清除左侧浮动带来的影响 right 清除右侧浮动带来的影响 both 同时清除左右两侧浮动带来的影响
方法1:额外标签法
-
说明
W3C推荐的做法,通过在浮动元素末尾添加一个空的标签或则其他标签br等亦可。如
。 -
原理
添加一个空div,利用CSS提供的clear:both清除浮动,让父级div能自动获取到高度。
-
优点
通俗易懂,书写方便。浏览器支持好,不容易出现怪问题。
-
缺点
添加许多无意义的标签,结构化较差。 我只能说,w3c你推荐的这种方法,你不值得拥有。。。
方法2:父级添加overflow清除浮动
-
说明
“子不教父之过”,在父容器上做处理。通过触发BFC的方式,实现清除浮动效果。(BFC后面讲解)
-
语法
.father{ overflow: hidden|auto|scroll; /*三个取值都可以实现。*/ }
-
原理
使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
-
优点
代码简洁,浏览器支持好。
-
缺点
内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。(必须定义width或zoom:1,不能和position配合使用,因为超出的尺寸的会被隐藏。)
-
建议
只推荐没有使用position或对overflow:hidden理解的小伙伴儿使用。
方法3:父级添加伪类清除浮动
-
说明
:after 方式为空元素的升级版,好处是不用单独加标签了。
-
使用
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
-
优点
符合闭合浮动思想,更具有结构语义化,大型网站都有使用如:腾迅,网易,新浪等等。
-
缺点
由于IE6-7不支持:after,需要使用 zoom:1触发hasLayout,才能让主流浏览器都支持。
-
建议
推荐使用,建议定义公共类,以减少CSS代码。
-
注意
content:"." 里面加一个小点,或者其他符号,尽量不要为空,否则再firefox 7.0前的版本会有生成空格。
方法4:父级添加双伪元素清除浮动
-
说明
为了更加符合浮动的闭合思想,为父级添加before和after双伪元素来清除浮动。
-
使用
.clearfix:before,.clearfix:after { content:""; display:table; /* 这句话可以触发BFC BFC可以清除浮动 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
-
优点
代码更简洁,代表网站: 小米、腾讯等。
-
缺点
由于IE6-7不支持:after,使用 zoom:1触发hasLayout。