一、列表(list-style)
1.列表的特定样式
list-style有三个属性,这三个属性可以在
或元素上面设置:
1.1 list-style-type: 设置列表的项目符号类型,例:无序列表的方形或者圆形符号,有序列表的数字,字母,或者罗马数字。
1.2 list-style-position:设置符号是在列表内还是列表外。
1.3 list-style-image :设置项目符号为自定义图片
1.1 list-style-type:符号样式取值
/*去掉默认的符号,常用*/
ul, ol {
list-style-type: none;
}
/*列表实心圆点(默认)*/
ul {
list-style-type: disc;
}
/*无序列表空心圆点*/
ul {
list-style-type: circle;
}
/*无序列表实心方块*/
ul {
list-style-type: square;
}
/*有序列表十进制从1开始的阿拉伯数字,*/
ol {
list-style-type: decimal;
}
1.2 list-style-position:项目位置
/*符号是在外面*/
ul {
list-style-position: outiside;
}
/*符号是在块盒内的第一个行内盒,在元素内容流后面*/
ul {
list-style-position: inside;
}
1.3 list-style-image :设置自定义的项目符号图片
/*可以用图形符号*/
ul {
list-style-image: url(//11/08/4vriKTQR6sXnFBW.png);
}
这3个属性可以用单独的list-style来设置。属性值可以任意顺序排列,例如:
ul {
list-style-type: circle;
list-stye-position: inside;
list-style-image: url(example.png);
可简写:
ul {
list-style: circle inside url(example.png);
二、背景(background)
注意:默认情况下,背景区域覆盖内容+内边距+边框
1. background的常用样式:
1.1 background-color:设置背景颜色
1.2 background-image:设置背景图片
1.3 background-position: 设置背景图片的位置
1.4 background-repeat: 设置背景图片的重复值
1.5 background-size: 设置背景图片的大小,IE9以下不支持。
1.6 background-clip: 设置元素背景区域覆盖范围
1.7 background-attachment: 设置背景元素是否随元素滚动二产生动态。
背景样式常用值
1.1 background-color:
①英文名:red;②十六进制颜色:#000; ③rgba(0,0,0,0);
1.2 background-image:
普通的背景图片background-image: url(图片地址);
渐变背景background-image: linear-gradient(颜色, 颜色);
渐变背景
1.3 background-position:
①数值偏移量(单位:px): x y; ②百分比偏移量:x% y%; ③横坐标和纵坐标的固定值:[top |center |bottom ] [left |center |right ];
1.4 background-repeat:
①不重复:no-repeat;②X轴重复:repeat-x; ③Y轴重复:repeat-y; ④XY轴都重复:repeat;
1.5 background-size(css3属性):主要是设置背景图片的尺寸,IE9以下不支持。如果设置了background-attachment: fixed;会使background-size失效。
语法
①:cover: 缩放背景图片宽度或者高度完全覆盖背景区;容器和背景图片大小不同时,会被裁剪可能背景图片会看不见。
②:contain: 调整背景图片宽度和高度完全装入背景区,可能背景区部分空白。
③:设定指定宽度和高度,图片可能会失真。
PS:在no-repeat和repeat情况下,cover和contain的区别:
no-repeat情况下:
①:cover铺满整个容器,图片多出来部分会被裁掉。
②:contain缩放背景图片完全装入背景区,可能背景区域会部分空白;
no-repeat情况下,cover与contain区别
repeat情况下:
①:cover铺满整个容器,图片多出来部分会被裁掉。
②:contain容器至少有一张完整的图,留白区域则平铺背景图,铺不下再裁掉。
repeat情况下,cover与contain区别
PS:contain和cover都会保持背景图片的宽高比,直接写宽高图片有可能会失真。
1.6 background-clip: 设置元素背景区域福覆盖范围
border-box: 覆盖至边框最外围
padding-box: 覆盖至内边距最外围
content-box: 仅覆盖元素内容区域
PS:background样式简写
属性合并简写
.box {
background: #ccc url(images/bg.png) center no-repeat;
}
多重背景
.box {
background: #ccc url(images/bg.png) center no-repeat,#ccc url(images/bg2.png) 20px 20px no-repeat;
三、边框border
1. border有四个属性值,分别对应一个盒子的四条边,分别是上右下左,如图:
边框
//边框的四个基本值
.box {
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
}
2. boder三个常见属性
boder-width //边框粗度
boder-style //边框样式
boder-color //边框颜色
2.1 border-width: 边框粗度,通常用Npx固定单位直接表明,例:border-width: 1px;
2.2 boder-style: 边框样式,设定边框的样子,常用值:soild(默认实线),dotted,dashed(虚线)
boder样式
border-radius边框半径
设置圆角
边框圆角
实现圆形,宽高相等,border-radius设置为宽高的一半以上
圆形
实现三角形
三角形
实现扇形或者半圆
image.png
四、行高(line-height)
定义一行文字占据的垂直空间
PS:文字占据的高度不是有font-size决定的,而是由line-height决定。
行高特性:
有继承性;
单位:①固定单位:px; ②相对单位(倍数):2;③相对单位百分比:200%;
单行文字在元素中垂直居中
设置line-height与容器的高度一样就可以了
line-height垂直居中
相对单位中的倍数和百分比的区别:
例: (line-height: 2;与line-height: 200%)
两者主要是区别是继承的计算方式区别;
line-height: 2;被继承的是倍数,是当前元素font-size的2倍,该倍数会继承给孩子会得到一个新的值;
继承body的line-height倍数,30px*2=60px
line-height: 200%; 当前元素font-size的2倍,计算具体值,然后把具体值继承给孩子。
body里先计算好具体值,20px*200%=40px,在赋值给p,所以是40px。
五、表格(table)
border-collapse设置表格边框是分开还是合并
collapse: 合并
separate: 分开
//表格合并应用代码
table {
border-collapse: collapse;
}
简单的表格
六、inline-block特性
1.特性
呈现inline元素的特性:不占据一整行,宽度由内容宽度决定;
同时呈现block元素的特性:可以对其设置宽高以及上下padding和margin;
多个并排显示时存在inline元素的缝隙问题
inline-block缝隙问题
2.对齐方式
多个不同高度的inline-block元素并排显示时上下对齐的基线是文本内容的底线。
对齐方式
3. 缝隙问题产生的原因以及解决方案
产生的原因:
往前移动(TAB)、换行(LF)、换页(FF)、回车(CR)、SPACE都是空白字符
多个连续的空白字符会合并成一个空格,空格也占据一个字符的空间。
white-space属性可以修改合并的原则
解决方案
①:HTML标签连写,没有连写还是会有缝隙:
连写
②:设置父容器font-size: 0;,然后在设置inline-block的元素font-size
设置父容器font-size为0
③:设置浮动,有可能导致父容器高度塌陷
设置浮动
④:设置负margin挤掉空格,但是会导致元素溢出父容器
负margin
七、vertical-align垂直对齐
用处
设置inline、inline-block、table-cell元素的垂直对齐方式
对齐方式
①、顶部对齐 vertical-align: top;
顶部对齐
②、基线对齐vertical-align: baseline;
基线对齐
③、居中对齐vertical-align: middle;
居中对齐
④、底部对齐vertical-align: bottom;
底部对齐
参考:饥人谷课件