作用：实现页面布局
页面由许多标记符号组成
由浏览器解释执行
!(英文状态)+tab
html：4s+tab
html:5+tab
在html页面中用尖括号括起来的叫做标签（标记符号）
双标签：成对出现的标签。html body
单标签：只存在一个标签。img meta
作用：告知浏览器解析本文档的 规范，它不是一个标签
ctrl+/
代码失效
注释说明
img+tab键
src图片路径
alt加载失败
title 图片主题
a+tab键 实现页面跳转
? -self在本窗口打开
? -blank跳转窗口
a标签不能嵌套a
去掉a标签的样式
text-decoration:none;
border: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline: none;
作用：用来写页面样式的（字体大小，颜色，图片大小，图片位置）
由浏览器解释执行的
选择器{
属性；属性值
}
关键字表示（black）
十六进制表示0-9，a-f #000000黑；#ffffff白
rgb模式 rgb(255,0,0)
rgba透明度：rgba(0,0,0,0.5) a代表透明度 0-1
opacity:0—1之间的属性
区别：rgba只是当前元素透明，opacity当前元素和子元素一起透明
宽width
高：height
背景色：backgroud
圆角：border-radius50%（圆）20%圆角
字体大小：fort-size
字体颜色：color:rgb(0,0,0)
字体：font-famliy:‘楷体‘；
字体加粗：font-weight:bold 100—900的整百数
文本水平居中：text-align:center
文本垂直居中：line-height:200(line-height值与height相同)
去掉加粗font-weight:normal
字体倾斜：font-style:italic; 不倾斜font-style:normal
内容
内填充（padding）
表示内容到边框的距离
问题：添加padding盒子会变大，宽高减去相应的值 box-sizing:border-box(自定义盒模型)将边框也量在内
//分别设置：
padding-top:10px; //上填充
padding-bottom:10px; //下填充
padding-left:10px; //左填充
padding-right:10px; //右填充
//简写
padding:10px; //四个方向
padding：10px 20px； 上下 左右
padding：10px 20px 30px；上 左右 下
padding：10px 20px 30px 40px；上 右 下 左 （顺时）
?
边框（border）：
border:1px solid #000000; //四个方向
粗细 样式 颜色
实线 solid
虚线 dashed
border-top:1px solid #000000; 上边框
border-left:1px solid #000000; 左边框
border-right:1px solid #000000; 右边框
border-bottom:1px solid #000000; 下边框
border:none; 边框消失
外边距（margin）
代表盒子与盒子之间的距离
分别设置：margin-top margin-bottom margin-left margin-right
简写：同内填充一致
margin:0 auto;使块标签水平居中 （盒子）
margin-top的BUG：
产生条件：子元素是父元素的第一个子元素
? 父元素没有边框
? 父元素没有浮动
? 父元素没有填充
? 子元素没有浮动
解决方式：
给父元素加overflow:hidden
用父元素的padding-top模拟子元素的margin-top
margin可以设置负值，padding不能设置负值
行内标签只能设置左右间距，不能设置上下间距
去掉浏览器默认样式*{
? margin:0
? padding:0
? }
list-style：none 去掉列表标签的修饰 点点
text-decoration:none; 去掉a标签的下划线
：hover 鼠标移入
<；小于号 >；大于号 ×； x ©；版权符号  ；空格
块标签：div 能设置宽高，能独占一行 h1~h6 p ul li ol header
行内标签：a 不能设置宽高，不能独占一行，大小由内容决定 span 倾斜i 加粗b em strong
行内块标签：img 能设置 宽高，不能独占一行 input meta audio video
display:block转换为块标签
display:line转换为行内标签
display:inline-block转换为行内块标签
作用：选中页面中的元素
基础选择器：
标签选择器：css：标签名
类名选择器：html：class=“box” css：.box
id选择器：html：id：“box” css：#box id名唯一
通用选择器：*选中页面中所有的标签
后代选择器：css：父元素（空格）子元素 子元素是标签名不用
群组选择器：选择器，选择器，选择器
交叉选择器：多个选择器共同选中一个元素 选择器选择器
伪类选择器： 操作真实的DOM元素
? :frst-child第一个 :last-child最后一个 :nth-child（n）元素的位置
? :nth-child（odd）奇数 :nth-child（enen）偶数
? nth-last-child(n) 倒数第几个
? ：first-of-type第一个 :nth-of-style :last-of -type 最后一个 "关心元素"
? ：hover 鼠标移入
? ：focus获取焦点
伪元素选择器： 操作非真实的DOM元素
? 选择器：first-letter 选中第一个字
选择器：first-line 选中第一行
选择器：before 在元素内添加第一个子元素 （定位写）
选择器：after 在元素内添加最后一个子元素
id>类名>标签>通用
100 10 1
input[type=‘text‘] tagName[attr=value]
div>img 选中直接子元素
+相邻的兄弟元素
~同级所有的兄弟元素
何时用：元素横排
分类：float:left float:right
浮动的元素会脱离文档流（元素会按照从上到下，从左到右进行排布）
? 问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素的高度
? 解决：父元素能设置高度的要设置高度
? 父元素添加overflow:hidden
? 用clear:both 清除浮动
? 父元素：before{
? content：“ ”；
? display：block；
? }
父元素：after{
? content：“ ”；
? display：block；
? clear：both；
? }
1、父元素添加position:relative；
2、子元素添加position:absolute;
3调整位置top bottom left right
垂直居中：
top:0;
bottom:0;
margin-top:auto;
margint-bottom:auto;
水平居中：
left:0;
right:0;
margin-left:auto;
margin-right:auto;
position：fixed
调整位置 top、bottom、left、right
调整层级z-index
background:url(图片路径) no-repeat(禁止重复) center（图片位置）
图片路径：
需要返回上一级 ../
禁止重复
图片位置：水平：left center right
垂直：top center bottom
图片精灵：均为负值
外部引入方式 link标签
嵌入式 html页面中的style
行内样式 style样式
一个css文件引入另一个css文件 @import （base.css）
优先级：行内样式优先级最高，外部样式和嵌入式的优先级距元素的位置决定
平移
transform:translateX(40px); //水平方向 正：右； 负：左
transform：translateY（40px）； //垂直方向 正：下 负： 上
transform:translate(40px,-40px); //水平垂直方向
缩放（倍数）
transform:scale(2,1.2); //水平垂直
transform:scaleX(2); //水平方向
旋转（角度deg）
transform:rotate(180deg);
斜切（角度deg）
transform：skewX（180deg）； 水平方向
transform：skew（45deg，45deg）；
对运动过程的控制，运动时间，运动方式
transition:all 2s 1s linear;
? all:运动属性
? 2s：运动时间
? 1s：延时
? linear：运动方式
box-shadow:10px 10px 20px 10px rgba(0,0,0,0.5)
第一个参数：水平偏移量 正：右 负：左 0左右
第二个参数：垂直偏移量 正：下 负：上 0上下
第三个参数：模糊程度，值越大越模糊
第四个参数：阴影大小，3000px
第五个参数：阴影颜色
文本换行
word-break:break-all; 非中日韩自动换行
单行文本溢出
white-space:nowrap 文本禁止换行
overflow:hidden; 超出部分隐藏
text-overflow:ellipsis 文本隐藏方式 省略号隐藏
多行文本溢出
display:-webkit-box; 指定为弹性模型
-webkit-box-orient:vertical 排布方式垂直
-webkit-line-clamp:3 指定行数
line-height:70px; 与height的倍数关系
修改视口（物理像素980 改为逻辑)
<meta name="viewport" content="width=device-width">
引入rem.js
<script src="js/rem.js"</script>
修改设计稿宽度
将一个css文件引入另一个css文件：@import url （base.css）
background-image:linear-gradient(top,red,yellow)
第一个参数：渐变开始的方向 top left right bottom 30deg
第二个参数：渐变开始的颜色
第三个参数：渐变结束的颜色
浏览器内核：-webkit谷歌 -moz火狐 -ms IE浏览器 o 欧鹏
1、输入框
<input type="text" placeholde="请输入用户名" class="user" name="username" maxlenth="10"规定输入最大字符数 autofoucs(自动获取焦点)>
outline:none; 去外边线 padding-left:10px; text-indent:1em 缩进
2、密码框s
密码<input type="password" placeholde="请输入用户名" class="user" name="username" maxlenth="10"规定输入最大字符数> <br>
3、单选按钮（相同的name值）
请选择您的性别 男：<input="radio" name="sex" id="man" checked(默认选中)>
? 女：<input="radio" name="sex">
点文字选中
<lable for="man
<input="radio" name="sex" id="man" checked(默认选中)>
lable> lable自动聚焦标签
4、复选按钮
<input type="checkbox">
<p> 可嵌套标签，不能嵌套块标签
<pre>和编辑器中的预先定义好的一致
ul无序列表 disc实心圆 circle空心 square方形
ol有序列表
父元素叫做容器，子元素叫做项目
父元素添加display：flex；属性，项目的float、clear、vertical-align 属性失效
主轴默认水平方向，从左到右， 交叉轴默认垂直方向从上到下
1、flex-direction决定主轴的方向
row：主轴水平方向，从左到右
row-reverse：主轴水平方向，从右到左
column：主轴垂直方向，从上到下
column-reverse：主轴垂直方向，从下到上
2、flex-wrap 决定项目的换行
wrap：项目换行
nowrap：项目不换行
warp-reverse：项目换行且反向
3、justify-content决定项目在主轴方向的对齐方式
flex-start:主轴的起点
flex-end:主轴的终点
center：主轴的中心
space-between:俩端对齐
space-around:项目两侧距离相等
4、align-items决定项目在交叉轴方向的对齐方式。适用于一根轴或多根轴，
flex-start：交叉轴的起点
flex-end：交叉轴的终点
center：交叉轴中心
baseline：基于文字底部对齐
5、align-content 决定项目在交叉轴方向的对齐方式。只适用于多根轴线
flex-start：交叉轴的起点
flex-end：交叉轴的终点
center：交叉轴中心
space-between:两端对齐
space-around:项目两侧距离相等
order:定义项目的排列顺序，数值越小越靠前，默认值为0，可以识别负值。
flex-gorw：定义项目的放大比例，默认为0，存在剩余空间也不放大，如果值为1，该项目会等分剩余空间
flex-shrink：项目的缩小比例，默认值为1，空间不足，项目缩小，值为0，即使空间不足项目也不缩小
flex-basis：定义项目占据主轴的空间
align-self：定义单个项目在交叉轴上的对齐方式
flex-start：交叉轴的起点
flex-end：交叉轴的终点
center：交叉轴中心
1、定义动画
@keyframes 动画名称{
0%{
background:red; 属性名；属性值
}
20%{
}
100%{
属性名；属性值
}
}
2、绑定
animation:color 2s 1s linear infinite forwards
动画名称 持续时间 延时 运动方式 次数 保留结束时的状态
@font-face：阿里巴巴矢量图标库（彩色icon）
一个页面可以适应各个终端，而不需要为每个终端写不同的页面
节省资源
存在代码冗余
媒体查询
@media screen and (min-width:1200px){
选择器{
属性：属性值；
}
}
快速开发响应式页面
预定义类：将屏幕平均分成12份
内宽：.container
宽度通屏：.container-fliud
行：.row
列：.col-
? .col-lg-n(大屏幕)
? .col-md-n（中屏幕）
? .col-sm-n（小屏幕）
? .col-xs-n（超小屏幕）
照片:
<input type="file">
请选择你的学历：
<select name="" id=""> <option value=" ">学士</option> <option value=" ">硕士</option> <option value=" ">博士</option> </select>
文本域：
<textarea name=" " id=" " cols="30"宽 row="10"高 placeholer="请留言"></textarea><br>
是否允许用户缩放：
resize:none; 禁止缩放
resize：vertical;垂直缩放
resize:horizontal;水平缩放
resize:both;水平垂直缩放
按钮
<button>自定义按钮</button>
提交
<input type="submit">
自定义按钮
<input type="button" value="搜索">
<from action="index.php" method="post"> action:提交的位置 method：提交的放式 get:提交信息出现在地址栏 post：不出现在地址栏
色板：<input type="color"><br>
时间日期：年月<input type="month"><br>
年周<input type="week"><br>
时间<input type="time"><br>
年月日时分<input type="datetime-local"><br>
email:<input type="emaiil"><br>
tel:<input type="tel"><br>
音频标签：<audio src="1.mp4" controls loop autoplay></audio>
controls 控件向用户显示 loop 循环 autoplay自动播放
视频标签：<video src="1.mp4" controls loop></video>
画布标签：canvas style=" " width="30" height="30"></canvas>
框选标签：<fieldset>
标题<legend>基本信息</legend>
要框选的内容
</fieldset>
perspective:1000px;景深 transform-style:preserve-3d
box-sizing:border-box; 将边框量在内
em当前像素的倍率 rem.js适配不同终端
原文：https://www.cnblogs.com/yxjai/p/10426351.html