华清远见HTML+css总结
目录
1.html的内容
1.html的标签和属性
标签 ：html文档中，由 <>包裹起来的对象，html中大多数的标签，都具备某种特殊的语义！
利用标签的语义化，简单来说，用正确的标签做正确的事！标签大部分是成对出现的，
比如：
等等 这些就称作为html文档中的标签
标签也通常被称为元素！比如 head元素 body元素 都是可以的
属性：属性就是标签中所额外向浏览器提供的额外的数据！相关的信息！
标签是具备语义化的，通过标签名可以大致的了解道该标签在作用或者相对应的语义!但是两个相同的标签之间，可能所携带的属性信息是不同的！通过标签的属性值的变化，向外部展示的信息是有所不同的！
属性的构成：总是以 属性名 = '属性值' 这种形式出现。并且总是在标签的开始部分出现
<开始部分 属性名='属性值'>内容部分（被嵌套的子标签）<结束部分>
一个标签可以同时具备多个属性值，如果存在多个属性值，属性名之间使用空格分隔
标签属性的分类：
- 全局属性： 全局属性就是任何标签都能使用的属性，称为全局属性！
常见的全局属性： class 、 hidden 、 id 、 style 、 title等
- 特定属性（私有属性）: 特定属性就是某些特定的标签才具备的属性称为特定属性！
常见的标签
常见的语义化标签：
1. 标题标签 h1-h6
2. 段落标签 p
3. 换行标签 br
4. 水平线标签 hr
5. i斜体标签（iconfont字体图标的容器来使用） i
6. em 标签 斜体字 注重文本的语调加重
7. b标签 粗体字 加粗
8. strong 粗体 强调重要内容
9. blockquote 长引用标签
10. q 短引用
11. sub 文本下角标
12. sup 文本上角标
13. del 删除线
14. ins 插入线
元素的分类
- 行内元素
1.行内元素不会独占一行，会在一行上集中排列，直到该行无法排列为止
2.通常是包裹其他的行内元素以及文本信息
3.不允许设置元素的宽、高，行内元素的宽高由其内容决定！
- 块元素
1.块元素会独占页面的一行排列显示
2.块元素中可以嵌套任何的块元素(p元素除外，p元素不能嵌套其他的块元素！)或者行内元素或者文本信息
3.可以设置元素的宽和高，默认的宽度是其父元素的宽度！
- 行内块元素
1.可以设置宽高
2.不会独占一行
列表标签
1. 有序列表
有序列表在html中的表示是使用ol标签，列表中的每一项是使用li标签来表示
- 铅笔
- 橡皮擦
- 文具盒
2. 无序列表
无序列表在html中的表示是使用ul标签，列表中的每一项是使用li标签来表示
- 铅笔
- 橡皮擦
- 文具盒
注意： ol和ul标签都属于块级元素，并且它们的子项li标签也是块元素
3. 定义列表 （类似于解释型列表）
- hello
- 对其进行解释
- wold
- 对其进行解释
- we
- 对其进行解释
img标签
img标签（图片标签）：利用img标签向文档内引入外部(网络资源/本地资源)的图片资源
img标签是一个单标签（自结束标签）
img标签的属性：
src属性：外部资源的地址路径
alt属性：对图片的描述属性，文字信息的描述，当图片加载不成功时，alt属性才会发生作用
width属性：调整图片的宽度 单位是px 像素单位
height属性： 调整图片的高度 单位是px 像素单位
注意:调整图片的宽度或者高度时，只需要调整其中一个即可，另一个会自适应调整。但是，在正常的开发中我们不会使用width属性和height属性！
超链接
html中使用a标签来定义创建一个超链接
a标签的属性：
href属性：指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以是内部页面的地址
traget属性： 两个值
- _blank:新网页以新窗口的方式打开
- _self: 默认值，新网页在当前窗口中打开
注意：
1.超链接是一个行内元素
2.a标签比较特殊，a标签可以嵌套除它自身以外的任何元素！
路径的分类
路径的分类：
- 绝对路径：任何文件和资源都存在一个绝对路径，通过绝对路径可以让其他任何位置的文件准备的找到！
- 相对路径：以当前文件为中心，进行寻找对应的其他资源和文件！
相对路径的书写方式： / (当前文件所在的根目录) ./(当前文件所在目录路径) ../(当前文件所在的上一级目录路径)
总结：在项目的实际开发中，以相对路径为主！尽可能的不要使用绝对路径访问资源！
注意：以后在开发中，学习中如果发现你的某个文件的资源无法成功的导入到文件中！请先思考是否是路径错误！
CSS选择器分类
基础选择器：
元素选择器：通过元素的标签名进行选择，该方式会选择页面中所以同名的元素
格式： div p span a h1 等都属于元素选择器
id选择器：通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的（类似于人的身份证号）
格式: #id值
类选择器： 通过标签元素的class属性值，来选择同类别的元素！
注意：这里的同类别，不是说 div 和 div是同类别（并不是说标签名相同的才是同类别元素）
同类别是指各元素的class值是相同的！
class值不唯一！
div class=demo
span class=demo
格式： .class值
通配符选择器： 选择页面中所以的元素
格式： *
复合选择器
复合选择器：是由两个或多个基础或其他选择器共同构成的！称为复合选择器！
- 交集选择器: 同时满足多个选择器的元素才能被选中
语法： 选择器1选择器2选择器3 {}
注意：各选择器之间没有任何的符合包括空格
- 并集选择器： 被选择的元素只需要满足其中一种选择器即可被选中！
语法： 选择器1,选择器2,选择器3 {}
注意：各选择器之间是用,逗号进行分隔
关系选择器
子代选择器：
格式： 选择器1>选择器2>选择器3...
注意：子代选择器主要是看直接的父子关系！
后代选择器：
格式： 选择器1 选择器2 选择器3 ...
注意：后代选择器主要是看重祖先和后代元素的关系，（父元素和子元素都是特殊的元素）
总结：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！
子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！
兄弟选择器:
格式：
- 1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素
- 2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素
属性选择器
属性选择器: 通过标签元素自身的某个属性来选择元素的
格式: [属性相关语法]
1. [属性名] 选择所有含有该属性的元素
2. [属性名=属性值] 选择所有含有该属性并且值是指定数据的元素
3. [属性名^=属性值] 选择所有含有该属性并且也指定字符开头的元素
4. [属性名$=属性值] 选择所有含有该属性并且也指定字符结尾的元素
5. [属性名*=属性值] 选择所有含有该属性并且属性值中拥有指定的字符的元素
结构伪类选择器
结构伪类（常用的）：
:first-child 父元素下的第一个子元素
:last-child 父元素下的最后一个子元素
:nth-child() 父元素下的第n各子元素
注意：以上这些伪类都是将父元素下的所有子元素进行排序的！包括不同类型的节点！
:first-of-type 父元素下同类型的子元素进行排序中的第一个子元素
:last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素
:nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素
注意： 以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序
动态伪类主要是和用户的交互相关
常用的动态伪类：
:link 用来表示没有被访问过的超链接(只能用于a标签)
:visited 用来表示已经被访问过的超链接(只能用于a标签)
:hover 表示鼠标移入到某元素内 （用于任何元素）
:active 表示点击某元素 (用于任何元素)
注意：伪类尽可能的不要单独使用！请配合其他的选择器使用
伪元素选择器：
伪元素，是一种假的页面元素！会动态的进行改变！更多是表示页面中一些特殊的位置！
伪元素通常是使用： ::伪元素名
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
注意：以下两个伪元素必须搭配css中的content属性进行使用！
::before 元素的最开始的位置
::after 元素的末尾位置
选择器的优先级
选择器之间的权重值：从低到高
继承的样式 ： 无限低
通配符选择器： 0，0，0，0
元素选择器： 0，0，0，1
类/属性/伪类选择器: 0，0，1，0
id选择器： 0，1，0，0
行内样式(标签的style属性)： 1，0，0，0
!important 无穷大(注意该方式慎用！)
盒模型
盒模型（盒子模块、框模型）：
- css将网页中的所有元素都看作成一个矩形盒子
- 元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到合适的位置！
- 每一矩形盒子都是由以下几个部分组成：
1.内容区 （content） 2.内边距 (padding) 3.边框 （border） 4.外边距 (margin)
边框的宽度： border-width 边框的颜色： border-color 边框的样式： border-style
border-style 边框的样式：
值的情况：
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双实线
- none 无边框（默认值）
元素的溢出
子元素是在父元素的内容区进行排列的 如果子元素的大小超过了父元素，则子元素就会从父元素中溢出
注意：子元素所溢出的部分不会占据文档实际的位置！
处理溢出 通过css的overflow属性处理溢出的子元素部分
可选值：
visible,默认值 子元素从父元素中溢出，在父元素外部的位置显示
hidden，溢出的内容将会被裁剪，不会进行显示
auto 根据溢出的方向生成滚动条，通过滚动条的方式查看子元素所有的内容
外边距折叠
垂直方向的外边距重叠（折叠）： 相邻的垂直方向的外边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的垂直外边距会取两者之间的较大值作为两个元素的外边距
兄弟元素之间的外边距折叠是对开发有利的！不需要过度的去处理！
- 父子元素
- 父子元素间外边距，子元素的外边距会传递给父元素，导致父元素也会更改盒子的位置！
- 父子外边距的折叠是不好的，会影响到页面的布局，必须要进行处理
- 处理方式：
1.给父元素开启BFC空间
- BFC特殊的块级领域！不会影响其他元素！
- overflow：hidden
2.设置父元素的padding
3.设置父元素的border
元素类型的转化
通过css的样式属性，display实现转换
可选值：
inline： 设置为行内元素
block： 设置为块元素
inline-block： 设置行内块元素
table: 设置为表格元素 了解
none： 将元素设置为不显示(是完全不存在于页面，不是简单的隐藏)
对应元素的隐藏设置，可以利用display：none进行切换
还可以visibility属性来设置元素的显示状态
可选值：
- visible 默认值，元素正常显示
- hidden 元素在页面中隐藏 元素不在页面中显示，但是元素依然占据着页面的位置！
盒模型
盒模型，将所有的元素看作为矩形盒子
盒模型组成 = 内容区 + 边框 + 内边距 +外边距
默认情况下，盒子的可见框大小由：内容区 + 边框 + 内边距 共同决定的
w3c规定了两种盒模型：ie盒模型 ，标准盒模型
标准盒模型大小：内容区 + 边框 + 内边距 共同决定的
ie（怪异）盒模型大小：width + height
通过css的box-sizing属性可以改变盒模型的类型！
可选值：
- content-box 默认值，标准盒模型 内容区 + 边框 + 内边距 共同决定的
- border-box width + height决定可见框大小
样式属性
元素的透明度 0-1范围值 0不显示 1不透明
opacity: 1;
元素的轮廓属性 该属性和border类型 使用方式几乎一模一样
outline和border的区别在于，outline不占据页面位置是虚化的，border是实化
/outline: 100px solid black;
元素的阴影效果 4个值 阴影效果不占据页面位置
box-shadow: 0px 0px 10px yellow;
元素的圆角设置
border-radius: 50%;
列表的序号样式设置
list-style: none;
清除超链接的下划线
text-decoration: none;
如何让一个块元素水平居在父元素内
margin: 0 auto 加在自身元素
如何让行内元素水平居中在元素内
text-align: center; 加在父亲或者祖先元素
如何让文本信息垂直居中在元素内
行间距 等于 自身的高度 line-height: 300px ;加在父亲或者祖先元素
浮动属性
使用 float 属性设置元素的浮动情况：
可选值：
none 默认值 元素不浮动
left 元素向左浮动
right 元素向右浮动
浮动属性是我们常用一种布局手段，该方式可以很便捷的将块元素横向摆放！
注意：元素一旦设置了浮动以后，水平布局是非常方便的！但是元素会完全从文档流中脱离！不再占用文档流中的位置！
元素是一种漂浮的状态！其他正常的元素就会自动的补占位置！
浮动元素的特点：
1.浮动元素会完全脱离文档流，不再占据文档流中位置
2.设置浮动以后元素会向其父元素的左侧或右侧移动
3.浮动元素默认情况下是不会脱离父元素的掌控
4.浮动元素向左或向右浮动时，它不会超过它前面的其他浮动元素
5.如果浮动元素的前面是一个没有浮动的块元素，则浮动元素无法上移
解决高度塌陷问题：
1.给父元素设置固定的高度，防止子元素浮动引起的塌陷
2.给父元素开启BFC模块
BFC就是一个特殊的领域！该领域不会受到其他元素的布局影响！
overflow：hidden； 目前来说最优解，影响是最小的对整个文档！
给父元素设置浮动：
float：left； 该方式不建议使用！
清除浮动：clear: both;
.clearfix::after,
.clearfix::before{
content: '';
display: table;
clear: both;定位
定位（position):
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
通过css中的position属性来设置定位
属性的可选值：
- static 默认值 元素是静止的没有开启定位的模式
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位 （了解，不常用）
- sticky 开启元素的粘滞定位 （了解，不常用）
元素开启了定位后，还需要设置定位的偏移量！如果不设置偏移量元素不会移动的
利用css的4个偏移量属性是设置元素的偏移量！
- top 定位元素和基准点上方向的距离
- left 定位元素和基准点左方向的距离
- right 定位元素和基准点右方向的距离
- bottom 定位元素和基准点下方向的距离
注意：一般情况下并不需要同时设置四个！通过两个即可！
相对定位元素的特点：
1.元素开启了相对定位后，如果不设置偏移量元素是不会发生任何变化的
2.相对定位是参照于元素在文档流中的位置进行定位的 （参照自身原本的位置，为基准）
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内还是行内，
绝对定位
- 当元素的position属性值设置为absolute就为元素开启了绝对定位
- 绝对定位元素的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，（脱离文档流的元素）
4.绝对定位会让元素提升层级
5.绝对定位元素是相对于其最近的开启了定位的包含块来定位的
口诀：‘子绝父相’
绝对定位找的包含块： 离它最近的开启了定位的祖先元素，作为它的包含块，并以它的位置为基准进行定位！如果它在找的过程中一直没有找到符合条件的包含块，那么它就会以html作为它的参照点来进行定位！
固定定位：
- 将元素的position值设置为fixed则开启了固定定位
- 固定定位也是一种特殊的绝对定位，所有固定定位的特点基本上和绝对定位的特点的一致！
注意：唯一不同是固定定位永远参照于浏览器的视口进行定位
粘滞定位:
- position设置为 sticky开启粘滞定位
- 粘滞定位和相对定位的特点基本一致
- 不同点是粘滞定位可以在元素到达某个位置时将其固定
z-index属性只能用于开启了定位的元素
元素背景相关属性
1. 设置元素的背景颜色 bg-color
background-color: red;2.设置元素背景图片 bg-image
background-image: url('./OIP-C.png');背景图片的设置，与元素大小有关
- 如果背景图片小于元素，则背景图片会自动在元素中平铺并且将元素填满
- 如果背景图片大于元素，将会一个部分背景在元素显示
- 背景图与元素大小一致，正好就显示背景图！
3.图片的背景重复方式的设置 bg-repeat
可选值：
1. repeat 默认值，背景会沿着元素x轴y轴双方向重复
2. repeat-x x轴方向重复
3. repeat-y y轴方向重复
4. no-repeat 背景图片不重复
4.图片的位置设置 bg-positon x，y
图片位置的指定两种方式：
- 具体的坐标值
- 方位词 top left right....
background-position: top center;5.设置背景展示的范围 bg-clip
可选值：
- border-box 默认值 背景在边框的下方
- padding-box 背景不会在边框，只出现在内容区和内边距
- content-box
background-clip: content-box;6.背景图片的大小设置 bg-size
注意：背景图片的大小设置，一般只设置一个值另一个值自适应！防止破坏图片比例！
- cover 之间将元素铺满，比例不变
- contain 铺满元素，但是通过单向设置图片的大小，保证图片比例不变情况下
background-size: contain;表格
H5中一个标准的表格组成:
头部 thead 主体 tbody 底部 tfoot
th 表示头部 thead中的单元格 td 表示除头部外的单元格内容 tr 表示行
1
1
1
1
1
1
1
1
1
1
表格的合并
单元格合并操作
1
1
1
1
1
1
1
1
表单
html中使用form标签来创建一个表单!
form的属性:
action 表单要提交的服务器地址 ,填写服务器的地址!
表单的控件元素: input(输入型的控件 根据该控件的type值的不同!所展示的控件形态也不同!)
input:
- type属性:
常见的type属性(常用的):
- text 文本输入框
- password 密码输入框
- radio 单选框
- checkbox 多选框
- button 普通按钮控件
- submit 提交按钮控件
- reset 重置按钮控件
- name属性
注意:数据要想提交给服务器,那么每一个表单控件都应该指定一个name属性值
- value属性
value属性是与name属性进行搭配使用, 一个表单控件 必须存在 name和value
name和value就会构成一种数据格式: name=value
- placeholder属性 用于输入框的提示描述
- disabled 禁用控件 并且数据不能提交给服务器
- readonly 只读控件 数据不能修改但是可以提交给服务器
- 其他的表单控件
按钮 button
下拉列表 select
下拉项 option
- label 标签,该标签的作用是用于绑定输入控件! 利用for属性绑定控件的id值
计算属性
/* 先往右侧移动200px,然后再往左侧移动100px */
/* 50%-100px */
/* calc是计算属性,专门用于参数值的计算,里面合法的运算符 + - * / */
/* 计算属性中,运算符的左右两侧必须有空格 */
left: calc(50% - 100px);
轮播图
/* 为该元素设置动画帧 */
/* 动画帧的名字 move */
/* 动画整体持续的事件 5s */
/* 动画整体播放的速度是匀速播放 linear */
/* 动画重复播放 infinite*/
animation: move 5s linear infinite;
/* 创建了一段动画帧 */
@keyframes move {
from {
margin-left: 0px;
}
to{
margin-left: 500px;
}
}
弹性盒
flex (弹性盒)：
- 是css中的又一种高级的布局手段，它主要用来替代浮动的！
- flex可以使得元素具有弹性！让元素可以跟随页面发送变化！
- 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒
- 利用css的属性 display 开启
display:flex 将元素设置为块级弹性容器
display：inline-flex 将元素设置为行内块的弹性容器
- 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！
元素一旦开启了flex布局，那么该容器就自动生成两个轴线！
分别是主轴和侧轴
- 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右
- 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下
注意：弹性元素，就会在主轴和侧轴上进行排列！
- css的属性设置
- 弹性容器设置相关的css属性
- 以下这些属性都是设置在弹性容器身上的！
1. flex-direciton 指定容器中的主轴和侧重方向！
可选值：
- row 默认值 主轴是x轴 方向是从左往右 ，侧轴是y轴，方向是从上往下
- column 主轴是y轴 方向是从上往下 ，侧轴是x轴，方向是从左往右
2. flex-wrap 设置弹性元素是否在弹性容器中换行
可选值：
nowrap 默认值 弹性元素不会换行
wrap 元素可以进行换行
3. flex-flow 该属性是 direciton和wrap属性的简写！
4. justify-content 分配主轴上的空白空间
可选值：
flex-start 元素从主轴的起点排列 默认值
flex-end 元素从主轴的终点排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间 ，开始元素顶格容器边缘，末尾元素顶格容器的边缘
space-evenly 空白均匀分布到元素
5. align-items 设置元素在侧轴上对齐的方式
可选值：
- streth 默认值， 如果元素未设置高度或者宽度，则将元素沿着侧轴填满
- flex-start 元素不会拉伸，沿着侧轴起点对齐
- flex-end 元素不会拉伸，沿着侧轴终点对齐
- center 侧轴居中对齐
- baseline 文本基线对齐 了解
6. align-content 分配侧轴上的空白空间 ，
注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap
可选值：
flex-start 所有元素向侧轴的起点对齐
flex-end 所有元素向侧轴的终点对齐
center 所有元素向侧轴的中间对齐
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间
stretch 空白单向向元素一侧分配，产生间隙
- 弹性元素的属性：
1. order 排序 数值越小 排列越靠前 默认为0
2. flex-grow 指定弹性元素的伸展系数 元素的扩充 默认情况元素不会自动扩充
3. flex-shrink 指定弹性元素的压缩 当空间不够时对元素进行压缩 默认压缩系数是1
4. flex-basis 指定元素的初始值大小，元素的宽高属性！ 该属性要优于元素的宽高属性！
5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写
- flex
auto ： 1 1 auto
none ： 0 0 auto
6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待
- flex-start
- flex-end
- center
- baseline 了解
- stretch 拉满侧轴
注意： 弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！
元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素
大小单位
/* height: 100px; */
/* em: 当前元素的字符宽度 1em = 1个字符宽(font-size) 1em = font-size值 */
/* rem: 根节点(html元素)的字符宽 1rem = html元素的一个字符宽(font-size) */
/* height: 2em; */
/* font-size: 20px; */
/* vh(viewport-height): 相对于视口高度的百分比 */
height: 100vh;
/* vw(viewport-width): 相对于视口宽度的百分比 */
width: 50vw;
颜色
/* 颜色值的表达方式有多种： */
/* 预置文本: 代表颜色的英文单词 */
/* transparent: 透明 */
background-color: transparent;
/* rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色 */
/* 使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色 */
/* 每个参数的取值范围是：0~255 (256是一个字节的大小Byte)*/
/* background-color: rgb(74, 40, 40); */
/* rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明 */
/* background-color: rgba(204, 20, 20, 0.5); */
/* HSL值: H色调 S饱和度（灰度） L代表亮度 */
/* background-color: hsl(0, 36%, 41%); */
/* 十六进制值: 以井号开头 */
/* 十六进制数由1~10超过10的部分由A~F表示 */
/* 前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色 */
/* background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f */
/* background-color: #f00; */
/* 带透明度的十六进制 */
/* background-color: #ff00ff7b; */
三角形
你可能感兴趣的:(css3,前端,css)