CSS完整笔记
Css
一 css的语法
选择器名称{
属性名称1：属性的值1；
}
二 css的引入方式
CSS有三种方式： 内联式：在html头标签添加style 添加样式 不推荐
内部式CSS ：在head里面 style标签里面添加
外链式CSS：新建css 用link引用样式
五 什么是选择器
用于选择需要添加样式的目标对象。
六 选择器的基本语法
选择器名称 {
属性名称1：属性的值1；
...
}
四 选择器
基本选择器：通用选择器* :作用于html上的所有元素
标签选择器：必须是固定的标签 不能使用自己的定义名称 选择网页的 指定标签
类选择器：以点为前缀。通过标签的class属性调用选择器 以标签的class作为样式的引用依据（调用多个选择器用空格隔开 不能数字开头）
Id选择器：以#作为前缀 通过id属性进行名称匹配
选择器分组：将同样的样式应用于多个选择器，可以将选择符以逗号分 隔的方式并为组
伪类选择器：动态伪类选择器：E:hover：鼠标悬停时的样式
E:active：在鼠标点击与释放之间发生的事件时的样 式
鼠标的四种状态：E:link 未访问的链接
E:visited 已访问的链接
E:hover 鼠标悬停状态
E:active 选定的激活状态
层次选择器： E F包含选择符 E>F子选择符 E+F相邻选择器 E~F相邻全部选择器 伪类选择器： E:first-childirst-child必须是兄弟中的第一个
last-child first-child必须是兄弟中的第一个
only-child 仅有的一个子元素E
E:nth-child(n) 父元素的第n个子元素E。
E:nth-last-child(n) 父元素的倒数第n个子元素E。
五 字体属性 与字体相关的样式
font-size：大小尺寸 ：值：inherited 默认值16px px像素 %百分比相对于父标签的 字体大小的百分比 em 倍数 相对于父元素标签字体大小的倍 数 rem 相对于根标签文本字体的尺寸
font-weight：粗细:normol 正常的字体 默认 声明取消之前的值 bold：加粗 bolder：特 加粗 lighter：细体 number自定义
line-height：行高 ：行高等于容器的高度文字垂直居中
font-family：字体 ：一般建议用三种字体 首选 其次 备用 用逗号隔开
font-style：样式 ：normol 普通 italic 斜体
font：简写：font：font-style|font-weight|font-size|font-family
注意 必须按照顺序写
六 文本属性
color 颜色 ：值 英文单词 16进制的rgb值 特定情况下不可缩写（不区分大小写） 注意取值范[0,255] rgba函数 a表示透明度 取值范围[0,1]
text-align 水平对齐方式 left左对齐 right右对齐 center居中
Vertical-align 垂直对齐方式 bottom middle top 解决基准线对齐问题
text-decoration 修饰线 none :无划线 underline :下划线 line-through :贯穿线（删除线）
text-indent 文本缩进 2em 首行缩进两个字符
text-overflow 文本溢出标识 clip : 简单的裁切 ellipsis : 当对象内文本溢出时显示省略 标记（...）
注意：
text-overflow通常与 white-space:nowrap; overflow:hidden; 配合使用才生效。
单行溢出显示省略 white-space:nowrap; overflow:hidden;
text-overflow:ellipsis
多行溢出显示省略 overflow:hidden; text-overflow:ellipsis;
display:-webkit-box； -webkit-box-orient:vertical;
-webit-line-clamp:2
text-shadow文本阴影 四个值 （水平偏移值，垂直偏移值，阴影模糊值，阴影的颜色）
七 列表样式
list-style列表样式 none 无列表序 取消之前样式 disc: 实心圆 circle: 空心圆
八 背景属性
background-color 背景颜色 （transparent : 背景色透明）
background-repeat 背景平铺 no-repeat : 背景图像不平铺repeat-x repeat-y
background-position 背景图位置 默认值显示在左上角 关键词：top bottom left right center 或者（0,0）坐标 向右为x 向下为y （px，px）
background 背景复合属性 语法：background : background-color ||background-image ||background-repeat ||background-position（空格隔开 顺序没有影响）
background-size背景尺寸属性 cover:等比缩放到完全覆盖容器，可能超出容器。
contain:等比缩放到宽度或高度，背景图像始终被包含在 容器内。
九 浮动布局
浮动的属性float 值 float :none| left|right
十 css的继承
文本相关的属性是继承的
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等
列表相关的属性是继承的
list-style、 list-style-image、list-style-position、list-style-type
十一 CSS错误调试方法
- 没有选择器
如果是外部样式（外链式），检查<link>标签是否正确，检查引入css文件路径 是否正确
检查选择器是否正确
检查选择器的上一行是否正确结束，可能少 } 或者少 ;
检查选择器单词是否与html中类名或ID一致，检查 class是否拼写正确
2.有选择器
检查属性名，是否拼写正确
检查属性值，是否拼写正确
检查选择器优先级，是否被其它样式覆盖
检查是否有浮动、定位等脱离文本流的样式影响
十二 什么是盒子模型
CSS技术所使用的一种思维模型。
十三 盒子模型结构以及类型和区别
盒子结构是由=内容 内边距 外边距 边框 组成
标准盒子的宽高=内容（设置的宽高） 内边距 边框组成
怪异盒子的宽高=设置的宽高
通过 box-sizing切换盒子的模式 boder-box 怪异盒子 content-box标准 盒子
十四 高度
最小高度min-height 只有块元素才可以设置最小高度，行内元素无法设置最小高度
最大高度max-height 高度大于最大高度时，超出内容的处理方式可以通过overflow决 定是否显示
十五 边距
Margin 外边距 padding 内边距 属性 top left right bottom
注意： 如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边
十六 边框
border-width：设置对象的边框宽度。
边框线型border-style属性值none无边框 dotted（点线）dashed（虚线）solid（实线）
边框颜色 border-color
border-radius圆角边框 直接输入值 容器为正方形 圆角为他的一半 就会成为圆
复合属性 ：语法： border : border-width|border-style|border-color
十七 显示与隐藏 display
display:inline转为行内元素
display:block;行内转成块级元素
display:inline-block转行内块级元素
十八 清除浮动的4种方式（掌握）
空div标签清除浮动，clear:both
:after伪元素实现元素末尾添加一个看不见的块元素
在父标签上，设置overflow:hidden
固定高度，不会造成影响
十九 鼠标形状 cursor
hand（手型）、crosshair （“十”型）、text （“I”型）、wait（等待）、default （默认）、help（帮助）、
二十 语义标签
<header>定义了文档的头部区域
<nav>标签定义导航链接的部分。
<main>定义页面主要内容。
<section>定义文档中的节（section、区段）。
<article>定义页面独立的文章内容区域。
<aside>定义页面的侧边栏内容。
十三 语义化标签的好处
看到标签名，就知道这个标签所想表达的意义。语义元素能够清楚的描述其意义给浏览 器、开发者、搜索引擎。
十四 表格与表单
<table> ：定义表格
<tr> ：定义表格的行
<td> ：定义表格中的单元格
<th> ：定义表格中的表头单元格
<thead> ：定义表格中的表头内容
<tbody> ：定义表格中的主体内容
<tfoot> ：定义表格中的表注内容（脚注）
<caption>：定义表格标题
colspan : 跨列合并（横向），一个单元格占多个单元格的位置 跨n列，就把下面 的n-1个td删除
rowspan : 跨行合并（纵向），一个单元格占多个单元格的位置 跨n行，在把它下 面n-1 个 tr的td删除
十五 什么是表单 组成
表单在网页中主要负责数据采集功能 组成 表单标签 表单域 表单按钮
必须定义每个控件元素的 name标签属性
十六 form标签
基本语法：
<form action="URL" method="get|post">...</form>
属性 action method：值（get，post）
input的类型 ：text 普通文本框 password 密码框 submit 提交按钮
button 普通按钮 reset 重置按钮 radio 单选
checkbox 多选 file 文件上传框 hidden 影藏域
H5 新增的类型 color 颜色选择器 date 日期选择框
l datetime 日期时间选择框 datetime-local 日期和时间
month 月份选择器l time 时间选择框
week 周和年选择框 email 电子邮件
l number 数值的输入域 range 区间选择器
l search 搜索框 tel 电话号码
l url url地址
十七 下拉框 select
<seclet>和<option>一般同时使用，select代表的下拉框，option表示它的每一项。
基本结构：
<select name=””>
<option></option>
</select>
注意 当option中有value的时候，传将value传到后台
没有value的时候，将它显示的内容传到后台
十八 <textarea> 标签定义多行的文本输入控件。
十九 label标签
Label的两种写法：
1）<label> <input type="radio" name="gender" id="male" />男 </label>
2）<input type="radio" name="gender" id="male" /><label for="male">男</label>
二十 按钮 button
type 属性。Internet Explorer(低版本) 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。
二十一 伪元素
::before”在之前 和“::after” 在之后不是指存在于标记中的内容，而是可以插入额外内 容的位置。尽管 生成的内容不会成为DOM的一部分，但它同样可以设置样式。
二十二 CSS选择器优先级
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
1000 100 10 1
二十三 定位
position:absolute绝对定位
position:fixed;固定定位 */
position:relative 相对定位
二十四 与 position搭配使用。
当对象的定位方式是相对定位的时，以当前对象为基准，表示偏移量。
当对象的定位方式是固定定位时，以浏览器为基准，表示与浏览器边框之间的距离。
当对象的父对象有设置定位，以父对象为基准，表示与父对象之间的距离。
二十五 相对定位的定位原则：
使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。
使用相对定位的盒子仍在标准文本流中，它对父块和兄弟盒子没有任何影响。
二十六 定位的两种情况
最近一个父级没有定位属性：
定位元素基于浏览器窗口进行定位，相当于fixed
最近一个父级已经有定位属性(非static以外的三个属性之一):
定位元素基于已经有定位属性的最近一个父级进行定位
三十七 固定定位
当对象的定位方式是固定定位时，以浏览器为基准，表示与浏览器边框之间的距离。 不会脱离文本流
三十八 层次 z-index 数字越大越先显示
三十九 CSS3新特性
选择器 文字颜色 特效背景和边框 盒子模型 布局 过渡 动画 2D/3D转换
四十 盒子阴影
box-shadow 四个值 （水平偏移值，垂直偏移值，阴影模糊值，阴影的颜色）
四十一 过渡动画
transition:过渡动画
四十二 outline：none 清除外轮廓