一、CSS基础知识
什么是CSS:
- 层叠样式表,美化html
CSS的引入方式:
- 内部样式表:在
<head>
标签里添加<style>
标签 - 外部样式表:在
<head>
标签里添加<link>
标签内引入css文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 行内样式:标签内添加
style=""
属性
优先级:行内>内部>外部>默认
CSS基础选择器
- 标签选择器,例:
h1 {
color:red;
font-size:14px;
}
- 类选择器以一个点号
.
定义,例:
.green {
color:green;
} /*多个类名空格隔开*/
<p class="green">...</p>
- id选择器以
#
来定义,例:
#red {
color:red;
} /*id用于唯一的元素*/
<p id="red">...</p>
- 通配符选择器以
*
来定义,例:
* {
color:red;
} /*用于所有标签统一修改样式*/
CSS复合选择器
- 后代选择器:元素1
- 子选择器:元素1
>
元素2 { 样式声明 } - 并集选择器:元素1
,
元素2 { 样式声明 } - 伪类选择器:使用冒号
:
- 链接伪类选择器
a:link
- 正常,未访问过的链接a:visited
- 用户已访问过的链接a:hover
- 当用户鼠标放在链接上时a:active
- 链接被点击的那一刻
- 链接伪类选择器
注意:LVHA写法
:foucs
伪类选择器,获得焦点元素
CSS三大特性
- 层叠性
- 就近原则,后来居上
- 继承性
- 子标签继承父标签的某些样式如
text-
,font-
,line-
,color
等
- 子标签继承父标签的某些样式如
- 优先级
- !important>行内>id选择器>类选择器>标签选择器>通配符选择器>继承
- 继承/通配符选择器:0,0,0,0
- 标签选择器 : 0,0,0,1
- 类选择器 : 0,0,1,0
- id选择器 : 0,1,0,0
- 行内 : 1,0,0,0
- !important : 无穷
- 复合选择器:权重叠加
emmet语法
- 生成标签:标签名+tab
- 多个标签:标签名*个数+tab
- 包含标签:标签名>标签名+tab
- 兄弟标签:标签名+标签名+tab
- 带类名/id名:标签名.类名/#id名+tab
- 有顺序:$
- 例:
p.demo$*5
,生成类名demo1~demo5
- 例:
- 生成标签内部内容:标签名{文字}
二、CSS属性
字体样式font
font-family
指定文本的字体系列font-size
指定文本的字体大小font-weight
指定文本的字体粗细normal/400
,bord/700
font-style
指定文字样式是否倾斜normal
,italic
- 复合形式:
{font: font-style font-weight font-size/line-height font-family}
/* font-size,font-family不可省 */
文本样式text
color
设置文本颜色red
,#ff0000
,rgb(255,0,0)
text-align
文字水平对齐left | right | center
text-indent
缩进效果,1em
:1个文字大小text-decoration
装饰文本,下划线underline
,删除线line-through
,取消下划线none
line-height
行高:上间距+下间距+文本高度- 文字垂直居中:
line-height = height
背景样式background
background-color
,背景颜色,默认transparent
background-image
,背景图片的url,默认none
background-repeat
,背景平铺,默认repeat
,可选no-repeat | repeat-x | repeat-y
background-attachment
:背景固定,默认scroll
,可选fixed
background-position:x y;
- x,y可以是精确单位,方位名词或混用
- 精确单位:第一个x,第二个y,若只指定一个一定是x坐标,另一个垂直居中
- 方位名词:两个前后顺序无关,省略一个另一个默认居中
- 水平:
left | center | right
- 垂直:
top | center | bottom
background:rgba(0,0,0,.3)
最后一个参数alpha透明度0~1(CSS3)- 复合写法:颜色,图片地址,平铺,滚动,位置
列表list
list-style:none
,去掉小圆点
三、CSS元素显示模式
块级元素<div> <p> <h1>
- 独占一行
- 可以设置高度,宽度,内外边距
- 宽度默认为容器的100%
- 里面可以放块级元素或行内元素
行内元素<span> <a> <strong> <em>
- 一行可以放多个
- 宽度和高度不能直接设置
- 默认宽度为本身内容的宽度
- 里面只能放文本或行内元素,不能放块级元素
注:
<a>
里面不能再放<a>
行内块元素<input /> <img /> <td />
- 一行可以放多个
- 默认宽度为本身内容的宽度
- 可以设置高度,宽度
元素显示模式转换
- 转换为块级元素:
display:block
- 转换为行内元素:
display:inline
- 转换为行内块元素:
display:inline-block
元素的显示与隐藏
display
display:block
display:none
隐藏,不占有原来位置
- visibility
visibility:visible
visibility:hidden
隐藏,保留原来位置
- overflow
overflow:visible
overflow:hidden
,定位慎用overflow:scroll
,滚动条overflow:auto
在需要的时候添加滚动条
四、CSS盒子模型
盒子模型的四个组成部分
Border(边框)
border-style
用于设置元素所有边框的样式border-top | bottom | left | right
单独地为各边设置边框样式solid
: 定义实线边框dashed
: 定义一个虚线边框dotted
: 定义一个点线边框
border-width
边框宽度border-color
边框颜色border-collapse
表格细线边框
Content(内容)
Padding(内边距)
padding-top | bottom | left | right
padding :5px
; 上下左右padding :5px 10px
; 上下 左右padding :5px 10px 20px
; 上 左右 下padding :5px 10px 20px 30px
; 上 右 下 左
Margin(外边距)
margin-top | bottom | left | right
盒子模型注意事项
- 边框会额外增加盒子的实际大小
- 若盒子已有大小,设置内边距会撑大盒子
- 如果遇到嵌套的情况,子元素没有设定宽高,则设置
padding
不会撑开父元素的盒子 - 行内元素不设置上下内外边距
外边距合并问题
相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素设置了下外边距
margin-bottom
,下面的元素设置了上外边距margin-top
,则它们之间的垂直间距并不是margin-bottom + margin-top
,而是取两个值中的较大者。所以尽量只给一个盒子添加margin
值。
塌陷问题
- 对于两个嵌套关系(父子关系)的块元素,当父元素和子元素同时都设置了上外边距时,父元素会向下塌陷较大的外边距值,并且子元素并不会和父元素隔开,即子元素设置的上外边距没有效果。
塌陷问题的解决
- 父元素定义上边框
- 父元素定义上内边距
- 父元素添加
overflow:hidden
- 浮动、固定,绝对定位的盒子不会有塌陷问题
清除内外边距:
* {
padding:0;
margin:0;
}
五、浮动
为什么需要浮动
- 实现多个盒子(div)水平排列成一行
- 实现盒子的左右对齐
浮动的特性
- 脱标:脱离标准流,不再保留原来位置
- 一行内显示,顶端排列对齐,父级宽度装不下另起一行
- 具有行内块元素的特性
- 写法:
float:none | left | right
浮动注意事项
浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐,
- 不会与父盒子的边框重叠,也不会超过父盒子的内边距
浮动元素与兄弟盒子的关系
- 如果前一个兄弟盒子是浮动的,那么当前盒子会与前一个盒子的顶部对齐
- 如果前一个兄弟盒子标准流,那么当前盒子会显示在前一个兄弟盒子的下方
- 浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流
- 一个盒子里面有多个子盒子,其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
清除浮动
什么时候使用清除浮动
- 父级没高度
- 子盒子浮动了
- 影响下面布局了,就应该使用清除浮动
清除浮动的本质和策略
- 本质:清除浮动元素脱标造成的影响
- 策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
清除浮动方法
- 额外标签法:在最后一个浮动的子元素后面添加一个额外标签,添加
clear:both
样式 - 父元素添加
overflow:hidden
- 父元素添加
after
伪元素clearfix
- 父元素添加双伪元素
六、定位
为什么需要定位
- 某个元素可以自由地在一个盒子内移动位置,并且压住其他盒子
- 滚动窗口的时候,盒子固定在屏幕的某个位置
定位模式
定位=定位模式+边偏移
-
static
静态定位:相当于无定位 -
relative
相对定位:参照自己原来的位置移动,不脱标 -
absolute
绝对定位:参照带有定位的父级元素来移动位置,若父元素没有定位,则以浏览器为准定位,脱标 -
fixed
固定定位:以可视窗口为基准,脱标,不随滚动条滚动 -
sticky
粘性定位:以可视窗口为基准,不脱标,四个参数至少一个 -
边偏移
top bottom left right
子绝父相
- 子级绝对定位,在父级内任意摆放,不会影响其他兄弟盒子
- 父级相对定位,限制子盒子在父盒子内显示,需要占有位置
绝对定位的盒子居中
- 绝对定位/固定定位的盒子不能通过设置
margin: auto
设置水平居中 - 绝对定位的盒子居中:
.box {
position: absolute
left: 50%;
top: 50%; /*让盒子的左上角移动到父级元素的中心位置*/
margin-left: -100px;
margin-top: -100px; /*让盒子向左上各移动自身宽度的一半*/
...
}
堆叠顺序(z-index)
- 在使用定位布局时,可能会出现盒子重叠的情况
- 加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子
- 应用
z-index
层叠等级属性可以调整盒子的堆叠顺序 z-index
属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上
定位注意事项
- 浮动不会压住标准流文字或图片,定位会压住
- 一个行内盒子,如果加了浮动、固定定位和绝对定位,默认转换为行内块元素,可以给这个盒子直接设置宽度和高度