1.1 css属性,height对行内元素不起作用,
如span,可以转成行内块级元素,加入属性:display:inline-block;
块级元素默认:display:block;
行内块级元素:display:inline-block;
行内元素:display:inline;
1.2 列表属性:
list-style:none; 去掉项目符号
list-style-type:square; 列表类型
list-style-image:url(../img/...); 插入图片(直接居中的)
list-style-position:inside/outside; 插入的图像在边框里/外
复合:list-style:url(../img/...) outside;
1.3 段落属性:
text-transform:capitalize(首字母大写)/lowercase(全部小写)/uppercase(全部大写) 用于英文网站
letter-spacing:normal/nowrap; 字与字的距离
word-spacing:10px; 单词与单词间距
white-space:nowrap(不换行)/normal
1.4 盒模型:
把所有标签都看做一个盒子
盒子的组成部分:
内容的宽+内边距(左右)+边框(左右)+外边距(左右)
内容的高+内边距(上下)+边框(上下)+外边距(上下)
width
height
border:(复合属性)
border-left:
border-right:
border-top:
border-bottom:
四条边都一样:
border-style:solid/dashed(虚线)/dotted(点线)/double(双线)
border-color:#ff0000;
border-width:1px;
复合属性border:6px blue dashed;
border-top:none/0;
图片链接在ie中有边框,解决办法img{border:none;}
内边距(padding):给外侧标签设置里面的距离,内容到边框的距离,会影响盒子的尺寸
padding-left:
padding:10px; 上下左右10px
padding:10px 20px; 上下10px 左右20px
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px 30px 40px 上右下左
padding:10px 0 0 0;
外边距(margin):标签与标签之间的距离,不影响盒子的尺寸
margin-right:
(复合写法同上)
盒子的实际宽度:
盒子的宽度+边框(左右)+内边距(左右)+外边距(左右)
默认情况下,所有标签都有内外边距
p,img,body{
margin:0;
}
ul{
padding:0;
}
css3新增属性:
box-sizing:border-box(保证原来盒子的大小,表示忽略内边距和边框的大小)/content-box(表示不忽略,);
注:
对块级元素来说:上下边距取最大值,左右边距是累加的
对行内元素来说:上下的外边距不起作用
对行内块级元素来说(img\input\select\textarea):上下左右边距都是累加的