!important 提升指定样式规则的应用优先权
font-weight：
normal 清除h1、h2....
尺寸属性
width:宽度
max-width:最大宽度
min-width:最小宽度
height：高度
溢出处理
overflow: 取值：visible 默认值，溢出部分可见的、hidden溢出部分隐藏、scrol不管是否溢出，x和y轴方向都添加滚动条、auto只有溢出才有滚动条，不溢出没有 、overflow-x设置水平轴滚动、overflow-y 设置垂直轴滚动条
边框
border:width style color;
style
solid 实线
dotted 点点虚线
dashed 断线虚线
double 双实线
color：
合法的颜色值和transparent[等同于全透明]
边框的倒角(圆角)
border-radius: px
边框的阴影
box-shadow:
取值：h-shadow v-shadow blur spread color inset;
h-shadow 水平方向的阴影偏移
v-shadow 垂直方向的阴影偏移
blur 阴影模糊距离
spread 阴影尺寸
color 阴影的颜色
inset/outset 设置内部阴影和外部阴影
轮廓
在边框外围的一圈线条，被称为边框的边框
outline:width style color;
去除轮廓，去除边框
border:none/0;
outline:none/0;
**框模型，盒子模型**
外边距margin：边框以外的距离，元素与元素之间的距离
内边距padding：边框与内容区域之间的距离font-size 字体大小
外边距溢出
在子元素之间添加一个空的<table></table> 或者overflow: hidden
合并内外边距
box-sizing 取值:border-box content-box box-sizing:border-box的宽高包含内外边距
背景图片
background-image:url(09.png);
背景图片的平铺
background-repeat 取值：1.repeat 默认值 平铺2.no-repeat 不平铺3.repeat-x 水平方向平铺4.repeat-y 垂直方向平铺
背景图片的定位
background-position:x y;
背景图片的尺寸
background-size:x y
背景图片的固定
background-attachment取值：scroll 默认值，背景图会跟随页面滚动条而滚动/fixed 固定，背景图相对于页面位置固定
文本对齐方式
text-align: 取值 left/center/right/justify
行高
line-height 取值 px为单位的数字
文本的线条修饰
text-decoration 取值 1.none 默认值，无线条2.underline 下划线3.overline 上划线4.line-through 删除线 项目中使用最多的,a标签去除下划线 textdecoration:none;
首行缩进
text-indent：以px为单位的数字
文本阴影
text-shadow:h-shadow v-shadow blur color h-shadow 水平偏移v-shadow 垂直偏blur模糊距离color阴影颜色
边框的合并和分离
border-collapse: 取值： separate 默认值，边框分离状态 collapse 边框合并状态
边框的边距
border-spacing:x y; 取值，以px为单位的数字/前提，边框必须是分离状态，才有效border-collapse: separate
普通流定位 (默认文档流定位)
浮动定位
float 取值：left right none
清除浮动效果(清除浮动)
clear 取值：none （不清除）right（右） left（左） both （左右）需要在浮动元素平级除添加空标签设置clear
显示方式
display:
取值：
1.display:block； 让元素以块级的方式显示
2.display:inline； 让元素以行内的方式显示
3.display:inline-block； 让元素以式显示
4.display:table； 让元素以table的方式显示行内块的方
5.display:none； 让元素隐藏，脱离文档流，不占位置、
显示效果
Visibility 取值：
1.visible 默认值，可见的2.hidden 隐藏
垂直对齐方式
vertical-align table使用 图片使用
关标
cursor: 默认值 default
小手 pointer
十字 crosshair
文本 text
等待 wait
帮助 help
清除ul li样式
list-style-type取值 1.disc 默认值2.none 去掉标识项3.circle4.square
定位position:
取值：
1.static 默认，静态(默认文档流)
2.relative相对定位 .一般作为绝对定位的祖先元素
3.absolute 绝对定位 使用绝对定位需设置父级元素为相对定位，不然会找body，或最近定位元素
4.fixed 固定定位
相邻兄弟选择器
选择器 + 选择器{} 获取紧紧挨在某元素后面的兄弟元素p+.c1{color:#f00;}
通用兄弟选择器
选择器 ~ 选择器{} 获取元素后面所有符合条件的兄弟#p1~.c1{color:#f00;}
伪类选择器
:link :visited :hover :active :focus
结构伪类选择器
1.选择器 标签:first-child{} 匹配的元素是属于其父元素的第一个子元素(找大哥)
2.选择器 标签:last-child{} 匹配的元素是是属于其父元素的最后一个子元素(找小弟
3.选择器 标签:nth-child(n) n从1开始
:empty 匹配内部没有任何元素标签，包括文本，空格，回车，都不能有
only-child 匹配属于其父元素的唯一子元素
:not(selector) 否定伪类
:first-letter或者 ::first-letter 匹配元素的首行首字符
:first-line 或者 ::first-line 匹配元素的首行
弹性布局
display:flex 要发生弹性布局的子元素，他们的父元素，成为容器需设置display:flex，flex将块级元素设置为容器， inline-flex将行内元素设置为容器 元素设置为flex容器后，容器的text-align，vertical-align失效
设置主轴的方向
flex-direction 取值
row 默认值，主轴是x轴，主轴起点在左端
row-reverse 主轴是x轴，主轴起点在右端
column 主轴是y轴，主轴起点在顶部
column-reverse 主轴是y轴，主轴起点在底部
设置项目的换行
flex-wrap: 取值
默认值 nowrap 空间不够时，不换行，项目会自动缩小
wrap 空间不够时，项目不缩小，换行
wrap-reverse 项目换行，并反转
定义项目在主轴上的对齐方式
justify-content 取值
1.flex-start 默认值，主轴起点对齐
2.flex-end 主轴终点
3.center 主轴中心
4.space-around 每个外边距相同，两端有空白
5.space-between 两端对齐，两端无空白
项目们在交叉轴上的对齐方式
align-items: 取值
1.flex-start 默认值，交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴中间对齐
4.baseline 基线，同flex-start类似
5.stretch 项目不写高，充满容器整个高度
css hack
由于不同的浏览器对css的解析认知是不同的，会导致同一份css在不同的浏览器生成的页面效果不同
我们要针对不同的浏览器写不同的css代码
这种写不同css代码的过程，就叫css hack
tmooc有相关的视频
-webkit-
-ms-
-moz-
-o-
指定参与过渡的属性
transition-property 取值 all 所有支持过渡属性都参与，单独写某个css属性，多个属性间用空格分开
指定过渡时长
transition-duration: s/ms 指定多长时间完成此次过渡操作
过渡时间曲线函数
transition-timing-function:
取值：
1.ease 默认值，慢速开始，中间变快，慢速结束
2.linear 匀速
3.ease-in 慢慢开始，一直加速
4.ease-out 快速开始，一直减速
5.ease-in-out 慢速开始，慢速结束，中间先加速再减速
延迟执行
transition-delay:s/ms
过渡代码编写的位置
写在原来的选择器中，过渡效果有去有回
写在hover中，过渡效果有去无回l
text-decoration:none 清除a标签
slice 截取字符串
active 选中
hover 鼠标移入
disabled 禁用值是true或者false
display:none; 隐藏block
placeholder 属性规定一个简短的提示，它描述了表单提示内容
<input type="radio" value="1" checked> radio单选按钮 checked控制是否选择值是true或者false
<input type="checkbox" value="1" checked> checkbox复选框
<select> <option value ="volvo">Volvo</option> </select> 下拉列表
outline:none; 属性规定了表单的默认样式
过渡 重点
让CSS的值在一段时间内平缓的变化
1.指定过渡的属性
Transition
1、指定过渡的属性
transition-property:background-color border-radius**;**all所有支持过渡的属性都过渡
支持过渡的属性有：颜色属性 大多数取值为具体数字的属性 阴影 转换 visibility
2、指定过渡持续时间
transition-duration: 3s; s/ms
3过渡时间曲线函数
transition-timing-function
值：ease默认慢速开始，中间边快，慢速结束
linear匀速
ease-in 慢慢开始，一直加速
ease-out 慢慢开始，一直减速
ease-in-out 慢慢开始，慢慢结束，中间先加速再减速
Transform **转换** 重点
改变元素在页面中的位置，大小，角度，形状
2D转换 3D转换
Transform 取值：none默认值，无任何效果 tranform-function转换函数
tranform-function 分为位移 旋转 放大 倾斜 3D旋转
/* 角度转换 */
transform: rotate(45deg);/* rotate转换元素角度 */
transform-origin: right bottom; 转换原点会影响元素旋转的效果 取值上下左右中 数字
2D转换
1、Translate()位移transform: translate(150px,150px); /* 位移 取值translate(x,y) translateX(x) translateY(y)*/
2、Scale()缩放 transform: scale(0.5,2); scale(x,y) scaleX(x) scaleY(y) scale(n)
3、Rotate()旋转 transform: rotate(45deg);/* rotate转换元素角度 */倾斜
transform-origin: right bottom; 转换原点会影响元素旋转的效果 取值上下左右中 数字
4、skew倾斜 transform: skew(45deg);
3D转换
Perspective:px 透视距离 此属性要写在3D转换元素的父元素上、
网友评论