引入CSS样式的3种方式
1.直接在行内引用 行内样式法
2.在head内引入<style></style>
内嵌样式法
3.外部链接 引入外部CSS文件法
CSS选择器:
类选择器:
一个标签可以拥有多个class名 一个class名可以被多个标签使用
id选择器:
id 唯一性,每个标签只能有一个ID名 标签之间的ID名,不能重复
标签选择器:
div+p兄弟选择器 选择div同一级得下一个标签
.box>li 子级选择器 .box子级里的所有li不包括孙子级
属性选择器
input[class]{
background: red;
}
input[class^="lvv"]{
background: red;
}
伪类选择器:
p:first-of-type 选择的 p 元素是其父元素的第一个 p 元素
::before默认行内元素 加在元素前面,一定要包含content:””
::after 默认行内元素 加在元素后面 一定要包含content:””
::selection选中变色
::first-line第一行字体
::first-letter 第一个字
CSS优先级
!important>行内样式>id选择器>class选择器>标签选择器>*
div{
background: red !important;
}
float浮动
浮动属性:left right none
浮动特点
1.脱离文档流 向左或向右浮动
2.若元素设置了浮动,位于此元素后面的元素会往上面移动
3.设置浮动的元素会对周边元素产生影响
特征:
1.文字环绕
2.块状元素可以在同一行显示
3. 设置了浮动的盒子 会一直向左胡总和向右走知道触碰了文档边缘或者上一个设置了浮动的盒子
clear:both;清除浮动的影响
定位 position
相对定位:relative 不脱离文档流 可以设置层叠属性 参考自身定位
绝对定位:absolutive 脱离文档流 如果父级设置了相对定位或者绝对定位,那么相对于父级进行定位,如果父级及父级的父级都没有设置定位的话,那就相对于body定位
固定定位 fixed 相对于可视窗口进行定位
盒模型:width padding margin border
标准盒模型:
基于W3C标准盒模型
宽度=width+padding+border+margin
怪异盒模型:
IE盒模型
宽度=width+margin
css字体样式
text-indent: 规定文本块中首行文本的缩进
letter-spacing: 字间距
word-spacing:词间距
word-wrap: break-word
word-break: break-all; 规定自动换行的处理方法 允许单词内换行
浏览器的私有前缀:
谷歌 webkit
火狐 moz
欧鹏 o
IE ms
px 固定像素
em 基于父元素的字体大小 16px=1em
rem 基于跟元素的font-size大小