这里写自定义目录标题
- CSS简介
- CSS选择器
- CSS引用方式
- CSS布局
- 图片居中方式
- 元素显示模式
- 行内元素
- 块元素
- 行内块元素
- 元素显示模式转换
- CSS背景
- CSS三大特性
- 1.层叠性
- 2.继承性
- 3.优先级
- 复合选择器叠加
- 网页布局有：盒子模型、浮动、定位。
- 盒子模型
- 1. 边框--border
- 2.margin外边距
- 3. 圆角边框
- 4. 盒子阴影
- 浮动
- CSS摆放盒子
- CSS属性书写顺序
- 定位
- 定位组成
- 定位模式
- 边偏移
- 定位的叠放顺序
- 定位拓展
- 元素的显示与隐藏
- 精灵图
- 字体图标
- 界面样式
- HTML5
- CSS3
- CSS使用小技巧
- 文字行内居中
- 列表去掉小圆点
- 2D--translate
- 动画
- 动画中常见属性
CSS简介
记录学习CSS过程中的文档便于之后的学习和使用
CSS选择器
-
类选择器
.类名{} -
标签选择器
标签名{} -
id选择器
#id名{} -
属性选择器
选择器名[属性=‘属性名’]{} -
复合选择器
后代选择器又称为包含选择器，可以选择父元素里边子元素，父类名和子类名之间用空格分割父类名 子类名{ 样式声明 }子选择器只能选择作为莫元素的最近一级子元素，也就是说选择亲儿子元素。
父类名>子类名{ 样式声明 }并集选择器多种选择器统一设置声明，用逗号隔离类名。
元素1,元素2,....{ 样式声明 }伪类选择器
链接伪类选择器未访问链接 a:link{} 以访问链接 a:visited{} 经过链接 a:hovor{} 活动链接-按下没但其鼠标 a:active{}:foxus 伪类选择器用于选取获得焦点的表单元素，一般情况下
<input>类表单才能获取
CSS引用方式
一、外部引用
<link rel="stylesheet" href="style.css">
二、内部引用
在<head></head>中间加入<style></style>进行CSS引入
三、行内引用
<div class='css' style=''>
CSS布局
图片居中方式
一、水平居中
-
块元素居中
img{ display: block; margin: 0 auto; } -
flex布局
.box{ display:flex; justify-content:center; } -
父元素设置
text-algin:center<p class='pix'><img src='#' alt=''></p>.pic{ text-algin:center; } -
定位
img{ position:relative; left:50%; transform:translateX(-50%); }
二、垂直居中
1.flex布局
.box1 {
width: 100px;
height: 100px;
background-color: aquamarine;
display: flex;
align-items: center; /* 对单行弹性盒子模型使用可以使用 */
/* align-content: center; 通常使用该属性设置垂直居中，但是该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap ,或者盒子中本来就只有一个元素）。*/
}
dispaly:table-cell
.box{
display:table-cell;
vertical-algin:middle;
}
- 定位
img{
position:relative;
top:50%;
transform:translateY(-50%);
}
元素显示模式
元素显示分为行内元素和块元素两种类型
行内元素
常见行内元素： <a href=""></a><strong></strong><b></b> <em></em> <i></i> <del></del> <s></s> <ins></ins> <u></u> <span></span>
行内元素特点：
- 一行内可以显示多个；
- 高、宽设置无效；
- 默认宽度就是它本身的内容宽度
- 行内元素智能容纳文本或者其他行内元素
块元素
常见的块元素有：<h1></h1> <p></p><div></div> <ul></ul> <ol></ol> <li></li>
块元素特点：
- 独占一行
- 高度、宽度、内外边距等都可控
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素。
行内块元素
<img src="" alt=""><input type="text" name="" id=""><td></td>
同时具备行内元素和块元素的特点：
- 一行内可以有多个
- 本身的宽度就是内容宽度；
- 宽、高等可控
元素显示模式转换
元素名{
display:block;行元素转块元素
display:inline;块元素转行内元素
display:inline-block;行内块元素
}
CSS背景
元素名{
background-color: ;默认为transparent透明色；
background-image: url('');
background-repeat: repeat-x;repeat-y;
background-position: right top left bottom center ; 也可以填写具体数值：20px(x轴) 50px(y轴)；只指定一个值，那该数值一定是X坐标，另一个默认居中；也可以使用混合单位；
background-attachment:fixed;固定背景图片；scroll;滚动；
background:rgba(0,0,0,.3);背景颜色透明度；
}
CSS三大特性
1.层叠性
- 相同选择器设置相同的样式，会导致冲突，在CSS中遵循就近原则，代码从上向下执行，位置靠下的覆盖位置靠上。
- 样式不冲突，不会层叠覆盖。
2.继承性
子标签集成父标签的某些样式，例如文本相关的。
高度、宽度等不会集成
3.优先级
- 选择器相同，执行层叠性
- 选择器不同，根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者 * | 0，0，0，0 |
| 元素（标签）选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style=‘’ | 1，0，0，0 |
| ！important 重要的 | 无穷大 |
复合选择器叠加
复合选择器会将权重进行累加
!!! 权重会叠加，但不会进位
网页布局有：盒子模型、浮动、定位。
盒子模型
盒子包含：边框(border)、外边距（margin）、内边距（padding）、实际内容。
蓝色为实际内容content
padding用来调节border与content的距离
margin用来调节不同盒子之间的距离
盒子实际大小=content+padding+border+margin
1. 边框–border
border:border-width|| border-style || border-color
| 属性 | 作用 | |
|---|---|---|
| border-width | 定义边框粗细 | |
| border-style | 边框样式 | solid实线、dotted点线、dashed虚线 |
| border-color | 边框颜色 | |
| boder-collapse | 相邻边框合并在一起 |
div{
border:2px solid grey;
boder-collapse:collapse;
}
padding
div{
/* 复合写法*/
padding:;
}
| 值的个数 | 表达意思 |
|---|---|
| padding:5px | 1个值，代表上下左右都是5像素内边距 |
| padding:5px 10px | 2个值，代表上下5，左右10 |
| padding:5px 10px 20px | 3个值，代表上5，左右10，下20 |
| padding:5px 10px 20px 30px | 4个值，代表上5，右10，下20，左30 |
2.margin外边距
盒子与盒子之间的距离，参数设置与padding一致。
外边距可以让块级盒子水平居中，但是必须满足两个条件:
- 盒子必须指定了宽度；
- 盒子左右外边距设置为auto；
元素名{
margin-left:aoto;margin-right:auto;
margin:0 auto;
margin:auto;
}
- 外边距合并
- 垂直外边距存在时，出现外边距合并，前提是两个元素相遇，上面的盒子有下边距，下面的盒子有上边距，这样两个盒子会取两个边距中较大值作为边界值，所以尽量只给一个盒子添加margin.
- 对于两个嵌套关系的块元素，父元素有上外边距同事子元素也有上外编剧，此时父元素会塌陷较大的外边距值。解决方案：
- 为父元素定义上边框
- 父元素定义上内边距padding
- 为父元素添加Overflow：hidden;
- 清除内外边距
*{
margin:0;
padding:0;
}
3. 圆角边框
border-radius:50px;50%代表宽高的一半；
4. 盒子阴影
box-shadow:h-shadow vshadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必填，水平阴影位置，可负值 |
| vshadow | 必填，垂直阴影位置，可负值 |
| blur | 选填，模糊距离 |
| spread | 选填，阴影尺寸 |
| color | 选填，阴影颜色 |
| inset | 选填，将外部阴影outset改为内部阴影 |
盒子阴影不占用空间，不影响其他盒子排列
浮动
CSS摆放盒子
- 普通流（标准流）
标签按照规定好默认方式排列
1.块级占一行
2.行级从左到右排列 - 浮动
float属性用于创建浮动框，将其移动到一边，知道左边缘或者右边缘触及包含块或者另一个浮动框的边缘。
浮动可以改变标准流的布局；
例如：可以让多个块元素一行内排列显示。
布局中多个块级元素垂直排列，使用标准流
多个块级元素横向排列找浮动
选择器{
float:none|left|right;
}
浮动特性：
1.浮动元素会脱离标准流（脱标）浮动盒子不再保留原来的位置；
2.浮动元素会一行内显示并且元素顶部对齐
3.浮动元素会具有行内块元素性质
为了约束浮动元素位置，网页布局一般采取策略是：
1. 先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。
浮动盒子会压住后边的标准流盒子，不会影响前边的盒子。
当父盒子本身不方便设置高度，例如：产品列表，新闻页面等，此时可以对父元素清除浮动，父级就会根据浮动的的子盒子自动检测高度。
父盒子本身有高度的不需要清除浮动
清除浮动本质是清除浮动影响
.clear{
clear:属性值;left清除左侧浮动影响；right清除右侧浮动影响；both清除两侧浮动影响；
}
常用
.clear{
clear:both;
}
清除浮动方法：
- 额外标签法
在浮动元素的末尾添加一个空的标签，如<div style='clear:both'></div> - 父级添加overflow属性
选择器{
overfloe:hidden|auto|scroll;
}
- 父级添加after伪元素
.clearfix:after{
content:'',
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
- 父级添加双伪元素。
.clearfix:after,clearfix:before{
content:'';
display:block
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
CSS属性书写顺序
- 布局定位属性：dispaly/position/float/clear/visibiliy/overflow
- 自身属性：width/height/margin/padding/border/background
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性（CSS3）:content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
定位
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
定位：将盒子定在某一个位置，所以定位也是再拜访盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式
定位模式决定元素的定位方式，通过position属性来设置：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
- 相对定位，指元素相对于原来位置；原位置仍然保留，其他盒子不会占有位置，仍以标准流方式对待它；
- 绝对定位，指元素在移动时，相对于它祖先元素；
如果没有祖元素或者祖元素没有定位，则会以浏览器为祖元素；
如果祖先元素有定位，则以最近以及的有定位的祖先元素为参考点移动位置。
绝对定位脱标，不在占用原来标准流的位置 - 子绝父相 ：子盒子用绝对定位，父盒子用相对定位
原因：父级元素需要占有位置，因此是相对定位；子盒子不需要占有位置，则是绝对定位。 - 固定定位： 元素固定于浏览器可视区的位置，主要适用场景：可以在浏览器页面滚动时元素的位置不会改变。
以浏览器的可是窗口位参照点移动元素。
脱离标准流的，其实固定定位也可以看作是一种特殊的绝对定位 - 粘性定位sticky
粘性定位可以被认为是相对定位喝固定定位的混合。
浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
边偏移
四个属性：top\bottom\left\right
相对定位
类{
position:relation;
top:...;
left:...;
}
绝对定位
类{
position:absolate;
}
固定定位
类{
position:fixed;
}
粘性定位
类{
position:sticky;
top:...;
}
定位的叠放顺序
类{
z-index:数值；
}
数值越大，优先级越大
定位拓展
- 绝对定位的盒子居中
绝对定位的盒子不能通过margin:0 auto水平居中的
类{
position:absolute;
left:50%;
margin-left:-50px;//水平居中
top:50%;
margin-top:-50px;//垂直居中
weight:100px;
height:100px;
}
- 绝对定位（固定定位）会完全压住盒子
浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
绝对定位（固定定位）会压住下面标准流所有的内容
元素的显示与隐藏
一、display显示隐藏
二、visibility
三、overflow溢出显示隐藏 有定位的盒子要慎用overflow:hidden 因为会隐藏多余部分
- display 属性用于设置一个元素应如何显示
display:none; 隐藏对象；不保留位置
display:block; 除了转换为块级元素之外，同时还有显示元素的意思 - visibility
visibility:inherit | visible | collapse | hidden
inherit 继承上一个父对象的可见性；
visible：对象可视
hidden: 对象隐藏；注意，隐藏后继续占有原来位置。
collapse: 主要用来隐藏表格的行或列 - overflow溢出
overflow: visible | auto | hidden | scroll
scroll:溢出的部分显示滚动条不溢出的时候也显示滚动条
auto:在需要的时候添加滚动条；不溢出的时候不显示滚动条
精灵图
主要针对于背景图片使用，把多个小背景图片整合到一张大图片中；
使用中移动背景图片的位置，此时使用background-position
移动的距离就是这个目标图片的x和y 坐标，注意网页中的坐标有所不同
缺点：
- 图片文件较大；
- 图片本身放大、缩小会失真
- 图片一旦制作完成更换很复杂；
字体图标
字体图标下载：
阿里字库
制作小三角：
.sanjiao {
position: relative;
width: 200px;
height: 400px;
margin: 20px auto;
background-color: red;
border: 2px solid black;
}
.sanjiao span {
position: absolute;
top: -12px;
right: 10px;
//下面四个值一定注意都为零
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 5px solid transparent;//transparent指透明色
border-bottom-color: green;
}
<div class="sanjiao">
<span></span>
</div>
界面样式
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
- vertical-align实现行内块级元素和文字对其
- 鼠标样式cursor
li{cursor:default | pointer | move | text | not-allowed}
- 表单轮廓
input{
outline:none;
border-style:none;
}
3.防止表单拖拽
input{
resize:none;
}
- vertical-algin
图片和文字的对齐方式，对行元素或者行内块元素有用
img{
vitical-algin:top | middle | baseline | bottom
}
- 溢出文字使用省略号
单行文本满足：
1.强行文字在一行内显示
white-space:nowrap (强制一行) | normal (自动换行);
2.超出部分隐藏
overflow:hidden;
3.文字用省略号代替超出部分
text-overflow:ellipsis;
多行文本溢出：存在兼容性问题，适合于webKit浏览器或者移动端使用
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或者检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient：vertical;
- 文字围绕浮动
HTML5
- 语义化标签
<header>头部
<nav>导航
<article>内容
<section>定义文档某个区域
<aside>侧边栏
<footer>尾部
- 多媒体标签
<video src='' controls='controls'></video>
<audio>
- 表单input新增类型
<input type=''>
type='email' 限制用户输入必须为Email类型
type='url'
type='date'日期
type='time'时间
type='month'
type='week'
type='number'
type='tel'手机号
type='search'搜索框
type='color'生成一个颜色选择器
- 所有的input标签要在table表单域中实现
<form action=''>
<input type=''>
<input type='submit'>
</form>
- 表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 内容不能为空，必填 |
| placeholder | 提示文本 | 表单提示信息，存在默认值将不显示 |
| autufocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 显示历史填写内容 |
| mutiple | multiple | 可以多选文件提交 |
结构伪类选择器
| 名称 | 作用 |
|---|---|
| E:first-child | 第一个子类 |
| E:last-child | 最后一个子类 |
| E:nth-child(n) | 第n个子类，其中n可以是数字，也可以是关键字（关键字：even偶数；odd奇数）和公式（2n,2n+1,5n,n+3…） |
| E:first-of-type | |
| E:last-of-tye | |
| E:nth-of-tyoe(n) | 指定E选择器下的第n个 |
伪元素选择器
| 名称 | 简介 |
|---|---|
| ::before | 在元素内部得前面插入内容 |
| ::after | 在元素内部得后面插入内容 |
注意:
- brfore和after创建一个元素，但是属于行内元素
- 新创建得这个元素在文档树中是找不到得，所以成为伪元素
- 语法：element::before{}
- before和after必须有content属性
- before在父元素内容得前面创建元素，after在父元素内容得后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
CSS3
- 盒子模型
通过Box-sizing属性来指定盒模型，有两个值：
- box-sizing:content-box 盒子大小为width+padding+border(默认)
- box-sizing:border-box盒子大小为width
border-box会使盒子最终大小为设置的width值大小。
- 图片变模糊
选择器{
fliter:blur(5px) | contrast(200%) | grayscale(80%) | hue-rotate(90deg) | grop-shadow(16px 16px 20px red) invert(75%)
}
- 过渡
transition指：从一个状态渐渐的过渡到另外一个状态；搭配:hover一起使用。
transition: 过渡属性 花费时间 运动曲线 何时开始；
属性：想要变化的属性，width\height backgroundcolor border all
时间：
曲线：默认ease：逐渐慢 、Linear匀速、ease-in加速、ease-out减速、ease-in-out先加速后减速
开始：时间单位
CSS使用小技巧
文字行内居中
设置文字的行高为行元素的行高
a {
width: 243px;
background-color: grey;
display: block;
height: 50px;行元素高度
text-decoration: none;
text-align: left;
font-size: 14px;
color: #fff;
text-indent: 2em;
line-height: 50px;文字行高
}
列表去掉小圆点
li{
list-style:none;
}
2D–translate
transform可以实现元的位移、旋转、缩放等效果
- 位移
transform: translate(x,y)
transform:translateX(n)
transform:translateY(n)
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 旋转
tansform:rotate(度数deg)
- 缩放
transform:scale(x,y)
- 转换中心点 transform-origin
transform-origin:x y;#注意XY之间是空格
动画
设置动画两步：
- 设置动画
1.@keyframes 动画名{
0%{
}
100%{
}
}
2. @keyframes 动画名{
from{
}
to{
}
}
3. @keyframes 动画名{
0%{
}
100%{
}
}
- 使用动画
类{
animation-name:动画名;
animation-duration:时间;
}
动画中常见属性
animation-name:;
animation-duration:;
animation-timing-function:;规定动画的速度曲线，默认是ease;
animation--delay:;规定动画何时开始，默认是0；
animation-iteration-count:;规定动画被播放的次数，默认是1，还有infinite;
animation-direction:;规定动画是否在下一个周期逆向播放，默认是normal,alternate逆播放
animation-play-state:;规定动画是否正在运行或暂停，默认是running,还有pause
animation-fill-mode:;规定动画结束后状态，保持forwards回到起始backwards
