前端html+CSS学习重点
常犯点/易错点
1.！！如果发现代码没有出现我们想要的效果，先自身检查是不是这些问题导致得（多用调试）
1.控制playholder里面的样式用标签：：playholder{}
2.调节图片垂直对齐方式：vertical-align: middle;
3.如果浮动上不去，注意宽度是不是不够
-
4. learfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; }
5.如果样式不生效，自己再重新用类名写过试试
6.如果两行内容位置不一样，看下是不是没有设置内外边距为0
7.p里面文字不靠边，注意设置 text-align对齐方式
8.页面里面ul设置 float-right,那么里面的li要设置float-left
9.如果行内块和行内文字无法通过 vertical-align或行高对齐，那就只能通过定位实现
10.如果浮动上去不能贴齐父盒子，那就检查下上一层的东西
11.如果标签没有生效，注意检查是否哪里的代码空格敲多了！！！！！
还有注意标点符号是不是英文的！！！！
12.上一行的代码出错，下一行的代码就显示不出来
- 看到内容与边框有距离，注意是在div设置padding，注意内容上下左右是否都有内边距
小图片可以用背景图片！！！！！注意区分
用：：before里面放背景图片，如果显不出来，必须要设置宽高
2.写项目前得准备工作（很重要）
1.准备文件夹写项目的名称：里面放项目的images、.css、.html,必须都写英文
2.头部写
版心：wrapper（看里面的内容是否都是版心居中）3.插入外联： link rel="stylesheet" href="
4.先放常用的样式，清楚浮动。清楚内外边距 清楚链接的下划线 清楚盒子撑开的自动计算方式
中文网站
<html lang="zh-CN">
<head>
-charset="UTF-8" 规定网页的字符编码
<meta charset="UTF-8">
ie(兼容性差) / edge
<meta http-equiv="X-UA-Compatible" content="IE=edge">
宽度 = 设备宽度 : 移动端网页的时候要用
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
< meta:desc 描述 -->
<meta name="description" content="京东JD.COM-">
< meta:kw 关键词-->
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
< link:favicon : 浏览器标题栏图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"
3.常用快捷键，需记
< ctrl+D向左复制 -->
< alt+shift+向下键 向下复制 -->
< ctrl+/ 注释快捷键 -->
< 快捷键：标签*3，可以快速生成几个标签-->
< 标签*3,可以生成有顺序的标签 a[heft="#"]{}*5-->
< 标签{内容}+标签{内容}可快速生成几个标签-->
< 父级标签>标签 如ul>l-->
< alt+shift+箭头上 多光标（同时复制多行） -->
第一节
标签
1.< 排版标签 br=换行 hr=水平分割线 p是段落标签 h是标题标签-->
2.< 文本格式化标签 加粗：b/strong 下划线：u/ins 删除线：s/del 倾斜线：i/em -->
3.< 媒体标签 图片：<img src="" alt(替换文本) ="" title(提示文本)=""-->
路径
4.< 绝对路径：网址或是图片在盘里的位置
相对路径： 同级目录 <img src="./图片"
下级目录--<img src=./同级文件/目标图片
上级目录：../上几级就写几个../ -->
5.< 音频标签 <aduio src="" controls(显示音频的控件） autoplay（自动播放） loop(循环播放)
视频标签<video src="" controls(显示音频的控件） autoplay（自动播放）可加muted静音播放 loop(循环播放)-->
6.< 链接标签 <a href="内部/外部的地址/未知时写# target(链接的打开方式)="_self/_blank">需要点击的文字 -->
第二节
列表
< 无序列表
- 里面可以包含任何东西
< 有序列表
- 里面可以包含任何东西
< 自定义列表
表格
< table表格 caption表格标题 tr行 th表格第一行单元格 td单元格 -->
< 表格属性 border边框 align水平对齐方式 -->
< 表格结构标签 thead表格头部 tbody表格主体 tfoot表格底部-->
< 合并单元格 rowspan跨行合并 colspan跨列合并 -->
表单
< 表单form input type=text文本 radio单选框 password密码框 checkbox多选框 file上传文件 submit提交 button一个按钮 reset重置 -->
< placeholder占位符，提示用户框里要输入什么 -->
< name有相同的name，选项只能选其中一项 name的作用，告诉后台提交的是什么数据-->
< value 给属性赋予名字 -->
< checked 默认选中哪项 -->
< multiple 上传多个文件 -->
< action 表单提交的地址 -->
< button可单独作为标签使用 -->
< select下拉菜单 selected 下拉菜单的默认选项 -->
< row行 col列 -->
< textarea文本域 -->
< labele标签 点击文本也能让按钮生效 有两种方法-->
< div 大盒子，独占一行 span小盒子，并排效果 -->
< 空格 > 大于号 < 小于号-->
第三节
< css得插入方式：内嵌式（小项目）、外联式（大项目）需要另外新建.css的文件， 在原html文件里面写 、行内式 -->
选择器
< 选择器得种类：标签选择器（直接在style写上标签得名字）、
类选择器（在标签里面要加class="随便起名"在style写上（.随便起名）class里面可以放多个，要用空格隔开）、
id选择器在标签里面要加id="随便起名"在style写上（#随便起名））
通配符选择器 *可以直接让所以的内容统一，一般用来清除内外边距 margin内边距 padding外边距 -->
字体
< 字体大小 font-size:80px;必须加单位--
字体粗细 font-weight：400;正常700粗，不用单位
字体样式 font-style:normal;正常 itial;倾斜
字体家族：font-family:微软雅黑，黑体，sans-serif(无衬线字体)/如果没有当前字体，就顺延下一个，字体之间要用，隔开 -->
文本
< 文本缩进 texe-indent:2em
文本对齐 text-align:left 可适用于：文本、span a input img
文本修饰 text-decoration:line-through underline overline none-->
< 行高 line-height:50px或者1.5（指的倍数，不用加单位） -->
< margin: 0(上间距) auto -->
< font:style weight size/line-height family -->
第四节
选择器
后代选择器 父级标签 后代标签{} div p{}
子代选择器 父级标签>后代标签 div>p{}
并集选择器 各种标签用逗号隔开 span,p,div{}
交集选择器 各种标签连着写不要有空格 div.nav#text{}
伪类选择器 如鼠标放置的各种状态 任何标签都可以设置伪类 div:hover
背景
背景颜色 background-color: #fff;
背景图片 background-image: url("");括号里面最好加双引号
背景平铺 background-repeat: no-repeat;
背景位置 background-position: 0 0;-- 按照颜色、图片、平铺、位置写
background: #000 url("../01-案例/images/car.jpg") no-repeat center center;
图片与背景图片的区别：图片不需要设置宽高，但是背景图片一定要给盒子设置宽高
元素分类
<块级元素 1.独占一行2.默认跟父级的宽度一样3.可以设置宽高
例如：div p ul li dd dt form
行内元素 例如：span 行内元素空间不够时会自动换行
行内块元素：例如：input button
相互转换：display: inline/inline-block;/block
文本 行内/行内块要设置水平居中，直接在这些的父盒子设置-->
< 继承性：只能继承父级的部分文字属性 -->
第五节
优先级
< ！important>>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承 -->
< 权重叠加计算：复合选择器中：第一级（行那样式的个数），第二级（id选择器的个数），第三级（类选择器的个数），第四级（标签选择器的个数） 先比较第一级数字，如果相同就往后推对比/当权重优先级一样时，得看层叠性，谁在后面按后面得为准-->
边框
< 边框 border：1px solid实线(dashed虚线/dotted点线) 颜色 -->
<边框的上下左右 border-top/bottom/left/right -->
C3盒
< 盒子的实际大小：内容+边框+内边距组成 -->
< 内边距的写法顺序：上、右、下、左/padding:10px 20px 30px 40px;
padding会撑大盒子，但不会改变内容-->
< 自动内减的公式，可以保证盒子不会被撑大：box-sizing: border-box; -->
< 外边距的写法顺序：上、右、下、左/padding:10px 20px 30px 40px; -->
< 外边距合并：两个兄弟盒子，垂直外边距谁大的用谁的 -->
< 外边距塌陷问题（给后代的盒子设置外边距，但是父盒子跟着一起变化的
情况） 解决方案：1、给 父元素设置：border-top或者padding-top(分隔父 子元素的margin-top)
2、给父元素设置overflow:hidden -->
< 行内元素垂直内外边距不生效时，需要设置行高：line-height -->
第六节
伪类选择器
< 结构伪类选择器：li:first-child/ last-child/nth-child/
nth-last-child 偶数：2n/ even 技术：2n+1/2n-1/odd -n+5找到前五个 n+5找到第五个往后-->
< 伪元素 :是行内元素，必须属性是'content'
ul::before{
content: '';里面还可以设置颜色，字体大小等}
::after 同时 -->
浮动
<浮动 float: left; -->
css书写顺序
< css书写顺序：1.定位、浮动/display
2.盒子模型：margin border padding 宽高背景色
3.文字样式-->
清楚浮动方法
1.< 清楚浮动 1.在父盒子的内容的外后一行添加
.txet{clear:both}-
单伪元素清楚浮动
2. .one::after{ display: block; content: ''; clear: both; 为了兼容性 height: 0; visibility: hidden;
3.双伪元素清楚浮动
.one::before,
.one::after{
display: table;
content: '';}
.one::after{
clear: both;}
4.给父级添加 overflow: hidden;-->
第八节
定位
< 定位 :position: fixed固定 static静态
absolute绝对; 相对于有定位设置得父元素或是浏览器移动，会脱标不占位置
relative相对 相对自己原来得位置移动，仍然占有原来得位置
子绝父相 父级（爸爸爷爷都可以，选最近得有定位得那个）用相对，子级用绝对-->
<绝对定位后得盒子居中方法
.box {
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* margin: 0 auto; */
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
/* margin-left: -150px; */
top: 50%;
/* margin-top: -150px; */
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: pink;
}
< /*
默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效*/ -->
< /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
解决方法：
/* vertical-align: middle; */ -->
鼠标类型
< /* 手型 */
/* cursor: pointer; */
/* 工字型, 表示可以复制 */
/* cursor: text; */
/* 十字型, 表示可以移动 */
cursor: move; -->
边框形状
< 给边框设置弧度： border-radius: 30px; -->
< 圆形边框 原边框必须是正方形 /* border-radius: 100px; */
/* 50% : 取盒子尺寸的一半 */ -->
< /* 胶囊状: 长方形, border-radius取值是高度的一半 */ -->
overflow
< /* 溢出隐藏 清除浮动*/
overflow: hidden;
/* 滚动: 无论内容是否超出都显示滚动条的位置 */
/* overflow: scroll; */
/* auto: 根据内容是否超出, 判断是否显示滚动条 */
/* overflow: auto; */ -->
< /* 占位隐藏 */
/* visibility: hidden; */
/* **** 不占位隐藏 */
display: none; -->
< opacity,会让整个标签都跟着一起变透明，取值0-1之间 -->
< 让表格得边框合并，并且一定要加在table 里面
border-collapse: collapse; -->
< /* 三角形
\1. 书写一个盒子
\2. 盒子添加四个方向的border, 颜色设置不同
\3. 保留其中一个方向的border, 其他方向颜色是transparent（透明）
*/ -->
< 伪类选择器 /* 获得焦点的状态 */
/* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
input:focus {
background-color: pink;} -->
< 可以直接通过属性来写css
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
表示已password开头得都选肿
input[type^="password"] {
background-color: skyblue;
}
-->
<图片的垂直方式 /
img {
/* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
/* vertical-align: middle;top/left/right */
display: block;
}-->
第九节
精灵图
< 精灵图的标签都用行内标签 都放在背景图片里面 span, b, i
background-image: url(./images/taobao.png);
/* 背景图位置属性: 改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要向左侧移动图片, 位置取负数; */
background-position: -3px 0; -->
< 可以用font-size:0 或是标签一排放来解决行内或是行内块之前的距离 -->
< 背景图片缩放/* background-size: 300px; */
/* background-size: 50%; */
/* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
background-size: contain;
/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
/* background-size: cover; */
/* 工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */ -->
盒子阴影
< 盒子阴影-- box-shadow: 5px 10px 20px 10px green inset;
x方向 y方向 模糊程度 阴影扩大 内阴影
/* 注意: 外阴影, 不能添加outset, 添加了会导致属性报错 */ -->
< /* 过渡配合hover使用, 谁变化谁加过渡属性 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200, 悬停的时候宽度600, 花费1秒钟 */
/* transition: width 1s, background-color 2s; */
/* 如果变化的属性多, 直接写all,表示所有 */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color: red;}
