css笔记
2/28
1.文本标签和容器标签
文本标签：p a span b s del sub sup u i em
含义：放文本，图片
容器标签：div h1-h6 ul li ol dl dt dd header nav section article aside footer
含义：放任何东西
1.单位 px
2.字体
font-size:20px;
line-height:20px;
font-family: 幼圆,黑体;
英文字体在前中文字体在后
font-style: italic;
font-weight: bold;// 400 700
行高和容器等高，字体默认垂直居中
font: 加粗 字号/行高 字体；
例如：font:400 14px/24px '微软雅黑';
3.vertical-align: middle;
用户图文混排垂直居中
4.文本属性
text-decoration:none;去除下划线
text-decoration:underline;加下划线text-align:center;//水平居中
color:red; //颜色
5.列表属性ul li
list-style：none;
6.overflow属性
visible默认值
hidden 超出隐藏
auto 超出显示滚动条
7.鼠标的属性 cursor
cursor:pointer;//鼠标手
8.background 的常见背景属性
background-color:#fff99s;背景颜色
值：
red,bule,
#fffaaa;
rgb(255,0,0),
rgba(0, 0, 255, 0.3);
#000 黑
#fff 白
#f00 红
#222 深灰
#333 灰
#ccc 浅灰
background-image:url(1.png)背景图片
background-repeat:no-repeat;不要平铺
background-position:center top；图片从哪个位置加载 坐标
简写：
background:red url(1.jpg) no-repeat 100px 109px;
background-size:200px 200px;背景图尺寸
值：cover contain
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
9.注释/*
具体的注释
*/
10.css引入方式
行内，内嵌，外部引入
11.基本选择器
标签选择器
所有的标签，都可以是选择器
id选择器
规定用`#`来定义
类选择器
规定用圆点`.`来定义
类上样式，id 上行为
通用选择器
*{
margin：0px;
padding:0px;
}
1.高级选择器
后代选择器
div div p {//只要有层级关系
color: red;
}
交集选择器
h3.special.zhongyao {
color: red;
}
并集选择器
p,
h1,
#mytitle,
.one {
color: red;
}
伪类选择器
子代选择器[用符号`>`表示] 父子关系
div > p {
color: red;
}
序选择器
ul li:first-child {//第一个li标签
color: red;
}
ul li:last-child {//最后一个li标签
color: blue;
}
下一个兄弟选择器
h3 + p {//h3标签后面的第一个p标签
color: red;
}
3/1
1.定位
脱标：浮动，绝对定位，固定定位
绝对定位
注意：原点在父容器的左上角或左下角
注意2：top 参照左上角 bottom左下角
首屏：刷新出来的第一个的效果图
注意3：子元素以含有定位的父元素为基点
注意4：子绝父相【常用】
子绝父相优点：父元素没脱标，更容易在页面中使用，子元素忽略父元素的padding,
相对定位:相对于自己原来的位置
注意：相对定位不脱标
position: relative;
left:50px;
top:50px;
作用：微调元素位置，子绝父相
固定定位
相对浏览器窗口进行定位
position: fixed;
z-index属性
注意：1.大的在上小的在下
2.默认是0没有单位
3.后面代码压前面代码，有定位压没定位
4.只有定位的元素z-index才生效
浮动元素不能用
5.父亲怂了儿子在牛也没用
居中总结：
a.margin:0 auto;//水平居中
b.子绝父相居中 left:50%;margin-left:100px;
伪类选择器
作用：根据其**不同的种状态，有不同的样式
a标签
:link 点击前样式
:visited 点击后样式
:hover 悬停样式
:active 激活样式
:focus input框获取焦点状态样式
2.继承性和层叠性
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的
关于盒子、定位、布局的属性，都不能继承。
层叠性：就是css处理冲突的能力
规则1：比较权重大小 id=100 class=10 p=1
规则2：权重相同 就近原则
规则3：class多个值，css后面覆盖前面
css属性!important>内联样式 > ID选择器(#id) > 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] > 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) > 通用选择器(*) > 继承的样式
注意：！imporant少用，最好不用；
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{
color:black;
}
盒子模型
width、height、padding、border、margin
padding也有背景色
padding:30px 20px 40px 100px; 上右下左
padding:30px 上右下左全部30px
padding:20px 30px; 上下20px 左右30px
padding:30px 20px 40px;上30 下40左右20px;
盒子真实占有宽高包括content padding border margin
border三要素：像素（粗细）、线型、颜色。
例如：border:2px solid red;
标准文档流
从上到下，从左到右
特征1：空白折行
特征2：高矮不齐，底边对齐
行元素，块元素，行内块元素
行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
行内块元素：
行元素可以设置宽和高
行：b span u a em i sub sup s del
块：p div h ul li dl dt dd ol
display: inline；块转行
display: block;行转块
display: inline-block；行块转行内块
脱离标准流
方法：浮动，绝对定位，固定定位
浮动性质1：脱标【脱离标准流】
浮动性质2：浮动的元素互相贴靠【类似于行内块】
浮动性质3：浮动的元素有“字围”效果
浮动性质4：收缩
零基础作业：浮动实现一个页面
浮动的清除
a.方法1：给浮动元素的祖先元素加高度[不常用]
祖先高度大于浮动元素高度
b.方法2：clear:both;
c.方法3：隔墙法[不常用]
d:方法4：内墙在浮动标签后面加清除浮动；
e.清除浮动方法5：overflow:hidden; 父元素高度是子元素撑开的高度
兼容性问题【了解】
第一条：IE6不支持小于12px的盒子
解决：_font-size: 0px; ie6专用
第二条：**IE6不支持用`overflow:hidden;`来清除浮动。
解决：_zoom:1;
3/2
(1)css注意点：
图片设置宽高/不用设置100%(特殊情况外）
文本设行高
logo正确写法：
Title
(2) 背景图片要写宽高
.logo a{
text-indent:-9999px;
display:block;
width:宽；
height:高；(宽，高为了覆盖整个页面)
（另外背景放在里层a标签里，放在外面会影响padding）
}
(3)清除页面默认bug内边距和外边距
个别or*(全部）
（4）全局版心定义：
.content{
font:#000 14px '微软雅黑'；
width"1000px;
margin: 0 auto;
}
（5）父元素浮动是为了排列，子元素也是如此。
（6）背景图加点击效果都适用a标签转块元素覆盖背景图片。
3/3
优雅降级：一开始就构建站点的完整功能，然后正对浏览器测试和修复。比如css3构建应用。
渐进的增强：一开始正对低版本浏览器进行构建页面，完成基本功能，然后高版本用户体验好。
知识点：
1.css3选择器
div.box 交集选择器
div p 后代
div>p 子代
div+p div后第一个p
div~p div后全部p
e[attr~=val] 其中一个等于val元素
e[attr|= val] class = 'a b'
2.结构伪类 ：hover :link :visited :active
e:nth-child(n)
:first-child
:last-child
:nth-child(even)
:nth-child(odd)
3.伪元素 ::before ::after
配合content使用
::before
就在当前标签内容前面添加内容
::after
就是在当前标签内容后面添加内容，
1.CSS3属性
文本阴影
text-shadow: 20px 27px 22px pink;
盒模型中的 box-sizing 属性
box-sizing: content-box;标准盒模型
实际宽度=内容宽+padding+border
box-sizing: border-box;ie盒模型
实际宽 = 设置的宽的
2.css3解决兼容性问题：私有前缀
3.边框
圆角border-radius: 60px; 或50%
边框阴影：box-shadow
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
inset 内阴影
边框图片
border-image: url("images/border.png") 27/20px round;
3/4
1.动画
过渡：transition
不同状态间的平滑过渡（补间动画）
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
注意：a.样式的变化前和变化后 b.触发
2.2D 转换
缩放--> transform: scale(2, 0.5); 水平放大2倍，垂直缩小50%
位移：translate--->
transform: translate(-50%, -50%); 左上位移
绝】对定位水平垂直居中【重要
旋转：rotate-->
transform: rotate(-405deg); 逆时针旋转405度
3.3D 转换
4.透视：perspective 模拟3d
5.3D呈现（transform-style）
transform-style: preserve-3d来使其变成一个真正的3D图形 6.动画animation ### 定义动画的步骤 （1）通过@keyframes定义动画； （2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； （3）在指定元素里，通过 animation` 属性调用动画。
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
