CSS字体属性
font属性复合写法
body {
font: font-style font-weight font-size/line-height font-family;
}
复合选择器
链接伪类选择器
按照LVHA
的顺序声明:link, :visited, :hove, :active
实际开发常用写法:
a {
...
}
a:hover {
...
}
CSS的背景
背景属性复合写法
body {
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
}
CSS三大特性
优先级
各选择器权重如下:
选择器 | 选择器权重 |
---|---|
继承或* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style=“” | 1,0,0,0 |
!important 重要的 | ∞无穷大 |
复合选择器会有权重的叠加。 |
盒子模型
边框(border)属性复合写法
div {
border: 宽度 样式 颜色; /*没有顺序*/
}
内边距(padding)属性复合写法
值的个数 | 表达的意思 |
---|---|
padding: 5px; | 1个值,代表上下左右都有5像素的内边距 |
padding: 5px 10px; | 2个值,代表上下内边距为5像素,左右内边距为10像素 |
padding: 5px 10px 20px; | 3个值,代表上内边距为5像素,左右内边距为10像素,下内边距为20像素 |
padding: 5px 10px 20px 30px; | 4个值,代表上为5像素,右为10像素,下为20像素,左为30像素,顺时针 |
外边距(margin)同理。 |
外边距合并
嵌套块元素外边距合并塌陷问题解决方法:
① 为父元素定义上边框;
② 为父元素定义上内边距;
③ 为父元素添加overflow:hidden
;
④ 浮动、固定,绝对定位的盒子不会有塌陷问题。
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此在布局前,首先要清除网页元素的内外边距。
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
行内元素为了照顾兼容性,尽量只设置左右内外边距,不设置上下内外边距。但是转换为块级元素或行内块元素就可以自由设置了。
清除浮动
为什么要清除浮动?
① 父级没有高度;
② 子盒子浮动;
③ 影响下面的布局。
清除浮动——额外标签法
也称隔墙法。在浮动元素末尾添加一个空的块级元素标签,例如<div style="clear:both"></div>
,或者其他标签如<br />
等。缺点:添加很多无用的标签,结构化较差。
清除浮动——父元素添加overflow
给父元素添加overflow:hidden
属性。缺点:无法显示溢出部分。
清除浮动——:after伪元素
给父元素添加。
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7专有 */
*zoom: 1;
}
清除浮动——双伪元素
给父元素添加。
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
定位(position)
定位的拓展
浮动元素会压住它下面的标准流的盒子,但不会压住下面标准流盒子里文字。
绝对定位(absolute)、固定定位(fixed)元素会压住它下面的标准流的所有内容。
溢出文字省略号显示
单行文字溢出显示省略号
/* 1.先强制一行内显示文本 */
white-space: nowrap; /* 默认normal自动换行 */
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
多行文本溢出显示省略号
有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型 */
display: -webkit-box
/* 限制在一个块元素显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
CSS初始化
每个网页都必须首先进行CSS的初始化(消除不同浏览器对HTML文本呈现的差异)。
/* 把所有标签的内外边距清零。有些网站不推荐使用。 */
* {
margin: 0;
padding: 0;
}
/* 斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li的小圆点 */
li {
list-style: none;
}
img {
/* 照顾低版本浏览器如果图片有链接有边框的问题 */
border: 0;
/* 取消图片底下的空白缝隙 */
vertical-align: middle;
}
/* 鼠标悬停时变换样式 */
button {
cursor: pointer;
}
body {
/* CSS3 抗锯齿性 */
-webkit-font-smoothing: antialiased;
font: ...;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
Unicode编码字体:把中文字体的名称用相应的Unicode编码来代替,可以有效避免浏览器解释CSS代码时出现乱码的问题,比如:宋体 \5B8B\4F53
。