样式优先级
行内样式>内部样式=外部样式
内部样式和外部样式的优先级取决于执行顺序，先执行的被覆盖
CSS三大特性
层叠性：即当样式发生了冲突，根据选择器优先级的权重进行判断
优先级：!important>行内样式>id选择器>类选择器>元素选择器>*>继承样式
继承性：元素自动拥有其父元素，或其祖先元素上所设置的某些样式，优先继承离得近的
常用长度单位
/*像素：px*/
.d1{
width:20px;
}
/*em 相当于当前元素的父元素的font-size的倍数,d当前元素没有就去父元素找，层层寻找，没有找到就使用浏览器默认样式*/
html{
font-size:10px;
}
.d2{
width:10em;/*这里10em=10*10px=100px*/
}
/*rem 相当于根元素(html)的font-size的倍数*/
.d3{
width:3rem;
}
/*% 相对于其父元素的百分比*/
.d4{
width:100px;
height:100px;
.inside{
width:50%;/*就是50%*100px=50px*/
height:50%;
}
}
/*视口单位:vw和vh*/
div{
width:20vw;/*视口宽度的20%*/
height:20vh;/*视口高度的20%*/
}
div{
width:20vmax;/*找到视口宽度和高度之间最大的，取其20%*/
height:20vmin;/*找到视口宽度和高度之间最小的，取其20%*/
}
像素_颜色
像素
<style>
.atguigu1{/*对应现实1cm*/
width:1cm;
height:1cm;
background-color:red;
}
.atguigu2{/*对应现实1mm*/
width:1mm;
height:1mm;
background-color:red;
}
.atguigu3{
width:100px;
height:100px;
background-color:red;
}
</style>
<body>
<div class="atguigu1"></div>
<br>
<div class="atguigu2"></div>
<br>
<div class="atguigu3"></div>
</body>
颜色
<!--颜色有四种表达方式-->
<style>
p{color:red}/*文字表示*/
p{color:rgb(255,0,0)}/*rgb或rgba表示*/
p{color:rgba(23,45,123,0.505)}
p{color:#ff0000}/*十六进制表示*/
p{color:#hsl(0,100%,50%)}/*HSL表示,第一个参数表示色相，第二个表示饱和度，第三个表示亮度*/
</style>
透明度
div{
/*0表示完全透明，1表示完全不透明*/
opacity:0.1;
}
颜色混合
mix-blend-mode：该属性和将当前元素的颜色与直系父元素颜色进行混合操作，可以形成新颜色
可选值有很多，这里演示其中一种
<style>
*{
margin: 0;
padding: 0;
}
.three{
height: 100vh;
background-image: linear-gradient(to right,white 50%,black 50%);
}
span{
color: #fff;
font-size: 40px;
position: absolute;
top:200px;
left:30%;
/*差值法 当前元素与父元素相减取绝对值 如白色(255 255 255)减白色(255 255 255)就变成了黑色(0 0 0)*/
/*这里就实现了背景为黑的部分文字为白色，背景为白色的部分文字为黑色*/
mix-blend-mode: difference;
}
</style>
<body>
<div class="three">
<span>与人维度 仅就如图</span>
</div>
</body>
元素模式
块元素
特点：
在浏览器中独占一行，不与任何元素共用一行，从上往下排列
默认宽度：撑满父元素
默认高度：由内容撑开
可以通过css设置宽高
常见块元素：<html>,<body>,<h1>~<h6>,<div>,<ul>,<ol>,<li>,<form>
行内元素
inline:又称内联元素
特点：
在页面不独占一行，一行内不能容下的行内元素会在下一行继续
默认宽度：由内容撑开
默认高度：由内容撑开
无法通过css设置宽高
可以使用文本的方式进行居中
常见行内元素：<a>,<strong>
行内块元素
inline-block:又称内联块元素
特点：
在页面不独占一行，一行内不能容下的行内元素会在下一行继续
默认宽度：由内容撑开
默认高度：由内容撑开
可以通过css设置宽高
可以使用文本的方式进行居中
常见行内块元素：<img>,<td>,<th>,<input>,<button>,<select>,<textarea>,<iframe>
修改元素模式
/*使用display可以修改元素模式*/
div{
display:inline-block
}
选择器
基本选择器
通配选择器：*{}
元素选择器 类选择器 ID选择器
复合选择器
交集选择器
<style>
p.beauty{}/*选择类名为beauty的p元素*/
.rich.beauty{}/*选中同时具有rich和beauty类名的元素*/
</style>
<body>
<p class='beauty'>明星</p>
<h2 class='rich beauty'>土豪</h2>
</body>
并集选择器
<style>
.rich,.beauty,#dog{}/*选中类名为rich或beauty或id为dog的元素*/
</style>
<body>
<p class='rich'>土豪</p>
<p class='beauty'>暴富</p>
<P id='dog'>小狗</P>
</body>
后代选择器
<style>
ul li{}/*选中ul下的li元素*/
ul li a{}/*选取ul下的li下的a元素*/
</style>
<body>
<ul>
<li>小狗</li>
<li>
<a href="#">小猫</a>
</li>
</ul>
</body>
子代选择器
<style>
div>a {/*选取父为div的a元素*/
color: red;
}
div>p>a{/*选取父为p，爷为div的a元素*/
color: skyblue;
}
.foot>a {/*选取父为类名foot的a元素*/
color: chocolate;
}
</style>
<!--
子代选择器会和后低选择不同的是，子代选择器会选择所有符合要求的
比如这里的div>a,不仅仅张三，李四，王五会生效，孙七也会生效
-->
<body>
<div>
<a href="#">张三</a>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">赵六</a>
<div class="foot">
<a href="#">孙七</a>
</div>
</p>
</div>
</body>
兄弟选择器
<style>
/* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）—— 相邻兄弟选择器 */
div+p {
color: red;
}
/* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）—— 通用兄弟选择器 */
div~p {
color: red
}
li~li {
color: orange;
}
</style>
</head>
<body>
<div>尚硅谷</div>
<p>前端</p>
<p>Java</p>
<p>大数据</p>
<p>UI</p>
<ul>
<li>主页</li>
<li>秒杀</li>
<li>订单</li>
<li>我的</li>
</ul>
</body>
属性选择器
<style>
/* 第一种写法：选中具有title属性的元素 */
[title] {
color: red;
}
/* 第二种写法：选中具有title属性，且属性值为atguigu1的元素 */
[title="atguigu1"] {
color: red;
}
/* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
[title^="a"] {
color: red;
}
/* 第四种写法：选中具有title属性，且属性值以字母u结尾的元素 */
[title$="u"] {
color: red;
}
/* 第五种写法：选中具有title属性，且属性值包含字母u的元素 */
[title*="u"] {
color: red;
}
</style>
</head>
<body>
<div title="atguigu1">尚硅谷1</div>
<div title="atguigu2">尚硅谷2</div>
<div title="guigu">尚硅谷3</div>
<div title="guigu" class="school">尚硅谷4</div>
</body>
伪元素选择器
<style>
/* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 */
/* 选中的是div中的第一个文字/字母 */
div::first-letter {
color: red;
font-size: 40px;
}
/* 选中的是div中的第一行文字 */
div::first-line {
background-color: yellow;
}
/* 选中的是div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: orange;
}
/* 选中的是input元素中的提示文字 */
input::placeholder {
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before {
content:"￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after {
content:".00"
}
</style>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi, exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus est placeat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, ex voluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitis perspiciatis. Facere?</div>
<br>
<input type="text" placeholder="请输入您的用户名">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
伪类选择器
动态伪类
<style>
a:link {/* 选中的是没有访问过的a元素 */
color: orange;
}
a:visited {/* 选中的是访问过的a元素 */
color: gray;
}
a:hover {/* 选中的是鼠标悬浮状态的a元素 */
color: skyblue;
}
a:active {/* 选中的是激活状态的a元素 */
color: green;
}
input:focus,select:focus {/* 选中的是焦点状态的input元素和焦点状态的select元素 */
color: orange;
background-color: green;
}
</style>
<body>
<a href="https://www.baidu.com">去百度</a>
<input type="text">
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</body>
结构伪类
<style>
/*选中的是div元素的第一个子元素，且该子元素为p元素*/
div>p:first-child{}
/*选中的是p元素，无论p的父亲是谁，但p必须是其父亲的第一个儿子，且该p元素必须处于div元素下*/
div p:first-child{}
/* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子*/
p:first-child{}
/*选中的是div的末尾元素，且该元素是p元素，不是p元素不生效*/
div>p:last-child{}
/*选中的是div下的第3个元素，且该元素为p元素，不是p元素不生效*/
/*关于nth-child()括号的值：
0或不写：什么都不选
n：选中所有
2n或even：选中序号为偶的子元素
2n+1或odd：选中序号为奇数的子元素
-n+2：选中前三个，计算方法：刚开始n为0，-n+2=2所以选中第二个，然后n递增为1，此时-n+2为1，所以选中第一个，后面-n+2就 小于1了，所以选中前两个
*/
div>p:nth-child(3){}
/*选中的是div下的第一个p元素*/
div>p:first-of-type{}
/*选中的div下的最后一个p元素*/
div>p:last-of-type{}
/*选中的是div内部的第3个p元素*/
div>p:nth-of-type(3){}
/*选中的是div中倒数第2个元素,且该元素为p元素，不是p元素不生效*/
div>p:nth-last-child(2){}
/*选中的是div中倒数第2个元素*/
div>p:nth-last-of-type(2)
/*选中的是没有兄弟的span元素*/
span:only-child{}
/*选中的是没有同类型的兄弟元素*/
span:only-of-type{}
/*选中根元素*/
:root{}
/*选中的是没有内容的div元素，任何内容都不写*/
div:empty{}
</style>
<body>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
<p></p>
<p></p>
</div>
<div></div>
</body>
否定伪类
<style>
/*选中div下的p元素，但是排除类名为fail的元素*/
div>p:not(.fail){}
/*选中的是div的儿子p元素，但是排除title属性值以‘你要加油’开头的*/
div>p:not([title^='你要加油']){}
/*选中div的儿子元素p元素，但是排除第一个p元素*/
div>p:not(:first-child){}
</style>
<body>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p class="fail" title="你要加油啊！孙七">孙七：58分</p>
<p class="fail" title="冲啊！老八">老八：48分</p>
</div>
</body>
UI伪类
<style>
/*选中的是勾选状态的复选框或单选框*/
input:checked{}
/*选中的是禁用状态的input元素*/
input:disable{}
/*选中的是可用状态的input元素*/
input:enabled{}
</style>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
目标伪类
<style>
div {
background-color: gray;
height: 300px;
}
div:target {/*实现点击锚点链接去到的地方的样式发生变化,即去哪哪样式发生变化*/
background-color: green;
}
</style>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
</body>
语言伪类
<style>
div:lang(en) {/*选中lang为斜体(不确定这里是不是斜体)的元素*/
color: red;
}
:lang(zh-CN) {/*选中语言为中文的元素*/
color: green;
}
</style>
<body>
<div>尚硅谷1</div>
<div lang="en">尚硅谷2</div>
<p>前端</p>
<span>你好</span>
</body>
选择器优先级
简单方面来说：!import>行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器(*)>继承样式
复杂来说，通过计算权重来判断
对于一个选择器来说，有三个计数(0,0,0,)，第一个计数表示id选择器的个数，第二个选择器表示类，伪类，属性选择器个数，第三个计数表示元素，伪元素选择器个数
对比方式，两个选择器的三个计数从左往右依次比较，只要有一个更大，就确认的谁的权重更大，就停止比较后面的，如果权重相同，采取后来居上的原则
<style>
#atguigu {
color: orange;
}
.container span.slogan {/*权重为(0,2,1)与下面相比，0等于0，而2大于1.所以该选中器权重大*/
color: red;
}
div>p>span:nth-child(1) {/*权重为(0,1,3)*/
color: green;
}
.slogan {
color: purple !important;/*添加!important使该color属性具有最大话语权*/
}
</style>
<body>
<div class="container">
<p>
<span class="slogan" id="atguigu" style="color: blue;">尚硅谷，让天下没有难学的技术！</span>
<span>欢迎同学们来学习！</span>
</p>
</div>
</body>
属性
字体属性
基本属性
.atguigu{font-size:20px}/*字体大小*/
.atguigu{font-family:'微软雅黑'}/*字体族*/
.atguigu{font-style:normal}/*字体风格 normal:正常的(默认值) italic:斜体 oblique:斜体*/
.atguigu{font-weight:lighter}/*字体粗细 lighter:细 normal:正常 bold:粗 bolder:更粗 也可以使用数值表示*/
/*字体复合属性*/
.atguigu{font:bold italic 100px '微软雅黑'}
web字体
用于自定义导入字体
@font-face{
/*给引入的字体起名*/
font-family:'情书字体';
/*引入字体*/
src:url('./font1/方正字体.ttf')
}
/*但是字体文件是很大的，所以我们一般引入我们需要的部分,阿里提供了一个在线字体定制网站：https://www.iconfont.cn/webfont，这里提高了一部分字体样式，输入文字，我们就可以导入一份只包含这些文字的字体文件，也可以在线使用*/
@font-face{
font-family:'情书字体';
/*控制需要字体在下载完成之前的展示样式*/
font-display:swap;
/*考虑浏览器兼容问题，(不同浏览器支持的字体文件格式不同)*/
src:url(./font/webfont.eot);/*如IE9支持的字体文件为.eot文件*/
src:url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/*导入完成后就可以直接使用*/
div{
font-family:'情书字体'
}
字体图标
就是图片形式的字体，灵活性高，更方便改变颜色，大小，风格等
但是字体图标进行放大会失真
一般去阿里寻找，阿里图标官网地址：iconfont-阿里巴巴矢量图标库，可以直接下载，也可以添加至项目进行更多设置
在项目中有三种使用方式，Unicode，Font class和Symbol，然后也可以实现在线链接和直接下载图片
方式一：Unicode 最原始方式 兼容性最好
<style>
@font-face {
/*给引入的字体图标起名*/
font-family: 'iconfont';
/*引入字体图标，同时兼容浏览器(不同浏览器支持的字体文件格式不同)*/
src: url('./font3/iconfont.woff2?t=1676857973138') format('woff2'),
url('./font3/iconfont.woff?t=1676857973138') format('woff'),
url('./font3/iconfont.ttf?t=1676857973138') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 100px;
}
</style>
<body>
<!--引入完成就可以使用，需要参考官网名称-->
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
方式二：Font class 主要解决方式一代码不直观问题
<head>
<meta charset="UTF-8">
<!--在官网购物车内可以下载我们需要的全部字体(包含了引入，浏览器兼容等)，一次性导入即可-->
<link rel="stylesheet" href="./font3/iconfont.css">
<style>
.iconfont {
font-size: 100px;
}
</style>
</head>
<body>
<span class="iconfont icon-chengzi"></span>
<span class="iconfont icon-bingqilin"></span>
<span class="iconfont icon-hanbao"></span>
<span class="iconfont icon-kafeibei"></span>
</body>
方式三：Symbol 支持彩色，是未来的主流，但是浏览器兼容比较差，渲染能力也比较差
<head>
<meta charset="UTF-8">
<script src="./font3/iconfont.js"></script>
<style>
svg {
width: 150px;
}
</style>
</head>
<body>
<!-- <svg>和<use>是用于展示矢量图(放大也不会失真)-->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chengzi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bingqilin"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hanbao"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kafeibei"></use>
</svg>
</body>
文本属性
基本属性
/*文本颜色*/
.atguigu{color:red;}
/*透明色*/
.atguigu{color:transparent;}
/*字母(汉字)间距*/
.atguigu{letter-spacing:20px;}
/*单词间距*/
.atguigu{word-spacing:20px;}
/*文本缩进*/
.atguigu{text-indent:120px;}/*缩进120px*/
/*行高 设置与height一样实现垂直居中*/
.atguigu{line-height:40px;}
文本划线
.atguigu{
text-decoration:overline dotted green;/*绿色上划虚线 第一个参数表示线位置，第二个表示线样式，第三个表示线颜色*/
/*overline:上划线，underline:下划线，line-through:删除线*/
/*dotted:虚线，wavy:波浪线，*/
text-decoration:none;/*取消所有线*/
}
文本对齐
/*文本对齐*/
.atguigu{/*水平对齐*/
text-align:right;/*向右靠齐*/
}
.atguigu{/*垂直对齐*/
font-size:40px;
height:400px;
line-height:745px;/*向下靠齐 计算方法：2*行高-字体大小*/
}
/*vertical-align对齐方式 基线:英文字母x的下边*/
/*vertical-align默认基线对齐，不能直接控制元素，需要一个父元素，只能操作行内元素*/
.atguigu{
vertical-align:middle;/*元素中部与父元素的基线x的中部对齐，即元素中部与父元素的x字母的中部对齐*/
vertical-align:top;/*元素顶端与父元素顶端对齐*/
vertical-align:bottom;/*元素底端与父元素底端对齐*/
vertical-align:baseline;/*元素基线与父元素基线对齐(默认)*/
vertical-align:text-top;/*元素顶端与父元素文本顶端对齐*/
vertical-align:text-bottom;/*元素底端与父元素文本底端对齐*/
vertical-align:sub;/*元素垂直对齐到父元素的下标基线*/
vertical-align:super;/*元素垂直对齐到父元素的上标基线*/
}
文本阴影
/*文本阴影*/
div{
/*阴影x轴 y轴位置*/
text-shadow:3px 3px;
/*阴影x轴 y轴位置 颜色*/
text-shadow:3px 3px red;
/*阴影x轴 y轴位置 模糊度 颜色*/
text-shadow: 3px 3px 10px red;
}
文本换行
div{
width:200px;
height:300px;
border:10px solid black;
white-space:nowrap;/*彻底不换行*/
white-space:pre;/*按原文展示 原文怎么写就怎么展示，超出部分不换行*/
white-space:pre-wrap;/*按原文展示，但如果当行超过了容器就会换行*/
white-space:pre-line;/*和ore-warp一样，多了一个忽视空格功能*/
}
文本溢出
div{
width:100px;
height:20px;
border:1px solid black;
/*要使文本溢出设置生效，必须使用overflow:hidden*/
overflow:hidden;
/*溢出部分使用省略号表示*/
text-overflow:ellipsis;
/*溢出部分截掉*/
text-overflow:clip;
}
文本描边
该属性同样处于测试阶段，需要加上-webkit 前缀
div{
color:transparent;
/*描边宽度 颜色*/
-webkit-text-stroke:3px red;
}
列表属性
ul{
/*none:去掉列表符 decimal：列表符变为数字顺序*/
list-style-type:decimal;
/*inside:列表符在ul内部 outside：列表符在ul外部*/
list-style-position:inside;
/*自定义列表符*/
list-style-image:url('../image/video.png')
/*复合属性*/
list-style:decimal url('../image/video.png') inside;
/*所以其实使用最多的是这种形式*/
list-style:none;/*去掉列表符*/
}
边框属性
table{
width:400px;
height:400px;
border-width:2px;/*边框宽度*/
border-color:green;/*边框颜色*/
border-style:solid;/*边框样式 solid实线 dashed虚线*/
border-radius:20px;/*边框圆角*/
/*一般都是复合使用*/
border:2px red solid;
/*边框圆角*/
border-radius:200px;/*使用像素值等于宽度一半为圆*/
border-radus:50%;/*使用50%形成的是一个圆*/
/*单独设置一侧圆角*/
border-top-left-radius:100px;/*左上角边框圆角*/
border-bottom-right-radius:50px 20px;/*指圆的x方向和y方向*/
/*复合使用 顺序是左上角，右上角，右下角，左下角 前四个个是x方向半径，后四个是y方向半径*/
border-radius:100px 50px 20px 10px / 50px 20px 10px 5px;
/*边框外轮廓*/
outline-width:20px;/*外轮廓宽度*/
outline-color:orange;/*外轮廓颜色*/
outline-style:solid;/*外轮廓样式*/
outline-offset:30px;/*外轮廓与边框的距离*/
/*复合使用 宽度 样式 颜色*/
outline:20px solid orange;
}
表格属性
table{
/* 控制表格的列宽 */
table-layout: fixed;
/* 控制单元格间距（生效的前提是：不能合并边框） */
border-spacing: 10px;
/* 合并相邻的单元格的边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
背景属性
div{
/*设置背景颜色*/
background-color:skyblue;
/*设置背景图片*/
background-image:url(../image/悟空.jpg);
/*设置背景图片重复方式 no-repeat:不重复 repeat-x:向右重复 repeat-y:向下重复 默认是同时向右向下重复*/
background-repeat:no-repeat;
/*控制背景图片位置(使用关键字控制，相对于div)*/
background-position:center;
/*控制背景图片位置(使用像素控制，相对于div)*/
background-position:100px 200px;
/*设置背景图片开始位置*/
/*content-box:从内容区开始铺设 border-box：从边框开始铺设*/
background-origin:padding-box;/*默认值，在内边距开始*/
/*设置背景图尺寸*/
background-size:400px 400px;
background-size:100% 100%;/*参考所在元素*/
background-size:contain;/*完整展示图片，不破坏图片原本的宽高比例，会进行等比缩放放大*/
backgroun-size:cover;/*等比例缩放时，一边到达边界就停止缩放或放大，剩余部分舍弃掉*/
/*裁剪图片*/
/*可选值为padding-box,border-box,content-box 意思是超过该部分背景图不可见*/
background-clip:border-box;/*默认(边框外图片不可见)*/
/*复合属性 背景图片 是否重复 位置 / 大小 原点(图片开始位置) 裁剪方式*/
background:url(../image/悟空.jpg) no-repeat 10px 10px / 500px 500px border-box content-box;
}
<!--background-clip的一个特殊实现-->
<style>
.box{
width:400px;
height:400px;
font-size:120px;
font-weight:bold;
color:transparent;/*透明色*/
background-image: url('../images/bg02.jpg');
background-repeat: no-repeat;
/*这是一个还在测试中的样式，所以加上-webkit*/
/*将图片铺设在文字上，必须使用透明文字*/
-webkit-background-clip:text;
}
</style>
<body>
<div class="box">你好啊</div>
</body>
多背景图
div{
width:200px;
height:200px;
border:1px solid black;
background:url('../image/bg-lt.png') no-repeat left top
url('../image/bg-rt.png') no-repeat right top,
url('../image/lb-lt.png') no-repeat left bottom,
url('../image/rb-lt.png') no-repeat right bottom,
}
实现效果
鼠标属性
div{
/*自定义鼠标样式*/
cursor:url('../image/arrow.png'),pointer;
}
button{
cursor:pointer;/*设置鼠标样式为小手*/
}
常用鼠标样式：
pointer：小手
move：移动图标
text：文字选择器
crosshair：十字架
wait：等待
help：帮助
计算属性
css中可以使用calc进行数值运算
.div{
width:calc(100vh-70px);
}
颜色渐变
线性渐变
.box{
/*默认，从上往下渐变*/
background-image:linear-gradient(red,yellow,green);
/*向右上角渐变*/
background-image:linear-gradient(to right top,red,yellow,green);
/*根据角度调整渐变方向，角度是旋转角度*/
background-image:linear-gradient(20deg,red,yellow,green);
/*指定颜色渐变的范围*/
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
}
径向渐变
.box{
/*默认，由内向外渐变*/
background-image:radial-gradient(red,yellow,green);
/*调整圆心位置在右上角*/
background-image: radial-gradient(at right top,red,yellow,green);
/*通过像素值调整径向渐变圆的圆心*/
background-image: radial-gradient(at 100px 50px,red,yellow,green);
/*通过circle关键字调整为正圆*/
background-image: radial-gradient(circle,red,yellow,green);
/*通过像素值调整为正圆 两像素相等即可*/
background-image: radial-gradient(200px 200px,red,yellow,green);
/*控制渐变区域*/
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
}
重复渐变
.box{
/*重复线性渐变*/
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
/*重复径向渐变*/
background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
盒子模型
盒子模型由内容区，内边距，边框，外边框组成
内边距
div{
width:400px;
height:400px;
/*左侧内边距*/
padding-left:20px;
/*上内边距*/
padding-top: 30px;
/*右内边距*/
padding-right:40px;
/*下内边距*/
padding-bottom:50px;
/*复合属性*/
padding:10px;/*表示上下左右内边距均为10px*/
padding:10px 20px;/*表示上下内边距和左右内边距*/
padding:10px 20px 30px;/*表示上，左右，下*/
padding:10px 20px 30px 40px;/*表示上，右，下，左*/
}
外边距
div{
width:300px;
height:300px;
margin-left:10px;
/*复合属性*/
margin:10px;/*表示上下左右内边距均为10px*/
margin:10px 20px;/*表示上下内边距和左右内边距*/
margin:10px 20px 30px;/*表示上，左右，下*/
margin:10px 20px 30px 40px;/*表示上，右，下，左*/
}
外边距的一些注意事项
子元素的margin是参考父元素计算的，优先考虑上和左
上margin和左margin会影响自身位置，下margin和右margin会影响兄弟位置
对于行内元素，左右margin是可以调控的，上下margin设置是无效的
margin的值可以是auto，给一个块级元素左右margin设置margin可以实现在其父元素下的水平居中
margin可以为负值
margin塌陷问题
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上，即子元素会带动父元素一起移动。这种问题的产生是历史遗留问题。
解决方法：
给父元素设置不为0的边框
给父元素设置不为0的内边距
给父元素设置overflow:hidden;(最佳解决方案)
把父元素元素模式修改为行内块元素
margin合并问题
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
建议避免这种情况发生，而不是区解决，因为解决方法会有副作用
边框
div{
width:300px;
height:300px;
border-left-width:10px;/*左边框宽度*/
border-right-color:red;/*右边框颜色*/
border-top-style:solid;/*上边框样式*/
/*复合属性*/
border-width:10px;
border-color:red;
border-style:solid;
border-left:5px solid red;
border:10px solid red;
}
处理内容溢出
div{
overflow:auto;/*自动模式，溢出展示滚动条，没溢出不展示*/
overflow:visible;/*默认模式，溢出内容显示*/
overflow:hidden;/*溢出内容直接截断*/
overflow:srcoll;/*溢出内容滚动条展示，没溢出也会展示*/
/*不常用，不推荐*/
overflow-x:visible;/*横向溢出内容显示*/
overflow-y:hidden;/*纵向内容溢出隐藏*/
}
隐藏元素
div{
/*隐藏该元素，同时页面该页面元素也会消失*/
display:none;
/*隐藏该元素，但是页面中依然有该位置，只是隐藏了*/
visibility:hidden;
}
样式的继承
会继承的 css 属性：
字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的 css 属性：
边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
布局技巧
当我们使用 line-height 给图片进行垂直居中时，会发现图片上面部分空白小于图片下面部分空白，并没有实现垂直居中,这是因为基线的问题，我们可以给父元素添加一个字母x比较，发现图标下面是与x字母对齐的，我们需要的其实是与x的中间部分对齐，就可以使用 vertical-align: middle; 使元素与父元素的x的中部对齐，但是x其实也不是绝对处于中间的，所以严格来说我们依旧没有实现垂直居中，而对于x来说，越小自身所处位置就越处于中间，越大误差就越大，也就是说图片的垂直居中会受到父元素文字大小的影响，所以我们就可以给父元素设置font-size:0; ,此时就实现了图片的绝对居中。
元素间空白问题
对于span，img这类元素，我们连续添加时，会发现元素之间留有空白，这是因为我们写代码时会换行导致的。
如果不换行，如下，就不会出现空白问题，但是非常不推荐，严重影响了代码观赏性
<span></span><span></span><span></span>
最好的解决方法是给父元素添加font-size:0;
div{font-size:0;}
幽灵空白问题
将图片放入一个块级元素内，让图片撑开元素，会发现图片下面与该块元素之间会留有一小条空白，称为幽灵空白。
解决方法一
/*给图片添加vertical-align样式(不能写默认样式)*/
img{vertical-align: bottom;}
解决方法二
/*给图片加上display:block将其变为块级元素 有局限性：同一行不能有其他元素*/
img{display:block;}
解决方法三
/*给父元素设置 font-size:0;*/
div{font-size:0;}
怪异盒模型
使用box-sizing:border-box;可以将盒子从普通盒子变成怪异盒模型
怪异盒模型：当前盒子设置的宽高会包括内容区，边框和内边距
盒子阴影
使用box-shadow可以设置盒子阴影
div{
width:400px;
height:400px;
/*写两个值，表示水平位置阴影 垂直位置阴影*/
box-shadow:10px 10px;
/*写三个值，表示水平位置 垂直位置 阴影颜色*/
box-shadow: 10px 10px blue;
/*写三个值，含义：水平位置 垂直位置 模糊程度*/
box-shadow: 10px 10px 20px;
/*写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色*/
box-shadow: 10px 10px 20px blue;
/*写五个值，含义：水平位置 垂直位置 模糊程度 外延值(阴影大小) 阴影颜色*/
box-shadow: -10px -10px 20px 10px blue;
/*写六个值，含义：水平位置 垂直位置 模糊程度 外延值(阴影大小) 阴影颜色 内阴影*/
box-shadow: 10px 10px 20px 10px blue inset;
}
盒子拉伸
使用resize属性可以使界面被拉伸从而展示更多内容
<style>
.box1{
width:400px;
height:400px;
background-color:orange;
overflow:hidden;/*必须配合overflow使用*/
resize:both;/*使该界面可以被拉伸*/
resize:horizontal;/*限制只能水平方向拉伸*/
resize:vertical;/*限制只能垂直方向拉伸*/
}
.box2{
width:800px;
height:800px;
background-color:skyblue;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
伸缩盒模型
又称flex布局，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩容器的子元素都会自动成为伸缩项目，注意：仅仅是子元素，孙元素等后代元素不会成为伸缩项目
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
.outer{
wifth:400px;
hright:400px;
background-color:#888;
/*将元素变为伸缩盒模型*/
dispaly:flex;
/*使两个伸缩容器并列*/
display:inline-flex;
}
flex和inline-flex的区别
flex
inline-flex
主轴
flex布局内的元素是顺着主轴方向排列的
.outer{
wifth:400px;
hright:400px;
background-color:#888;
/*将元素变为伸缩盒模型*/
dispaly:flex;
/*调整主轴方向 水平从右向左*/
flex-direction: row-reverse;
/*整主轴方向，水平从左到右，默认*/
flex-direction: row;
/*调整主轴方向，垂直从上到下*/
flex-direction: column;
/*调整主轴方向，垂直从下到上*/
flex-direction: column-reverse;
/*设置主轴换行方式,不换行，默认值*/
flex-wrap: nowrap;
/*设置主轴换行方式，换行*/
flex-wrap: wrap;
/*设置主轴换行方式，反向换行*/
flex-wrap: wrap-reverse;
/*复合属性 同时设置主轴方向和换行方式*/
flex-flow: row wrap;
/*设置主轴对齐方式，对齐主轴的起始位置*/
justify-content: flex-start;
/*设置主轴对齐方式，对齐主轴的结束位置*/
justify-content: flex-end;
/*设置主轴对齐方式，中间对齐*/
justify-content: center;
/*设置主轴对齐方式，均匀分布，元素与元素之间的距离，是元素距边缘距离的二倍*/
justify-content:space-around;
/*设置主轴对齐方式，均匀分布，元素之间距离相等，元素距边缘没有距离*/
justify-content:space-between;
/*设置主轴对齐方式，均匀分布，元素之间的距离等于元素距边缘距离*/
justify-content:space-evenly;
}
侧轴
侧轴会随着主轴变换而变换，默认侧轴方向是从上往下
row 对应 column
row-reverse 对应 column-reverse
.outer{
wifth:400px;
hright:400px;
background-color:#888;
/*将元素变为伸缩盒模型*/
dispaly:flex;
/*调整主轴方向*/
flex-direction:row;
/*主轴换行方式*/
flex-wrap:wrap;
/*主轴对齐方式*/
justify-content:flex-start;
/*侧轴起始位置对齐(单行)*/
align-items:flex-start;
/*侧轴的结束位置对齐(单行)*/
align-items:flex-end;
/*侧轴的中间位置对齐(单行)*/
align-items:center;
/*侧轴的基线位置对齐(单行)*/
align-items:baseline;
/*拉伸填满整个父容器（前提：伸缩项目不能给高度），默认(单行)*/
align-items:stretch;
/*侧轴的起始位置对齐(多行)*/
align-content: flex-start;
/*侧轴的结束位置对齐(多行)*/
align-content:flex-end;
/*侧轴的中间对齐(多行)*/
align-content:center;
/*元素中间距离相等，且是元素至边缘距离的两倍(多行)*/
align-content:space-around;
/*元素之间距离相等，且元素至边缘没有距离(多行)*/
align-content:space-between;
/*元素之间距离相等，且等于元素至边缘的距离(多行)*/
align-content:space-evenly;
/*拉伸对齐，默认，(多行)*/
align-content: stretch;
}
元素垂直居中
.outer{
wifth:400px;
hright:400px;
background-color:#888;
/*将元素变为伸缩盒模型*/
dispaly:flex;
/*方案一*/
justify-content: center;/*主轴中间对齐*/
align-items: center;/*侧轴中间对齐*/
}
.inner{
width:100px;
height:100px;
background-color:orange;
/*方案二*/
margin:auto;
}
基准长度
flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。
主轴横向：宽度失效；主轴纵向：高度失效
即可以让我们自行设置flex布局中元素的宽或高
浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目的宽或高。
<style>
.outer{
wifth:400px;
hright:400px;
background-color:#888;
margin:0 auto;
/*将元素变为伸缩盒模型*/
dispaly:flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.inner{
width:200px;
height:200px;
background-color:skyblue;
border: 1px solid black;
box-sizing:border-box;
}
.inner2{
/*设置该元素的基准长度 若主轴是横向的则原本的宽失效，若主轴是纵向的则原本的高失效*/
flex-basis:400px;
}
</style>
<body>
<div class="outer">
<!--设置完基准长度后，类名为inner2的元素宽度为400px，而其他元素宽度是一样的，浏览器会先减去设置的基准长度，再根据剩下的长度设置其他元素的宽度/高度-->
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
</body>
伸缩项目—伸
给设置的flex布局的子元素设置flex-grow,就可以使元素根据flex-grow的值占全部子元素flex-grow的值来瓜分当前行的剩余空间
flex-grow默认值为0，即就算有剩余空间也不去瓜分
<head>
<meta charset="UTF-8">
<title>10_伸缩项目_伸</title>
<style>
.outer {
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/*只要有flex-grow就是拉伸项目，拉伸项目会根据自身的值占总值的多少去瓜分剩余空间 */
/* flex-grow: 0;*/
}
.inner1 {
flex-grow: 1;
}
.inner2 {
flex-grow: 2;
/* width: 300px; */
}
.inner3 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="outer">
<!--这里123三个元素就会按照1/4,1/2,1/4来瓜分剩余可用空间-->
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
伸缩项目—缩
通过对元素设置flex-shrink可用缩小元素，一般用于解决父元素空间不够时导致换行的问题
flex-shrink默认值为1
<style>
.outer {
width: 400px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
flex-grow: 1;
/* 伸缩的算法和拉伸的不一样
三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别为： 1 、 2 、 3
若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px
所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
1. 计算分母： (200×1) + (300×2) + (200×3) = 1400
2. 计算比例：
项目一： (200×1) / 1400 = 1/7
项目二： (300×2) / 1400 = 3/7
项目三： (200×3) / 1400 = 3/7
3. 计算最终收缩大小：
项目一需要收缩： 1/7 × 300
项目二需要收缩： 3/7 × 300
项目三需要收缩： 3/7 × 300
收缩的极限是保证其内容的展示
*/
}
/*自定义压缩比*/
.inner1 {
flex-shrink: 1;
}
.inner2 {
flex-shrink: 2;
}
.inner3 {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">
<div style="width: 50px;height:50px;background-color: green;">1</div>
</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
复合属性
.inner{
/*可拉伸 可压缩 不设置基准长度，简写为：flex:auto*/
flex:1 1 auto;
/*可拉伸 可压缩 设置基准长度为0，简写为：flex:1*/
flex: 1 1 0;
/*不可拉伸 不可压缩 不设置基准长度，简写为：flex:none*/
flex: 0 0 auto;
/*不可拉伸 可压缩 不设置基准长度，简写为：flex:0 auto */
flex: 0 1 auto;
}
项目排序
使用order属性，浏览器会根据order的值大小对元素进行排序，值越大越靠前，默认均为0
<head>
<meta charset="UTF-8">
<title>13_项目排序与单独对齐</title>
<style>
.outer {
width: 600px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可拉伸 可压缩 设置基准长度为0，简写为：flex:1 */
flex: 1 1 0;
}
/* order属性定义项目排列顺序。数值越小，排列越靠前，默认为0*/
.inner1 {
order: 3;
}
.inner2 {
order: 2;
}
.inner3 {
order: 1;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
单独对齐
align-self属性，会对齐当前flex行中的元素，对齐方向为当前flex元素排列方向的垂直方向
如果任何 flex元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self
<head>
<meta charset="UTF-8">
<title>13_项目排序与单独对齐</title>
<style>
.outer {
width: 600px;
height: 900px;
background-color: #888;
margin: 0 auto;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
/* 可拉伸 可压缩 设置基准长度为0，简写为：flex:1 */
flex: 1 1 0;
}
.inner2{
/*默认值*/
align-self: stretch;
/*对齐当前侧轴的中心位置*/
align-self:center;
/*对齐当前侧轴的开始位置*/
align-self: start;
/*对齐当前侧轴的结束位置*/
align-self: end;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</div>
</body>
响应式布局
媒体类型
/*打印机或打印机预览样式*/
@media print{
h1{
background:transparent;
}
}
/*适用于屏幕，显示器，手机屏幕等*/
@media screen{
h1{
font-family:'翩翩体';
}
}
/*适用于所有设备*/
@media all{
h1{
color:red;
}
}
媒体特性
/*视口宽度为800px时应用的样式*/
@media(width:800px){
h1{
background-color:green;
}
}
/*视口宽度小于800px时应用的样式*/
@media(max-width:800px){
h1{
background-color:green;
}
}
/*视口宽度大于800px时应用的样式*/
@media(min-width:800px){
h1{
background-color:green;
}
}
/* 检测到视口的高度等于800px时，应用如下样式 */
@media (height:800px){
h1 {
background-color: yellow;
}
}
/* 检测到屏幕的宽度等于1536px时，应用如下样式 */
@media (device-width:1536px) {
h1 {
color: white;
}
}
运算符
/*且运算符*/
/*视口宽度大于700px小于800px应用的样式*/
@media(min-width:700px) and (max-width:800px){
h1{
color:red;
}
}
/*或运算符*/
/*在显示器上且视口小于700px或大于800px应用的样式*/
@media screen and (max-width:700px) or (min-width:800px){
h1{
color:skyblue;
}
}
/*否定运算符*/
/*在非显示器上应用的样式*/
@medis not screen{
h1{
color:black;
}
}
/*肯定运算符*/
/*仅在显示器上且视口为800px时应用的样式*/
@media only screen and (width:800px){
h1{
color:white;
}
}
常用阈值
/*超小屏幕*/
@media screen and (max-width:768px) {
h1 {
background-color: orange;
}
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px) {
h1 {
background-color: green;
}
}
/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px) {
h1 {
background-color: deepskyblue;
}
}
导入方式
媒体查询的内容我们一般独立编写css文件，然后进行编写，编写完成导入即可
<link rel="stylesheet" href="./css/large.css">
我们也可以使用medis属性在导入时确定应用于什么样的媒体
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/huge.css">
浮动
float 浮动特点：
脱离文档流。
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
不会独占一行，可以与其他元素共用一行。
不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
不会像行内块一样被当做文本处理（没有行内块的空白问题）。
浮动产生的影响
对兄弟元素的影响： 后面的非浮动兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
解决浮动影响
/*给父元素设置高度解决父元素塌陷问题*/
div{height:100px}
/*给父元素也加上浮动,也能解决父元素塌陷问题*/
div{float:left}
/*给父元素设置overflow:hidden，也能解决父元素塌陷问题*/
div{overflow:hidden}
/*给受影响的兄弟元素添加clear:both 清除浮动影响 可以解决父元素和兄弟元素的问题*/
/*使用前提，本身不是浮动元素，且不能是行内元素。可以是空元素*/
mofa{
clear:both;/*清除前面所有兄弟左右浮动产生的影响*/
/*也可以clear:left(right)单独清除一方向的浮动影响*/
}
/*最好的解决方法*/
/*给父元素的伪元素添加配置,其实就是上面方法的整合，即不需要在后面添加一个非浮动的兄弟元素，直接通过伪元素添加，内容为空，是一个块元素，然后清除浮动*/
div::after{
content:'';
display:block;/*默认是行内元素，不能是行内元素，所以修改*/
clear:both;
}
定位
相对定位
使用position:relative;开启相对定位
div{
/*相对定位是相对于原来的位置进行变化*/
position:relative;
top:10px;/*相对于原来的位置向下远离10px*/
left:10px;/*相对于原来的位置向右远离10px*/
}
绝对定位
使用position:absolute;开启绝对定位，会脱离文档流
任何元素开启绝对定位后，都变成了定位元素
定位元素：
默认宽高均被内容撑开，且能自由设置宽高
绝对定位与浮动无法共存，两者存在时以绝对定位为主
div{
position:relative;/*绝对定位基本上搭配相对定位使用*/
}
.box{
/*绝对定位的参考点是它的包含块*/
/*包含块：
对于没有脱离文档流元素，包含块就是它的父元素
对于脱离了文档流的元素，包含块是它的第一个拥有定位属性的祖先元素，如果祖先元素均没有定位元素，那么参考点就是整个页面*/
position:absolute;
top:220px;
left:20px;
}
固定定位
使用position:flxed;开启固定定位，会脱离文档流
固定定位元素会始终停留在页面，不会随着滚动条移动消失
任何元素开启固定定位后，都变成了定位元素
固定定位与浮动无法共存，两者存在时以固定定位为主
固定定位参考为浏览器视口
.box{
position:fixed;
bottom:0;
right:0;
}
粘性定位
使用position:sticky;开启固定定位，不会脱离文档流
粘性定位用于窗口滚动时的定位
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.page-header {
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
font-size: 20px;
}
.item {
background-color: gray;
}
.first {
background-color: skyblue;
font-size: 40px;
position: sticky;/*开启粘性定位 参考点离它最近的一个拥有“滚动机制”(即滚动条)的祖先元素，即便这个祖先不是最近的真实可滚动祖先。*/
/*同样会一直往上寻找*/
top: 0px;/*粘住位置*/
}
</style>
<body>
<!-- 头部 -->
<div class="page-header">头部</div>
<!-- 内容区 -->
<div class="content">
<!-- 每一项 -->
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="first">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="first">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</body>
定位层级
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。默认是0
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。
定位的特殊应用
实现相对于祖先定位元素的垂直居中
方案一：
div{position:relative}
.box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
方案二：
div{position:relative}
.box{
position:absolute;
width:400px;
height:100px;
left:50%;
top:50%;
margin-left:-200px;/*为元素宽度的一半取反*/
margin-top:-50px;/*为元素高度的一半取反*/
}
2D变换
位移
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*水平位移50px(向右位移)*/
transform:translateX(50px);
/*垂直位移(向下位移)*/
transform: translateY(50px);
/*水平+垂直位移*/
transform: translate(50px,50px);/*只写一个默认x*/
/*使用百分比 移动的是自身的50%*/
transform:translate(-50%,-50%);
}
缩放
使一个元素放大缩小，内部的文字，图片等也会被缩放，不能作用于行内元素
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*x方向缩小0.5倍*/
transform:scaleX(0.5)
/*x方向放大1.5倍*/
transform: scaleX(1.5);
/*xy方向同时缩放*/
transform:scale(0.5)
}
旋转
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*值为角度，正值为顺时针，负值为逆时针*/
transform:rotate(30deg);
}
扭曲
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*值为扭曲的角度 正值为顺时针，负值为逆时针*/
transform: skewX(-30deg);
transform: skew(30deg);
}
多重变换
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*同时发生位移和旋转 多重变化有旋转时，建议最后进行旋转*/
transform:translate(100px,100px) rotate(30deg);
}
变化原点
变化元素的原点，变换之后对旋转，缩放会产生影响，位移不会
.inner{
width:200px;
height:200px;
background-color:skyblue;
/*通过具体像素变换*/
transform-origin:50px 50px;
/*通过百分比变换*/
transform-origin:25% 25%;
/*通过关键字变换*/
transform-origin:right bottom;/*右下角*/
}
3D变换
元素要进行3D变化，父元素必须开启 3D 空间，开启景深
景深
景深：指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;/*不允许负值*/
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(30deg);
}
透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在开启3D变化元素的中心，即可以控制从哪个方向对元素进行观察，很少去改变它
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
/* 设置透视点的位置 第一个值越大，观察位置就越靠右 第二个值越大就越靠下*/
perspective-origin: 102px 102px;
}
位移
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner{
width:200px;
height:200px;
background-color:black;
/*代表顺着z轴向我们走来，根据远大近小，元素会越来越大*/
/*z轴上不能写百分比*/
transform: translateZ(150px);
}
旋转
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner{
width:200px;
height:200px;
background-color:black;
/*参数分别代表x，y，z，旋转的角度 其中1代表该轴旋转，0表示该轴不旋转*/
transform:rotate3d(1,1,0,30deg);
}
缩放
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner{
width:200px;
height:200px;
background-color:black;
/*参数为x，y，z的缩放倍数 3d缩放看不出来 需要配合旋转*/
transform:scale3d(1.5,1.5,1) rotateY(-45deg);
}
多重变换
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner{
width:200px;
height:200px;
background-color:black;
transform: translateZ(100px) scaleZ(1) rotateY(45deg);
}
背部可见性
控制即旋转到后面后正面的元素是否可见，默认可见
.outer{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深（有了透视效果，近大远小） */
perspective: 500px;
}
.inner{
width:200px;
height:200px;
background-color:black;
transform: rotateY(0deg);
backface-visibility: hidden;/*设置背部不可见*/
}
过渡
谁需要过渡就给谁添加过渡效果
可以发生过渡的属性：
只要值是可以用数字一类表示的(如百分比，数字，颜色(可以转为数字表示))那就都可以过渡
基本使用
.box{
width:200px;
height:200px;
background-color: deepskyblue;
/*设置需要过渡到属性*/
transition-property: width,height,background-color;
/*分别设置过渡时间*/
transition-duration: 1s,1s,1s;
/*全部属性过渡*/
transition-property: all;
/*设置统一过渡时间*/
transition-duration: 1s;
}
.box:hover{/*过渡后样式*/
width: 400px;
height: 400px;
background-color: green;
transform: rotate(45deg);
box-shadow: 0px 0px 20px black;
opacity: 1;/*透明度*/
}
过渡效果
.box{
width:200px;
height:200px;
background-color: deepskyblue;
/*全部属性过渡*/
transition-property: all;
/*设置统一过渡时间*/
transition-duration: 1s;
}
.box:hover{/*过渡后样式*/
width: 1300px;
/*平滑过渡，默认值*/
transition-timing-function: ease;
/*匀速过渡*/
transition-timing-function: linear;
/*慢快过渡*/
transition-timing-function: ease-in;
/*快慢过渡*/
transition-timing-function: ease-out;
/*慢快慢过渡*/
transition-timing-function: ease-in-out;
/*不考虑过渡时间，直接就是终点*/
transition-timing-function: step-start;
/*考虑过渡时间，但是没有过渡效果，时间到了瞬间到终点*/
transition-timing-function: step-end;
/*分步过渡*/
transition-timing-function: steps(20,end);
/*贝塞尔曲线*/
transition-timing-function: cubic-bezier(1,.35,.78,1.24);
}
复合使用
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
transition:linear all 3s 0.5s;/*除了过渡时间要在过渡延迟前面，其他顺序没有要求*/
}
.outer:hover .inner {
width: 1000px;
}
动画
基本使用
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键帧）—— 第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定义一个动画（定义一组关键帧）—— 第二种方式 */
@keyframes wangyoudong2 {
/* 第一帧 */
0% {
}
/* 29% {
background-color: red;
} */
/* 48% {
background-color: orange;
} */
/* 88% {
background-color: yellow;
} */
/* 最后一帧 */
100% {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素(相对于定义应该动画名称，然后你要去写这个动画) */
animation-name: wangyoudong2;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
}
其他属性
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
@keyframes atguigu {
from {}
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: atguigu;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
/* ********其他属性--start*********** */
/* 设置动画的方式 */
animation-timing-function: linear;/*匀速 和过渡方式一样的属性*/
/* 动画播放的次数 */
animation-iteration-count: 1;/*infinite是无限循环 可以设置数字指定播放次数*/
/* 动画的方向 */
animation-direction: alternate;
/*
1.normal ： 正常方向 (默认)
2. reverse ： 反方向运行
3. alternate ： 动画先正常运行再反方向运行，并持续交替运行
4. alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行
*/
/* 动画以外的状态（不发生动画的时候在哪里） */
animation-fill-mode: forwards;
/*forwards ： 设置对象状态为动画结束时的状态 backwards ： 设置对象状态为动画开始时的状态*/
}
.outer:hover .inner {
/* 动画的播放状态 */
animation-play-state: paused;/*停止播放*/
}
复合属性
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
@keyframes atguigu {
from { }
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
animation: forwards 3s 0.5s alternate-reverse linear 2 atguigu;
/*动画以外的状态 动画时间 动画延迟时间 反方向循环允许 循环次数 动画名称*/
/*需要注意的是动画时间必须在动画延迟时间前面，对其他的顺序没有要求*/
}
与过渡的区别
动画不需要触发条件，过渡需要
动画可以精细的设置各个地方的样式，而过渡只能控制开始和结束的样式
多列布局
.outer {
width: 1000px;
margin: 0 auto;
/* 直接指定列数 */
column-count: 4;
/* 指定每一列的宽度，会自动计算列数 */
column-width:220px ;
/* 复合属性，能同时指定列宽和列数（不推荐使用） */
columns: 4;
/* 调整列间距 */
column-gap: 20px;
/* 每一列的边框宽度 */
column-rule-width: 2px;
/* 每一列的边框风格 */
column-rule-style: dashed;
/* 每一列的边框颜色 */
column-rule-color: red;
/* 边框相关的复合属性 */
column-rule: 2px dashed red;
}
h1 {
column-span: all;/*横跨所有列*/
text-align: center;
font-size: 50px;
}
img {
width: 100%;
}
可以实现这种效果
BFC
BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。
开启了BFC好处
元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
下面元素开启了BFC
根元素，浮动元素，绝对定位、固定定位的元素，行内块元素
表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
伸缩项目
多列容器
column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display 的值，设置为 flow-root
重置默认样式
很多元素都有自己的默认样式，但是我们在开发过程中可能并不需要这些样式，如p元素有默认的margin，超链接有默认的下划线，ul有默认的左padding等
我们可以创建reset.css文件用来消除默认样式
也可以去 Normalize.css官网，它在清除默认样式的基础上，保留了一些有价值的默认样式。
官网地址：Normalize.css: Make browsers render all elements more consistently.
相对于 reset.css ， Normalize.css 有如下优点：
保护了有价值的默认样式，而不是完全去掉它们。
为大部分HTML元素提供一般化的样式。
新增对 HTML5 元素的设置。
对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
