HTML+CSS 个人学习时的笔记，粗略参考【CSS】
CSS
CSS书写顺序
| 1. 布局定位属性 | display / position / float / clear / visibility / overflow |
| 2. 自身属性 | width / height / margin / padding / border / background |
| 3. 文本属性 | color / font / text-decoration / text-align / vertical-align / white-space / break-word |
| 4. 其他属性 | content / cursor / border-radius / box-shadow / text-shadow… |
清除内外边距
* {
margin: 0;
padding: 0;
}
将所有元素的内外间距都设为0，因为不同浏览器策略不同，这样是为了消除差异，方便页面布局。
注意：行内元素的外边距，只有左右方向起作用，上下不起作用。尽量不要给行内元素指定 上下的内外边距。
CSS选择器
-
基础选择器
-
标签选择器 →给
这种标签定义统一样式，比较基础。类选择器 →单独选择一个或几个标签
.head {...}这种形式，类似函数的定义和调用。调用用class=" ">>调用类 查一下 类命名规范.head { width: 100px; height: 200px; color: #888; }<p class="head">hello world!p>id选择器 一次只能选择一个标签，一般和js搭配 如
#abc {...}通配符选择器 选取页面中所有元素，不需要调用，如
*{...}复合选择器
-
后代
ul li a {...} -
子 指定最近的子类
ul>li -
并集
, -
伪类：用于向某些选择器添加特殊的效果，最大的特点是用冒号表示
-
链接伪类
a:link选择所有未被访问的链接 a:visited选择所有已被访问的链接 a:hover选择鼠标指针位于其上的链接 a:active选择活动链接（鼠标按下未弹起） 为了确保生效，请按照LVHA的顺序写
链接是需要单独指定样式的，包含在大容器中不会随着外面的样式变化。
实际开发中，先写个a链接样式，再写一个hover，就可以了
-
：focus伪类
用于选取获得焦点的表单元素
焦点=光标，一般情况适用于
主要针对表单input:focus { background-color: yellow; } -
元素伪
-
复合选择器总结
选择器 作用 特征 隔开符号及用法 后代选择器 用来选择后元素 可以是子孙后代 .nav a { }/ul li a {}子代选择器 选择最近一级元素 只选亲儿子 .nav>a并集选择器 选择某些相同样式的元素 可以用于集体声明 .nav,.header链接伪类选择器 选择不同状态的链接 跟链接相关 重点记住 a{ }和a:hover实际开发的写法:focus选择器 选择获得光标的表单 跟图表相关 input:focus记住这个写法 PS：
一个大div，里面小div，鼠标经过大盒子，小盒子做一些变化
.div_big:hover .div_small {}一个大div，里面伪类小div，鼠标经过大盒子，小伪类做一些变化
div:hover::after {}
CSS三大特性
-
层叠性
相同的选择器相同的样式，遵循后面覆盖面前的原则。
-
继承性
子标签会继承父标签的某些样式（
text-font-line-color）行高的继承
一个小说明：font可以一起指定文字大小和行高 如font: 12px/20px;
已有父标签body，子标签div body { font:12px/1.5; 这是属于行高不带单位，表示其子元素的行高为子元素文字大小的1.5倍 } div { font-size: 14px; div里的文字行高就为14*1.5 }这样的写法就是为了让子元素自己调整合适的高度。
-
优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器 权重 继承 或者 * 0,0,0,0 元素选择器 0,0,0,1 类选择器 伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style=" " 1,0,0,0 !important ∞ <div class="test" id="demo" style="color:blue">我的世界div>继承的权重是0！如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.
a链接在浏览器中是默认指定了一个样式 蓝色 下划线 ，所以继承对a链接是无效的，必须自己写a
CSS style
可以给
加style，也就是全局背景、样式的。<body style="..."> ... body>
CSS盒子
页面布局三大核心
- 盒子模型
利用CSS摆盒子 - 浮动
- 定位
传统网页布局三种方式
-
普通流（标准流，文档流）
所谓的标准流，就是标签按照规定好默认方式排列。
- 块级元素独占一行，从上到下。
- 行内元素按照顺序，从左到右，碰到父元素边缘自动换行
标准流是最基本的网页布局方式。
-
浮动
-
定位
边框border
border:border-width（边框粗细） border-style（边框样式） border-color（边框颜色）border会影响盒子的大小
内边距padding
边框与内容之间的距离
padding-上下左右 up / bottom / left / right
为了方便，可以选择写值的个数
1个值代表全部；2个值代表上下和左右；3个值代表上 左右 下；4个值代表上右下左（顺时针）padding会影响盒子的大小
有宽度的盒子，设置padding的左右会撑大盒子；同理，有高度的盒子，padding上下也会撑大。所以，想要不撑大，就不设置相应的宽高。若必须得设置宽高，则考虑用margin来做。
外边距margin
控制盒子与盒子之间的距离
margin-上下左右 up / bottom / left / right
简写方式与padding完全相同
外边距可以让“块级盒子”水平居中，但是有两个条件：
盒子必须制定了width
只需要把盒子左右外边距都设置成auto
盒子与盒子之间 用margin
盒子高级效果（圆角、阴影）
圆角边框
border-radius: 10px; //填的是圆形半径 或者 百分比（宽度的百分比）盒子阴影
box-shadow: 'h-shadow v-shadow blur spread color insert'值 描述 h-shadow必需，水平阴影的位置，允许负值 v-shadow必需，垂直阴影的位置，允许负值 blur可选，模糊距离 spread可选，阴影的尺寸 color可选，阴影的颜色 insert可选，将外部阴影改为内部阴影 文字阴影
text-shadow
CSS浮动
回答几个问题：
- 为什么需要浮动？
- 浮动的排列特性
- 为什么需要清除浮动？说出几种清除浮动的方法
为什么需要浮动？
浮动可以改变元素标签默认排列方式
浮动最典型的应用，可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。
选择器 { float: 属性值；}none元素不浮动 left向左浮动 right向右
<style> .div1 { float: left; width: 100px;height: 100px;background-color: cornflowerblue; } .div2 { float: left; width: 100px;height: 100px;background-color: green; } .div3 { float: right; width: 100px;height: 100px;background-color: firebrick; } style> <body> <div class="div1">1div> <div class="div2">2div> <div class="div3">3div> body>这样无需display成行内块
浮动特性
加了浮动的元素有很多特性
-
浮动元素会脱离标准流
脱离标准的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置
.div1 { float: left; width: 100px; height: 100px; background-color: cornflowerblue; } .div2 { width: 200px; height: 200px; background-color: green; }如果一个浮动，另一个不浮动，后面的就会占据浮动元素原先的位置（因为你飞走了这位置就不是你的了）
-
浮动的元素会一行内显示并元素顶部对齐
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
-
浮动的元素会具有行内块元素的特性
任何元素都可以浮动，添加之后具有行内块元素的特性。
如果块级元素没有设置宽度，默认是父级的100%。但是加浮动后，宽度由内容大小来定。
浮动元素经常和标准流父级搭配
先用标准流摆上下位置，在标准流盒子里面再摆浮动子元素
清除浮动
我们为了让父盒子自适应内容来填充高度没有设置父盒子的高度，结果里面的子元素设置了浮动，不占据位置，会导致父盒子的高度变成0，影响后面的布局。
父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，使得父级有高度。
div { clear: both; }元素 说明 left不允许左侧有浮动元素（清除左侧） right不允许右侧有浮动元素（清除右侧） both√两边清除 方法：
-
额外标签法（隔墙法）
在最后一个浮动元素后面加一个空白标签（必须是块级元素）
<style> .clearfloat { clear: both; } style> <div> <div class="1">1div> <div class="2">2div> <div class="clearfloat">div> /*就是在这里加一个空白标签当一堵墙把高度撑起来*/ div>缺点是添加很多无意义标签，结构很差。
-
父级overflow
给父级盒子添加属性
overflow，参数为hiddenautoscroll.father { overflow: hidden; }缺点是无法显示溢出的部分
-
:after伪元素法
把这个类
clearfix添加到父元素的标签class上 -
双伪元素清除浮动
清除浮动总结
为什么要清除浮动？
- 父级没高度
- 子盒子浮动了
- 影响了下面的布局
清除浮动的方法
方法 优点 缺点 额外标签法 通俗，方便 添加很多无意义标签，结构化差 父级overflow: hidden; 书写简单 溢出隐藏 父级:after伪元素 结构语义化正确 有ie6-7的兼容问题 父级双伪元素 结构语义化正确 有ie6-7的兼容问题
CSS定位
-
为什么要用定位
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由移动，或者固定在屏幕某个区域，并且可以压住其他盒子。
-
什么是定位
将盒子定在某一个位置，定位也是摆盒子
-
定位的组成
定位 = 定位模式 + 边偏移
定位模式
定位模式决定元素的定位方式，用position属性，有4个值：
值 语义 static静态定位 默认定位，无定位（理解成标准流） relative相对定位（重要） 相对于它原来的位置来说 absolute绝对定位 相对祖先元素来说的 fixed固定定位 边偏移
边偏移就是定位的盒子的最终位置，有top bottom left right
相对定位
div { position: relative; top: 20px; right: 10px; }- 移动位置参照自己原来的位置
- 原来在标准流的位置继续占用，后面的盒子不会挤上来
绝对定位
div { position: absolute; top: 20px; right: 10px; }移动的时候相对他的祖先元素来说的
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准。（不认爹，自己跑出去找浏览器爹）
- 如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置（认爹了）
- 绝对定位不再占有原来的位置（脱标了）（大优点！）
固定定位
元素固定于浏览器可视区的位置
div { position: fixed; top: 10px; right: 10px; }- 跟父元素没有关系
- 不随滚动条移动
- 固定定位不占有原先位置
定位的总结
定位模式 是否脱标 移动位置 是否常用 static静态定位 否 不能使用边偏移 少 relative相对定位 否（占有位子） 相对于自身位置移动 常用 absolute绝对定位 是（不占有位置） 带有定位的父级 常用 fixed固定定位 是（不占有位置） 浏览器可视区 常用 sticky粘性定位 否（占有位置） 浏览器可视区 少 Z轴
垂直于平面的轴，用它来衡量盒子的前后覆盖顺序
语法为：
div { z-index: 1; }数值可以是正整数，负整数，0，默认是auto；数值越大，盒子越上。
比如，
.box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .one { background-color: red; } .two { background-color: green; } .three { background-color: blue; }<div class="box one">1div> <div class="box two">2div> <div class="box three">3div>三个盒子都加了绝对定位，都会飘起来，会产生重叠冲突。因为123属性值相同，所以后来者居上，3会在最上面。
想要谁在最上面，就给谁加z-index值
- 数值后面没有单位
- 只有定位的盒子才有这个属性
居中
元素的显示和隐藏
display
visib
overflow
CSS高级
精灵图
好处：
- 通过将各种小图像组合成一个图像，减少web页面的加载时间
- 减少HTTP请求
字体小图标
本质就是字体，加载很快，需要专门配置
可以改变样式不失真
- icomoon字库 http://icomoon.io
- 阿里字库
CSS画三角形
四个三角形
.box { width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid blue; border-bottom: 10px solid pink; border-left: 10px solid green; }一个三角形
.box { width: 0; height: 0; border: 10px solid transparent; /*透明*/ border-top-color: red; }不规则三角形
.san { width: 0; height: 0; border-top: 300px solid transparent; border-left: 0px solid yellow; border-right: 200px solid green; border-bottom: 0px solid blue; }鼠标样式
{cursor: pointer;}属性值 属性 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 表单轮廓线
input { outline: 0 outline: none; }去掉默认的蓝色边框
防止拖拽文本域
textarea { resize: none; }vertical-align 垂直居中
用于设置一个元素的垂直对齐方式，但是只针对
行内元素或者行内块元素有效。vertical-align: baseline(基线对齐) | top(顶线对齐) | middle(中线对齐) | bottom(底线对齐)比如，在body里面，有img+文字
在css里
img { vertical-align: middle; }图片底部有空白缝隙，是因为基线对齐的原因，要留给可能出现的文字。
两种方案：
给图片添加vertical-align
把图片转换成块级元素 display: block;
溢出文字省略
（1）单行溢出，必须满足三个条件
[1]先强制一行内显示
white-space: nowrap;[2]超出部分隐藏
overflow: hidden;[3]省略号代替超出部分
text-overflow: ellipsis;（2）多行溢出（适用于webKit浏览器或移动端[webKit]内核）
盒子边框 margin-left = -1px
CSS3
ie9+兼容，移动端优于PC端
属性选择器
属性选择器可以根据元素特定属性来选择元素，不用借助类或者id选择器。
选择符 简介 E[att] 选择具有att属性的E元素 E[att=“val”] 选择具有att属性，且属性值等于val的E元素 E[att^=“val”] 匹配具有att属性，且值以val开头的E元素 E[att$=“val”] 匹配具有att属性，且值以val结尾的E元素 E[att*=“val”] 匹配具有att属性，且值中含有val的E元素 结构伪类选择器
根据文档结构来选择，常用于父级选择器里面的子元素
选择符 简介 E:first-child 父元素中第一个子元素 E:last-child 父元素中最后一个子元素 E:nth-child(n) 第n个子元素（加自定义） E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个（加自定义） E:nth-child(n) （n是数字、关键字、公式） n从0开始
关键字：even偶数，odd奇数
如，把所有偶数的孩子选出来
ul li:nth-child(even){}公式：n 2n+1 3n+2 n+5(从第5个开始选) -n+5(前5个 包含5) 之类
注意：
nth-child(n)会把所有的盒子都排列序号，先看序号，在看前面的类型，出现不匹配的情况，就视为选择失败。用于都是一个类型的。nth-of-type(n)会把指定的盒子都排列序号，先看类型，再看序号，不会出错。用于各种类型混杂的。类选择器、属性选择器、伪类选择器 权重10
伪元素选择器（重要）
利用css创建标签元素，而不使用HTML标签
选择符 简介 ::before 在元素内容的前面插入内容 ::after 在元素内部的后面插入内容 注意：
before和after创建一个元素，属于行内元素，找不到语法
element::before{}before和after必须有
content属性伪元素选择器和标签选择器一样，权重为1伪元素清除浮动
=额外标签法的升级
.clearfix::after { content: ""; 必须的属性 display: block; 标签法插入的元素必须是块级元素 height: 0; 不要看见这个元素 clear: both; visibility: hidden; 不要看见这个元素 }
盒子模型
box-sizing，让padding和border不会撑开盒子box-sizing: content-box; 默认，会撑开 box-sizing: border-box; 盒子大小就是我们定的width，不会撑开开头改成
* { margin: 0; padding: 0; box-sizing: border-box; //变成新的css3模型 }滤镜filter
filter: blur(5px); filter: contrast(200%); filtlerl: grayscale(80%);calc()计算
需求：子盒子宽度永远比父盒子小30像素
.son { width: calc(100% - 30px); }transition过渡
IE9以下不支持，和hover搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始;属性：变化的CSS属性，all是所有花费时间：单位 秒- 运动曲线：默认 ease
- 开始：单位 秒，可以设置延迟触发时间 默认0s
谁做过渡给谁加
网站favicon图标
-
制作favicon图标
png转化ico
-
favicon图标放到网站跟目录下
-
HTML页面引入favicon图标
渐变
渐变背景
使用mask
.box { width: 200px; height: 150px; border: 2px dashed #cd0000; box-sizing: border-box; } @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat; mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x, linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y, linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%, linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0; mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; } }渐变边框（要加私有前缀）
.box { width: 200px; height: 150px; border: 2px dashed #cd0000; box-sizing: border-box; } @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat; -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px), linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px); -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0; -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; } }边框动效
虚线滚动边框效果
.box { width: 200px; background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px); animation: shine 1s infinite linear; overflow: hidden; } .content { height: 128px; margin: 1px; padding: 10px; background-color: #fff; } @keyframes shine { 0% { background-position: -1px -1px;} 100% { background-position: -12px -12px;} }要用内容尺寸撑起来，要不边框看不到
这里的边框滚动效果也是类似的，只是我们的斜纹是使用CSS3重复线性渐变属性
repeating-linear-gradient实现的，而规律运动是CSS3动画实现的，于是，最终实现了视觉上的虚线边框滚动效果。
CSS动画
CSS3 2D转换
transform元素的位移(translate)，旋转(rotate)，缩放(scale)translate
transform: translate(100px,100px); 或者 transform: translateX(100px);- 沿着x y轴移动
- 不会影响到其他元素的位置（定位和外边距margin所不具有的）
- 百分比单位是相对于自身元素的
- 对行内标签没有效果
rotate
transform: rotate(45deg);- 度数，单位是deg
- 角度为正，顺时针
- 默认中心是元素中心点
scale
transform: scale(x,y);若多个转换叠加，空格隔开，且位移放在最前面！
CSS3 动画
- 定义动画
- 调用动画
用keyframes定义动画
@keyframes 动画名称 { 0%{ transform: translate } 100%{ transform: translate } }使用动画
div { animation-name: 动画名称; animation-duration: 持续时间; }动画常用属性
CSS3 3D转换
-