CSS知识点整理
三种书写位置
1内嵌式 将CSS代码嵌入到html文件中。代码耦合度较低，工作中偶尔使用
<style type=text/css>
div {color:red;}
</style>
2内联式将CSS代码嵌入到html文件中。代码耦合度很高，有代码冗余，难以维护，工作中偶尔使用。
3外链式将CSS代码单独卸载CSS文件中，css代码和html代码绝对分离，代码耦合度极低，在工作中经常使用。
<link rel="stylesheet" type="text/css" href="one.css"/ >
命名 不用数字开头，可用字母或者下划线开头，加上字母，数字，下划线，中划线。
建议用驼峰命名法：第一个单词首字母小写，从第二个单词开始首字母大写，例如：.yellowGreenStudent
多类名调用：标签可以调用多个类名，类名间用空格隔开
关系选择器 后代选择器、并集选择器、相邻兄弟选择器、通用兄弟选择器、一级后代选择器
并集选择器：用， 将多个选择器隔开，实现共同的属性
相邻兄弟选择器：用+ 匹配所有作为指定元素的相邻同级的单个元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
示例如下： 最终只有 段落三应用到了div+p的属性。
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
}
通用兄弟选择器：用~匹配属于指定元素的同级元素的所有元素
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
在相邻兄弟代码中，使用 div~p {} 最后是段落3和段落4应用到了属性。
一级后代选择器：用>选择所有的第一级后代
<style type="text/css>
.box>ul>li{border:red solid 1px;}
.box>ul>li>ul>li {
border: #22A4FF solid 1px;
}
</style>
</head>
<body>
<div class="box">
<ul>一级ul
<li>一级li
<ul>二级ul
<li>二级li</li>
<li>二级li</li>
<li>二级li</li>
</ul>
</li>
<li>一级li
<ul>二级ul
<li>二级li</li>
<li>二级li</li>
<li>二级li</li>
</ul>
</li>
</ul>
</div>
</body>
效果图为
属性选择器
伪类选择器
状态选择器 ：focus伪类、checked伪类、target伪类
CSS层叠性
CSS层叠性：相同属性在权重相同时，后定义的会层叠（覆盖）先定义的，在权重不同时，实现权重高的。
权重：标签选择器<类选择器<id选择器<行内样式<！imporant
权重：标签选择器<类选择器<id选择器<行内样式<！imporant
权重： 1 10 100 1000 无穷大
提高权重的方法：
①！important
②描述的更详细，多加一个父级的父级名称，使得权重值增加。
.box .red{ }
变成.BOX .box .red {}
状态伪类权重是10 ，当四个状态同时存在时，按照lvha的顺序写
a：link{ } 未访问状态
a：visited{ }访问后状态
a：hover{ }鼠标移入状态
a：active{ }鼠标按下（触发）状态
复合属性background
盒模型 盒子尺寸=content区+padding区+margin区+border
外边距合并：垂直并列的两个块元素，分别给上下两个盒子设置向margin-bottom和margin-top，此时会形成外边距合并，即：外边距值相同时，就是该值；外边距不同时，实际间距为较大的值。
外边距塌陷：嵌套着的两个元素，给子元素设置向上的外边距，此时父元素会跟着子元素一起下来。
解决外边距塌陷方法：
- 给父元素设置上边框
- 给父元素设置overflow属性
- 给父元素设置浮动
- 给子元素设置浮动
块元素水平居中： margin：0 auto；
overflow属性
overflow：hidden（溢出隐藏）、scroll（溢出滚动：当内容超出元素时，自动设置滚动条）
css初始化
方法1 用通配符。通常在做练习时使用，工作中、项目中不要使用!!!
*{
margin:0;
padding:0;
}
方法2 对使用到的标签进行初始化</font。提高执行效率，在工作中使用此方法。
img底部留白问题
浮动 float
浮动用来做横向布局
浮动元素当父元素的宽度不够时，会自动换行
清除浮动造成的影响
当子元素设置浮动后,高度超出父元素时,会影响到下面父元素中的浮动元素
定位position
相对定位relative ： 也叫占位定位，通过偏移量根据当前在标准流自身的位置为参考点移动，在移动时，是在z轴的空间移动，此时不会影响周围的元素，但是在标准流的位置还是存在的。
绝对定位：一个完全脱离文档流的状态，默认其实参考点是初始包含块。
相对定位与决定定位结合使用：
- 元素设置绝对定位后，设置宽高起作用
- 绝对定位的参考点：绝对定位的参考点是设置相对定位的父元素（与自身最近的），如果没有设置相对定位的父元素，默认参考点是body初始包含块
子绝父相：指子元素是绝对定位，父元素是相对定位。
定位的层级 ：层级相同时，后写的标签会压在先写标签的上面，当层级不同时，谁的层级高谁就在上面。
z-index:整数 默认层级是0，当层级是负数时，是低于标准流的元素，即压在标准流的下面。
占位隐藏和不占位隐藏
占位隐藏：
visibility:hidden;
不占位隐藏：
display:none;
渐进增强和优雅降级
渐进增强：从低版本的浏览器入手设计，向高版本的浏览器兼容
优雅降级：以高版本为基准，向下兼容
Css精灵
制作精灵图
方法1.在ps中找到各个图的位置
方法2.用在线转换工具 http://alloyteam.github.io/gopng/
透明 opcaity:.5或者rgba(255, 255, 255, .5)
ico图标 ico是一种图片格式,通常用在浏览器的选项卡中
ico图标制作 http://www.butbug.net/
iconfont的用法
关于HTML5
HTML新增语义标签
HTML5新增表单类型
HTML5音频标签audio
HTML5视频标签video
边框模拟三角形
边框模拟三角形时：元素的项链两个边框同时存在时，交点会平分，此时将content的区域的宽和高，设置成0，将其他三个边框设置成透明transparent，此时会形成一个三角形。
<style>
.box {
width:0;
height:0;
border-top:50px solid red;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid transparent;
效果图
未设置透明时的 效果图
伪类和伪元素 摘自https://segmentfault.com/a/1190000000484493
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
···css
:Pseudo-classes
::Pseudo-elements
···
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者
标准盒子模型和怪异盒子模型
PS: 使用box-sizing:border-box; 时，一定要设置width和height
文字阴影 text-shadow
texg-shadow: 水平偏移（2px） 垂直偏移（3px）模糊值（4px） 模糊范围扩大（5px）red ;
文字边框 -webkit-text-stroke:2px yellow；
文字裁剪 -webkit-background-clip：text；文字之外的背景扣除，保留文字所在位置的背景，再将文字调成透明色，就可以显示以背景色为颜色的文字。
盒子阴影box-shadow
背景属性
背景裁剪属性 background-clip：border-box/padding-box/content-box
background-clip属性：
border-box（默认值） 从边框可见：边框+padding+content区可见
padding-box ：从padding区域可见：padding+content区可见
content-box：只有content区可见
background-clip：content-box
背景缩放属性 background-size：
cover 时，按照盒子的最长边，对背景图片的宽高按照同一比例扩张缩小，以可以填满这个盒子，图片的多余部分切掉不用。
contain时，按照盒子的最短边，对背景图片的宽高按照同一比例扩张或者缩小，以可以在盒子里看到完整的背景图片，盒子内没有被背景图片填充的部分留白。
滑动背景和固定背景
background-attachment：scroll（默认值）滚动/fixed固定
详细代码见0909背景
多重背景
背景图可以引入多张，用逗号隔开，先写的背景图出现在上面。
background：(url=“pic1.jpg”) no-repeat 0 0 ，(url=“pic2.jpg”) no-repeat 0 0，(url=“pic3.jpg”) no-repeat 0 0 ；
过滤器filter
模糊效果 filter:blur(5px) 让图片变得模糊
黑白网页 filter:grayscale(100%)变成灰白网页
渐变
线性渐变 沿着一条轴线，从一个颜色逐渐过渡到另一个颜色，最少两个颜色。
background-image:linear-gradient(to left,red 0%,red 50%,yellow 70%, blue 90%, blue 100%)
其中red 0% 和blue 100%可以省略 表示从0到50%是红色，从90%到100%是蓝色。
重复线性渐变 background-image：repeating-linear-gradient（）
径向渐变 从原点到半径之间的一个渐变background-image：radial-gradient（）
重复线性渐变 background-image：repeating-radial-gradient（）
过渡在单位时间内，元素中的属性值，从一个值逐渐到达某个值
如果希望过渡有来有去，即触发时有过过渡，取消触发状态也会发生过渡，就将过渡写在默认状态下（80%的情况下都是这样写）
贝塞尔曲线https://cubic-bezier.com/
需要过渡的单属性
transition-property：width，height，background-color，opacity；
transition-property：all；
transition-duration：1s或者1000ms；
transition-delay：.5s
transtion-timing-function：cubic-bezier()或者 linear、ease、ease-in、ease-out、ease-in-out；
过渡的复合属性（简写）：
transition：all 1s ease-in 1s；
2d转换
位移 transform: translate（X, Y）
旋转 transform: rotateX(40deg) rotateY() rotateZ()
旋转中心点 transform-oringin:
当旋转和位移同时存在时，先写位移，再写旋转
transform:tranlate(100px,200px) rotateZ(45deg);
缩放 transform：scale(缩放倍数)
帧动画 @keyframe animition
animition动画库：搜索 animate.css
@keyframe 动画名 {
from { transform:rotate() scale();}
to {transform:roate() scale();}
}
span { animation:动画名 动画时间 动画方式 延时时间 动画方向 动画次数}
@keyframes change {
from {
transform: scale(1.5) ;
background-color: red;
}
30% {
transform: scale(0.5) rotateZ(90deg);
background-color: yellow;
}
70% {
transform: scale(2) rotateZ(90deg)
}
}
div:hover {
animation: change 3s ease infinite;
}
响应式根据不同设备，进行自适应的布局展示
左侧宽度固定右侧宽度自适应、双飞翼、圣杯布局
左侧宽度固定右侧宽度自适应、双飞翼、圣杯布局见链接。
媒体查询语句 @media
媒体查询语句是css语句，检测屏幕的宽高来布局，可以看成是一个条件语句
用and来连接关键字 and前后最后一个空格
@media (min-width:500px) and (max-width:1000px) { }
orientation:landscape横屏/portrait竖屏/screen彩屏/only只有
@media (orientation:portrait) and (min-width:500px) { }
弹性布局 ：父元素与子元素之间的关系，也叫弹性盒子、伸缩布局、伸缩盒子、flex布局
父元素叫弹性空间 父元素{ display:flex;}
子元素叫弹性元素、弹性项
弹性布局设置主轴的方向 flex-direction:row(默认值)/column/row-reverse/column-reverse
弹性元素在主轴上的位置分布 justify-content
justify-content：flex-start、flex-end、center、space-between、space-around、space-evenly
没画出space-evenly的结果图
弹性元素是否换行 flex-wrap：no-wrap(默认值)、wrap、wrap-reverse
当换成两行是，每行的宽度是总宽度的一半；挡换成三行时，每行的宽度是总宽度的三分之一
==弹性元素在垂直轴的位置分布
父元素中
.box{
display:flex;
flex-direction:column;
justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly(没画)
}
弹性元素在交叉轴的位置分布 align-items
align-items:flex-start/flex-end/center/baseline/stretch
弹性元素在主轴的扩张份数 flex-grow:数字
各个弹性元素按照该数字的占比进行扩张
弹性元素的压缩率 flex-shrink：数字
弹性元素的排序 order：数字
##移动端适配
em 1em相当于一个当前字号的大小
.box {
font-size:20px;
text-indent:1em;
}
rem 1rem相当于html元素一个字号的大小
视口( 移动端适配 )
重新定义视口的宽度 和 设备的宽度一样 输入：meta: vp 按下tab键
<meta name="viewport" content="width=device-width, iniitial-scale=1.0">
vw、 vh
1vw = 当前屏幕的宽度1%
100vw =屏幕的宽度
在750px的屏幕下：
1vw=7.5px
1px=0.13333vx
60px=8vw
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
