引入外部样式表
-
引入类型为css类型，href为css文件的路径
-
<link rel="stylesheet" type="text/css" href="./css/01.css"> 在样式标签里面导入外部样式表 @import url('../../css/index.css')
单位
-
em为按照字体的大小，默认网页字体大小为16px，则1em=16px px为像素单位
权重
-
!important，加在样式属性值后，权重值为 10000 内联样式，如：style=''，权重值为1000 ID选择器，如：#content，权重值为100 类，伪类和属性选择器，如： .content、:hover 权重值为10 标签选择器和伪元素选择器，如：div、p、:before 权重值为1 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
盒子模型
-
html每一个元素都是一个矩形盒子，盒子分为内容区域，内间距，边框区域，外间距，内间距设置一般是设置主题区域内容和边框之间的间隔，外间距则是设置两个盒子之间的间距 box-sizing属性：content-box是在宽度和高度之外绘制内边距和边框，border-box是在绘制完之后才计算内容区域的大小，默认为content-box属性值
分栏
-
用于文章，一般文章分栏需要用到
-
设置分几栏，用在包裹容器 column-count: 3; 设置每栏之间的间距 column-gap: 40px; 设置每栏之间的宽度，会根据宽度自动分栏 column-width: 100px; 设置每栏的边框线 column-rule: 3px dashed red; 设置里面元素横跨所有栏 column-span: all;
过渡
-
设置过度的属性 transition-property: all; 设置过度的时间 transition-duration: 1s; 设置过度为匀速 transition-timing-function: linear; 设置过度延迟 transition-delay: 2s;
选择器
-
后代选择器 父元素 子元素 子选择器 父元素>子元素 群组选择器 .h1,.h2,.h3{} 悬浮 元素: hover 获得焦点 元素: focus 链接未被访问 元素: link 链接被访问 元素: visited 元素被激活 元素: active 选中 元素: checked 可用 元素: enabled 禁用 元素: disabled 匹配父元素的第一个元素 元素: first-child 匹配父元素的最后一个元素 元素: last-child 匹配父元素的第n个元素 元素: nth-child(n) 匹配父元素的倒数第n个元素 元素: nth-last-child(n) 匹配父元素同级的第一个元素 元素: first-of-type 匹配父元素同级的最后一个元素 元素: last-of-type 匹配父元素同级的第n个元素 元素: nth-of-type(n) 匹配父元素同级的倒数第n个元素 元素: nth-last-of-type(n)
背景
-
背景颜色 background-color 背景图片 background-image 设置背景图片的大小 background-size cover=全屏显示 设置背景图片是否铺满 background-repeat no-repeat=不铺满 repeat-x/y=水平或者垂直铺满 设置背景图片的定位 background-position center=居中 设置背景图片不跟随屏幕进行滚动 background-attachment：fixed
浮动定位
-
浮动和定位都是图例文档流的
-
给父元素添加after 浮动 float: left; 清除浮动 clear: left; 清除所有浮动 clear: both; 浏览器定位 position: fixed 静态定位，默认 position: static 相对定位 position: relative 绝对定位 position: absolute 绝对定位 position: sticky
渐变
-
线性渐变 background-image: linear-gradient(to 方向，颜色1，颜色2); 透明渐变 background-image: linear-gradient(to 方向,rgba(255,0,0,0),rgba(0,255,0,1)); 重复线性渐变 background-image: repeating-linear-gradient(red 10%,blue 20%); 径向渐变 background-image: radial-gradient(red,blue); 重复径向渐变 background-image: repeating-radial-gradient(red 10%,blue 20%);
2D
-
距离左边和上边产生间距 transform: translate(50px,100px) 顺时针旋转30度 transform: rotate(30deg) 第一个为宽，第二个为高，缩放大小 transform: scale(0.5,0.5) 围绕Y轴进行倾斜 transform: skewY(20deg) 围绕X轴进行倾斜 transform: skewX(20deg) 调整中心点 transform-origin：x y;
3D
-
应用到父元素，让里面的子元素全部定义成3d效果 transform-style: preserve-3d; 应用到父元素，定义3d透视的大小程度 perspective:100 围绕Y轴旋转180度 transform: rotateY(180deg) 围绕X轴旋转180度 transform: rotateX(180deg) 围绕Z轴旋转180度 transform: rotateZ(180deg) 距离Z轴100像素 transform: translateZ(100px); 距离X轴100像素 transform: translateX(100px); 距离Y轴100像素 transform: translateY(100px);
动画
-
定义动画，from是开始，to是结束，也可以用% @keyframes 动画名{ from{ } to{ } } 动画延迟，延迟两秒 animation-delay:2s 动画播放效果 animation-direction normal=正常播放 alternate=反向播放 动画时间 animation-duration:2s 播放次数 animation-iteration-count 1=播放一次 infinite=无限次播放 调用动画 animation-name 匀速播放动画 animation-timing-function: linear 动画开始还是暂停 animation-play-state:paused paused=暂停 running=播放
响应式
-
基本设置，宽度缩放为1.0，允许手动放大缩小 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes"> 设置最小宽度 min-width: 100px; 设置最大宽度 max-width: 100px; 设置最小高度 min-height: 100px; 设置最大高度 max-height: 100px; 响应式，意思就是最小宽度1000px，超过这个宽度就执行里面的代码 @media only screen and (min-width:1000px) { } 响应式，意思就是最大宽度1000px，小于这个宽度就执行里面的代码 @media only screen and (max-width:1000px) { }
轮廓
-
轮廓，属性三个值，第一个粗细，第二个颜色，第三个线性 outline 轮廓偏移 outline-offset
边框
-
设置边框 border-style solid=实线 dashed=虚线 dotted=点线 double=双实线 设置边框颜色 border-color transparent=透明 设置圆角 border-radius 设置边框的宽度 border-width
属性
-
悬浮变小手 cursor：pointer 块居中 margin: auto; 超出部分隐藏 overflow：hidden scroll=超出之后加上滚动条 visible=不隐藏 auto=必要时候加上滚动条 overflow-x/y=x轴和y轴隐藏及 操作前后叠加关系 z-index 设置内间距 padding 设置外间距 margin 文本禁用 disabled 设置元素类型 display block=变成块元素 inline=变成行内元素 none=隐藏 inline-block=变成行内块元素隐藏，但是会占据布局 visibility: hidden 透明度 opacity:0.5; 清除列表的小圆点 list-style：none 设置高度 height 设置宽度 width 设置图片属性 object-fit fill=默认值，填充，会改变图片 contain=保持纵横比放入 cover=填满，对象会被裁剪对div进行调整 resize horizontal=只允许调整宽度 vertical=只允许调整高度 both=可调宽高 none=禁止调整宽高 设置div可以改变尺寸 resize:both;
文本
-
设置字体颜色 color 设置字体上下删除线 text-decoration line-through=删除线 underline=下划线overline=上划线 设置文本中字母 text-transform uppercase=每个字母都大写 lowercase=每个字母都小写 capitalize=每个单词的首字母大写 设置文字之间的间距 letter-spacing 文字缩进 text-indent 设置字体 font-family 设置字体大小 font-size 设置字体的样式 font-style italic=斜体 设置单词和单词之间的间距 word-spacing 设置行高 line-height 设置文字阴影 text-shadow 设置字体加粗 font-weight：bold 文字超出换行 word-wrap: break-word 文字排列 writing-mode: vertical-rl(竖向排列)/horizontal-tb(横向排列) 引用其他文字字体 @font-face{ font-family：名称; src：url(字体路径) } 文本超出不换行 white-space: nowrap; 文本超出显示省略号 text-overflow: ellipsis;
弹性盒子
-
定义块级弹性盒子 display:flex; 定义内连块弹性盒子 display: inline-flex; 弹性盒子排列方式 flex-direction: row水平显示 row-reverse水平颠倒显示 column垂直显示 column-reverse垂直颠倒显示 弹性盒子换行 flex-wrap: nowrap不换行 wrap换行 wrap-reverse颠倒换行 简写写法 flex-flow: 排列方式 换行; 对齐方式 justify-content/align-content: flex-start开头 flex-end结尾 center中心 space-between左右无间距平分 space-around左右有间距平分 纵轴对齐方式，应用于只有一行的情况下 align-items: flex-start开头 flex-end结尾 center居中 baseline按照第一行字的基线对齐 stretch如果未设置高度则会占满 定义排列顺序，默认为0，数越小排的越靠前 order: 1; 子元素分配 flex: 1;
常用组合属性
-
文字超出显示...，可以设置从第几行开始显示省略号，在这边就是从第二行开始 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 单行文本超出显示省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
