目录
样式：
1、行内样式
<div style="width:100px; height:100px; background:red;">123</div>2、内嵌样式
<head>
<style>
h1{
width:100px;
height:100px;
background:red;
}
</style>
</head>3、外链样式
<head>
<link rel="stylesheet" href="css路径">
</head>样式有哪些？
| width | 表示宽 |
| height | 表示高 |
| background-color | 表示背景颜色 |
| border | 表示边框 |
| border: 1px | (边框粗细) solid(边框线类型) red(边框线颜色) |
| solid | 表示边框线(实线) |
| dashed | 表示边框线(虚线) |
| double | 表示边框线(双划线) |
| dotted | 表示边框线(点画线) |
| color | 表示字体颜色 |
颜色分类：
| red | 表示英文红色 |
| #f00 | 表示十六进制红色 |
| rgb(255,255,255) | 表示rgb 0 - 25 |
行内样式优先级最高
内嵌样式 和 外联样式优先级条件是：谁在下面谁优先级高
去掉浏览器的默认样式：
*{
margin:0px;
padding:0px;
}去掉列表的默认样式：
li{
list-style:none;
}去掉a超链接的下划线
a{
text-decoration:none;
}去掉图片的缝隙
img{
vertical-align:top / middle / bottom
}关于font的样式：
| font-size:20px; | 表示字体大小为20像素 |
| font-weight:bolder / bold / 100-700 | 表示字体加粗 |
| font-family: | '黑体/宋体/微软雅黑' 表示字体类型 |
| font-style:normal; | 表示斜体变正体 |
| font-style:oblique; | 表示正体变斜体 |
选择器
| id选择器 | #id名(id名有且只有一个) |
| class选择器 | .class名 |
| *选择器(通配符) | * |
| 标签选择器 | 标签名 |
| 群组选择器 | div,h1,p,..... |
| 子代选择器 | div>p |
| 后代选择器 | div p |
| 属性选择器 | [name="user"] |
| 过滤选择器 | ::after / :after、::before / :before |
| 伪类选择器 | link 表示访问前 hover 表示鼠标移入时 active 表示访问中.. visited 表示访问后 |
选择器的优先级：
id 的优先级 高于 class
class 的优先级 高于 标签
水平居 左(默认)/中/右
text-align:left/center/right
垂直居中(行高)
line-height:和高度保持一致
例如：
height:100px;
line-height:100px;溢出隐藏并且强制在一行
| white-space:nowrap; | 表示强制在一行 |
| text-overflow:ellipsis; | 出现省略号 |
| overflow:hidden; | 溢出隐藏 |
背景图片：
背景图片分写：
| background-image:url(图片路径) | 表示引入背景图片 |
| background-repeat:no-repeat / repeat-x / repeat-y; | 表示背景图片平铺方式(不平铺 / 水平平铺 / 垂直平铺) |
| background-position:left / top | 表示背景图片的位置 |
| background-size:10% 20%; | 表示背景图片的大小 |
| background-clip:border-box / padding-box / content-box; | 表示背景图片的绘制区域 |
| background-origin:border-box / padding-box / content-box; | 表示背景图片的定位位置 |
| background-attachment:scroll(默认) / fixed / inherit | 表示背景图片是否联动 |
| background:url(图片路径) no-repeat center; | 背景图片的合写 |
透明度
1） opcity:0.1 - 0.9;
2） background:rgba(0,0,0,0.5);
opcity 和 background:rgba() 区别
opcity把背景颜色和文本都变透明
background:rgba() 只把背景颜色变透明
外边距:margin
外边距的分写：
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;外边距的合写：
| margin:10px; | 表示上下左右都为10像素 |
| margin:10px 20px; | 表示上下为10，左右为20 |
| margin:10px 20px 30px; | 表示上为10，左右为20，下为30 |
| margin:10px 20px 30px 40px; | 表示上为10, 右为20,下为30,左为40(顺时针) |
内边距:padding
内边距的分写：
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;内边距的合写：
| padding:10px; | 表示上下左右都为10像素 |
| padding:10px 20px; | 表示上下为10，左右为20 |
| padding:10px 20px 30px; | 表示上为10，左右为20，下为30 |
| padding:10px 20px 30px 40px; | 表示上为10, 右为20,下为30,左为40(顺时针) |
注意：在使用内边距padding时，要减去宽/高
盒子模型组成部分：
内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)
盒子模型分为两种：
1）标准盒子模型
2）怪异盒子模型
标准盒子模型 和 怪异盒子模型的相同点和不同点
相同点：
组成部分都是由内容+内边距+边框+外边距
不同点：
标准盒子模型的内容宽高，不包含其他成分
怪异盒子模型的内容宽高由(内容+内边距+边框)
margin-top值的特征：
谁的值大，用谁的值
margin塌陷 和 margin拖拽
1）margin塌陷：父级的margin-top值 大于 子级的margin-top值
2）margin拖拽： 父级的margin-top值 小于 子级的margin-top值
margin塌陷和margin拖拽解决方法：
1）position:absolute;
2）display: inline-block;
3）float: left;
4）overflow:hidden;
5）border:1px solid #000;
margin上下取最大值
margin左右取之和
浮动：
float:left / right;清浮动(给父级添加)
overflow:hidden;
.clearfix:after{
content:'';
clear:both;
display:block;
}
.clearfix{
zoom:1;
}谁需要清浮动就加 .clearfix
什么时候用浮动：
一般情况下 -> 上下局部 转为 左右布局时用浮动
浮动的注意事项：
1）子级浮动，父级要清浮动
2）同级的元素，一个浮动，其他兄弟元素都要浮动
解决小图标 和 文本左右布局问题
1）使用浮动 -> float:left / right;
2）给img标签添加 -> vertical-align:top / middle / bottom;
给标签添加上划线、中划线、下划线
| text-decoration:overline; | 表示上划线 |
| text-decoration:line-through; | 表示中划线 |
| text-decoration:underline; | 表示下划线 |
定位分几种？
1）相对定位 -> position:relative;
2）绝对定位 -> position:absolute;
3）固定定位 -> position:fixed;
3种定位依据谁定位的介绍：
1）相对定位是依据自己本身定位的
2）绝对定位是依据有定位的父级定位
3）固定定位是依据body(网页)定位
关于父级和子级的定位关系
1）子级是绝对定位(position:absolute;)父级只要有定位(无论是相对定位、绝对定位还是固定定位)，绝对定位的子级就会依据父级定位。
2）子级是绝对定位，但父级没定位，子级依据body定位
层级： z-index: 2;(数字越大，层级越高)
层级的使用条件：
必须有定位(无论是相对定位、绝对定位还是固定定位)
定位中父级和定位中子级的关系
1）父级的层级永远比相对定位/绝对定位的子级低
2）相同定位的子级，谁的z-index数值越大，谁的层级越高
圆角：
border-radius:20px / 20%;圆角的分写：
表示左上角
border-top-left-radius:20px;表示右上角
border-top-right-radius:30px;表示左下角
border-bottom-left-radius:40px;表示右下角
border-bottom-right-radius:50px;圆角的合写：
border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角、左下角(顺时针方向)
盒子阴影：
box-shadow: 1px(阴影水平位置) 1px(阴影垂直位置) 10px(模糊度) #000(阴影颜色)
边框图片：
border-image:url(图片路径) 左右拉伸 上下拉伸 围绕方式round(平铺填充) / stretch(拉伸填充)
渐变：
- 线性渐变：linear-gradient
background-image: Linear-gradient(方向, 颜色1, 颜色2)
- 径向渐变：radial-gradient
background-image: radial-gradient(circle/ellipse, 颜色1, 颜色2)
文本效果：
文本阴影：
text-shadow: 5px(水平阴影位置) 5px(垂直阴影位置) 10px(模糊度) #f00(阴影颜色);
盒子阴影：
box-shadow:5px(水平阴影位置) 5px(垂直阴影位置) 10px(模糊度) #f00(阴影颜色);
text-overflow:
A: text-overflow:clip; (默认值)
B: text-overflow:ellipsis; (出现省略号)
注意：溢出隐藏出现省略号
| white-space:nowrap; | //表示强制在一行 |
| overflow:hidden; | //溢出隐藏 |
| text-overflow:ellipsis; | //出现省略号 |
| word-wrap:break-word; | 表示换行(如果有空格自动换行,没有空格分裂中间的部分) |
| word-break:keep-all; | 表示换行(只能在半角空格或连字符处换行) |
| word-break:normal; | 表示默认(使用浏览器默认的换行规则) |
| word-break:break-all; | 表示换行(允许在单词内换行) |
关于overflow问题
| overflow:hidden; | //表示溢出隐藏 |
| overflow:scroll; | //表示出现上下左右滚动条 |
| overflow:auto; | //表示出现上下滚动条 |
2D转换(transform):
| transform:translate(10px(X轴), 30px(Y轴)); | //表示平移 |
| transform:rotate(30deg / -30deg); | //表示旋转正数顺时针,负数逆时针 |
| transform:scale(1.5, 2) / (1.5); | // 表示缩放原来的倍数 |
| transform:skew(30deg, 20deg) / skewX(20deg) / skewY(30deg); | //表示倾斜 |
| transformorigin:left/right/center/20%top /center/bottom/30%; | //表示改变元素的基点位置 |
3D转换：
| transform-rotateX(30deg); | // 表示3D旋转(围绕x轴) |
| transform-rotateY(20deg); | // 表示3D旋转(围绕Y轴) |
| transform-style:preserve-3d; | //表示保留子元素的3D空间效果 |
| perspective:100px; | // 表示景深(透视效果) |
| perspective-origin:left/right/center/20% top/center/bottom/20%; | //表示改变景深(透视)底部基点位置 |
| backface-visibility:hidden / visible; | //表示当元素背面向屏幕时是否可见 |
Css3中的过渡
transition:css属性名称 过渡时间(s) 运动方式(ease/linear) 延迟时间(s)
例如：
transition:width 2s ease 2s
transition:all 1s linear 2s (推荐使用这种)
注意事项：使用过渡一定要给元素的原样式上面添加
Css3中的动画效果
- 创建动画
@keyframes name名称{
from / 0%{
原样式
}
to/100%{
改变后的样式
}
}- 绑定动画
animation: name名称 动画时长(s) 运动方式(linear/ease) 延迟时间(s) 是否停在当动画位置(forwards/normal) 运动次数(3/ infinite无限循环) 是否反方向运动(normal/reverse/alternate/alternate-reverse)
例如：
animation:move 2s linear 1s forwards infinite alternateanimation-play-state:paused; 表示动画停止
Css3中的多列：
| column-count | 指定元素应该被分割的列数。 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns | 指的是column-width 与 column-count 的简写属性 |
Css3中的box-sizing属性
| box-sizing:border-box; | 表示边框包含在容宽度和高度内 |
| box-sizing:content-box; | 表示边框未包含在内容宽度和高度内 |
| box-sizing:inherit; | 表示边框的属性继承父级中的box-sizing属性 |
CSS3 弹性盒子内容
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
- 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
flex-direction 属性指定了弹性子元素在父容器中的位置
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
| row | 横向从左到右排列（左对齐），默认的排列方式。 |
| row-reverse | 反转横向排列（右对齐，从后往前排，最后一项排在最前面。 |
| column | 纵向排列。 |
| column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面。 |
justify-content 属性
语法：
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的值有：
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items 属性
表示：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items 语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 |
| stretch | 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 |
flex-wrap 属性
表示：用于指定弹性盒子的子元素换行方式。
flex-wrap 语法
flex-wrap: nowrap|wrap|wrap-reverse;
各个值解析:
| nowrap | - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 |
| wrap | - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 |
| wrap-reverse | -反转 wrap 排列。 |
align-content 属性
表示用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content 语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
| stretch | - 各行向弹性盒容器的起始位置堆叠。 |
| flex-end | - 各行向弹性盒容器的结束位置堆叠。 |
| center | -各行向弹性盒容器的中间位置堆叠。 |
| space-between | -各行在弹性盒容器中平均分布。 |
| space-around | - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 |
order弹性子元素属性
表示：排序
语法
order:
各个值解析:
order:数字 表示用整数值来定义排列顺序，数值小的排在前面。可以为负值。
order 属性设置弹性容器内弹性子元素的属性:
align-self
属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
| auto | 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。 |
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 |
| stretch | 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 |
flex
属性用于指定弹性子元素如何分配空间。
例如：flex:1
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
