我们使用CSS最常用,和容易混淆的有文字和文本样式,背景和列表样式,position定位,float浮动,盒子模型~~下文详细整理了这些内容的知识点
1.文字和文本样式
(1)常用CSS文字样式
- 字体:font-family
- 文字大小:font-size
- 文字颜色:font-color
- 文字粗细:font-weight
- 文字样式:font-style
(2)常用CSS文本样式
- text-align: left|right|center|justify 设置元素内文本水平对齐方式(该属性对块级元素设置有效)
- line-height: 长度值|百分比 设置元素中文本行高(行高指文本行的基线间的距离)
- vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom 设置元素的内容的垂直方式
文本样式属性:
字体属性 | 说明 |
---|---|
word-spacing | 设置元素内单词之间的间距 |
letter-spacing | 设置元素内字母之间的间距 |
text-transform | 设置元素内文本的大小写 (capitalize uppercase lowercase none) |
text-decoration | 设置元素内文本的装饰 (underline overline line-throught blink none) |
2.CSS背景和列表
(1)背景样式
- background-color:颜色值 设置元素的背景颜色(注意:背景区包括内容、内边距(padding)和边框、不包括外边距(margin))
- background-image 把图像设置为背景
- background-position 设置背景图像的起始位置
background-position的参数
值 | 说明 | 注意 |
---|---|---|
长度值(x y) | 第一个值水平位置,第二个值垂直位置左上角 0 0 | 只写一个参数的话,第二个默认为居中 |
百分比(x% y%) | 第一个值水平位置,第二个值垂直位置左上角 0% 0% | 只写一个参数的话,第二个默认为居中 |
top | 顶部显示,相当于垂直方向0 | 只写一个参数的话,第二个默认为居中 |
right | 右边显示,相当于水平方向100% | 只写一个参数的话,第二个默认为居中 |
left | 左边显示,相当于水平方向0 | 只写一个参数的话,第二个默认为居中 |
bottom | 底部显示,相当于垂直方向100% | 只写一个参数的话,第二个默认为居中 |
center | 居中显示,相当于垂直方向50%水平方向50% | 水平垂直方向都居中 |
- background-attachment:scroll 、 fixed 背景图像是否固定或者随着页面的其余部分滚动
说明:
scroll: 默认值,图片随滚动条滚动
fixed: 当页面的其余部分滚动时,背景图片不会移动 - background-repeat:repeat | no-repeat | repeat-x | repeat-y设置背景图像是否重复及如何重复
- background 简写属性,作用是将背景属性设置在一个声明中
(2)列表样式
- list-style-type 设置列表项标志的类型
- list-style-image:URL | none 将图像设置为列表项标志
- list-style-position:inside | outside 设置列表中列表项标志的位置
说明
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐 - list-style 简写属性,用于把所有列表的属性设置于一个声明中
3.CSS浮动–float
首先,我们了解一下CSS的定位机制:普通流,浮动,绝对定位
- 普通流(标准流):默认状态,元素自动从左往右,从上往下的排列。
块元素:(div p h1~h6 ul ol li dl dt dd)
1.独占一行
2.可以设置宽、高
3.如果不设置宽度,宽度默认为容器的100%
行内元素:(span a b i u em …)
1.与其他元素同行显示
2.不可以设置宽、高
3.宽高就是文字或图片的宽高 - Float (浮动)
1.会使元素向左或向右移动,只能左右,不能上下
2.浮动元素碰到包含框或另一个浮动框,浮动停止
3.浮动元素之后的元素将围绕它,之前的不受影响
4.浮动元素会脱离标准流
浮动的基本语法
float:left 靠左浮动
float:right 靠右浮动
float:none 不适用浮动
使用浮动后可能产生的问题
元素使用浮动后会脱离普通流
浮动溢出
清除浮动
清除浮动语法:
clear:none | left | right | both
清除浮动的常用方法
方法一:在浮动元素后使用一个空元素
例如:<div class="clear"></div>
方法二:给浮动元素的容器添加overflow:hidden
方法三:使用CSS3的:after伪元素
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.盒子模型
(1)网页中的盒子模型
(2)盒子模型中的属性
- 宽度属性
宽度:width:长度值 | 百分比 | auto
最大宽度: max-width:长度值 | 百分比 | auto
最小宽度:min-width:长度值 | 百分比 | auto - 高度属性
高度:height:长度值 | 百分比 | auto
最大宽度:max-width:长度值 | 百分比 | auto
最小宽度:min-height:长度值 | 百分比 | auto - 边框属性
边框宽度:border-width:thin | medium | thick |长度值
边框颜色:border-color:颜色值
边框样式:border-style:值 | none | hidden
可以用left right top bottom 来表示边框的方向并设定属性值 ; 如:border-left-color(设置左边框的颜色)
边框属性设置缩写: border:【宽度】 | 【样式】 | 【颜色】 - 内边距属性
- 外边距属性
边距属性缩写的值对应的方向图
(3)display属性
- inline : 元素将显示为内联元素,元素前后没有换行符
- block :元素将显示为块级元素,元素前后会带有换行符
- inline-block : 行内块元素,元素呈现为inline,具有block的特征
- none 此元素不会被显示
(4)样式继承关系
5.CSS中的定位模型–position
使用定位模型来达到布局的目的