前端入门
1、HTML&CSS
1、选择器
通配选择器
元素选择器
类选择器
id选择器
复合(组合) 选择器
- 交集选择器(且)
<style>
p.class {
...
}
/* 元素选择器需在前面 */
.class1.class2 {
...
}
</style>
- 并集选择器(或者)
<style>
.class1,
.class2,
#id,
.class {
...
}
</style>
/* 任何选择器都可以作为选择器的一部分 */
-
后代选择器（儿子、孙子，重孙）
ul li a { ... } .class1 a { } -
子代选择器(儿子)
div>a {
..
}
div>p>a {
}
.class1 > a {
}
-
兄弟选择器(向下找)
div+p { /*紧紧相连的兄弟元素,向下找*/ ... } div~p { /*通用选择器，所有兄弟选择器，向下找*/ } -
属性选择器
[属性名] { } /*选择具有title属性的元素*/
[title="a"] { } /*选择具有title属性，且值为a的元素*/
[title^="a"] { } /*选择具有title属性，且值以a开头的元素*/
[title$="s"] { } /*选择具有title属性，且值以s结尾的元素*/
[title*="u"] { } /*选择具有title属性，且值包含u的元素*/
- 伪类选择器
a:link {
/*选中没有访问过的a元素*/
...
}
a:visited {
/**选择的是访问过的a元素/
}
- 伪类选择器-动态伪类
a:hover {} /*悬停*/
a:active {} /*激活*/
/*hover,active 所有元素都有*/
input:focus {}
- 伪类选择器-结构伪类
div>p:first-child {} /*选择div第一个子元素是p元素的元素*/
div p:first-child {} /*选择div所有的p元素，且p元素的是其夫元素的第一个子元素*/
p:first-child {} /*p元素，且p元素的是其夫元素的第一个子元素*/
p:last-child {} /*p元素，且p元素的是其夫元素的最后一个子元素*/
div p:first-of-type {} /*p元素，第一个类型为p*/
div p:nth-of-type(n) {} /*p元素，第n个类型为p*/
p:nth-child(n) {/*p元素，且p元素的是其夫元素的最后一个子元素*/}
p:nth-child(2n/even) {} /*偶数*/
p:nth-child(2n+1/odd) {} /*奇数*/
p:nth-child(-n+5) {} /*前5个*/
div>p:not(.clasa1) /*否定(排除)结构伪类*/
- 伪类选择器-UI伪类
input:checked {} /* 选中的是勾选的复选框或者单选按钮*/
input:disabled
- 伪类选择器-目标伪类
div:target {} /* 选择描点选中的元素 */
- 伪元素选择器
div::first-letter {}
div::selection {}
input::placeholder {}
p::before {content：‘$’}
p::before {content：‘$’}
选择器的优先级
2、字体
3、盒模型
margin:
给一个块级元素左右margin设置auto可以实现该元素在其父元素水平居中
margin: 0 auto
margin 也可以设置负值
margin：-50px
-
margin塌陷问题
第一个元素的上外边距和最后一个元素的下外边距会作用在父元素上
overflow:hidden
- margin 合并问题
- 元素的溢出
- 隐藏元素
- 样式的继承
- 元素居中
- 行内元素空白问题
- 行内块的幽灵空白问题
4、浮动float
特点：
浮动后的影响：
解决方案：
布局练习：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- #region -->
<style>
/* #region清除默认样式 */
* {
margin: 0;
padding: 0;
}
.leftfix {
float: left;
}
.rightfix {
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* #endregion清除默认样式 */
.container {
width: 960px;
margin: 0 auto;
text-align: center;
}
.logo {
width: 200px;
}
.banner1 {
width: 540px;
margin: 0 10px;
}
.banner2 {
width: 200px;
}
.page-header div {
height: 80px;
line-height: 80px;
background-color: #ccc;
}
.menu {
height: 30px;
line-height: 30px;
background-color: #ccc;
margin: 10px auto;
text-align: center;
}
.left-top div {
width: 368px;
height: 198px;
margin-right: 10px;
border: 1px solid #000;
background-color: white;
line-height: 200px;
}
.left-bottom div {
width: 178px;
height: 198px;
margin-top: 10px;
border: 1px solid #000;
line-height: 200px;
margin-right: 10px;
}
.rightbox div {
width: 198px;
height: 128px;
border: 1px solid #000;
line-height: 128px;
}
.item-eight {
margin: 10px 0;
}
.footdiv {
height: 60px;
background-color: #ccc;
line-height: 60px;
margin: 10px 0;
}
</style>
<!-- #endregion -->
</head>
<body>
<div class="container">
<div class="page-header clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<div class="menu">菜单</div>
<div class="content clearfix">
<div class="leftbox leftfix ">
<div class="left-top clearfix">
<div class="content-left leftfix">栏目一</div>
<div class="content-right leftfix">栏目二</div>
</div>
<div class="left-bottom clearfix">
<div class="item-three leftfix">栏目三</div>
<div class="item-four leftfix">栏目四</div>
<div class="item-five leftfix">栏目五</div>
<div class="item-six leftfix">栏目六</div>
</div>
</div>
<div class="rightbox rightfix">
<div class="item-seven">栏目七</div>
<div class="item-eight">栏目八</div>
<div class="item-nine">栏目九</div>
</div>
</div>
<div class="footdiv">页脚</div>
</div>
</body>
</html>
5、定位position
相对定位
绝对定位
固定定位
粘性定位
定位的层级
特殊定位的应用
6、布局
1、版心
2、常用的布局名称
3、重置默认样式
2、HTML5
2、新增标签
视频标签：
音频标签：
3、新增全局属性
3、兼容性处理
3、CSS3
1、新增css属性
2、新增文本属性
3、新增渐变
4、web字体
5、字体图标
6、2D变换
缩放：
旋转：
2D旋转
扭曲:
多重变换
7、3D转换
8、过渡
过渡的高级使用：
复合属性：
9、动画
动画的复合属性
过渡和动画的区别：
过渡需要触发条件，动画不需要。 动画可以指定关键帧。
10、多列布局
多列布局案例：
图片展示瀑布流
<style>
.outer {
column-count: 5
}
img {
width: 100%
transition: 0.2s linear
}
img:hover {
box-shadow: 0px 0px 20px black;
transform:scale(1.02)
}
</style>
<div class="outer">
<img src="...."/>
<img src="...."/>
<img src="...."/>
</div>
11、伸缩盒模型
主轴方向
主轴换行方式
主轴的项目对齐方式
默认主轴水平从左到右
侧轴
1、元素的水平垂直居中布局
<style>
.outer {
height:400px;
display:flex;
/*方案一*/
/*修改主轴内容水平居中*/
justify-content: center;
/*修改侧轴居中*/
align-itme: center ;
}
.inter {
width：200px;
height:200px;
/*第二中：水平垂直居中*/
margin：auto;
}
</style>
<div class="outer">
</div class="inter"></div>
</div>
2、**伸缩盒模型 **
3、响应式布局
4、BFC
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
区块格式化上下文 - CSS：层叠样式表 | MDN (mozilla.org)
