学前体会
本文收集自拉勾教育大前端就业班
- 从今天开始也算正式步入前端的课程了，我是一个不善于记笔记的人，但我知道笔记可以带来多大的帮助,因为我的小脑袋瓜真的记不住，说真的css样式笔记记起来是真的无聊，和流水账单一样，感觉更偏理论点，尤其在运用中如何把所学的东西串连起来，用创造性思维去理解才是这个工具的真谛，对于毫无审美的我来说，拜托以后碰到一个给力的UI小姐姐
CSS常用样式
1.font-weight
- 作用：设置文字是否加粗显示
- 单词类型：normal、bold、bolder、lighter
- 数字类型：100-900直接的整百数字。400等价于normal,700等价于bold
<p style="font-weight: normal;">默认值</p> <p style="font-weight: bold;">定义粗体字符</p> <p style="font-weight: bolder;">定义更粗的字体</p> <p style="font-weight: lighter;">定义更细的字体</p>
2.font-style
- 作用：设置文字是否斜体显示
- 属性值：normal、italic、oblique
<p style="font-style: normal;">正规的字体</p> <p style="font-style: italic;">斜体文字</p> <p style="font-style: oblique;">倾斜的文字</p>
3.line-height
- 作用：设置一行文字的行高
- 行高是文字占有的高度，并垂直居中
<p style="line-height: 40px;">行高</p>
4.font综合属性
<p style="font: 14px "宋体";">字号 字体</p>
<p style="font: 14px/28px "宋体";">字号/行高 字体样式</p>
<p style="font: bold italic 14px/28px '宋体';">加粗 斜体 字体大小/行高 字体样式</p>
5.text-align 水平对齐
- 作用：设置文本水平方向对齐
- 属性：left、center、right
<p style="width: 200px; height: 100px; background-color: aquamarine; text-align: center; ">设置水平对齐方式</p>
6.text-decoration文本修饰属性
- 设置文本整体是否有线条的修饰效果
- 属性：none、overline、line-through、underline
<p style="text-decoration: none;">没有修饰</p> <p style="text-decoration: overline;">上划线</p> <p style="text-decoration: line-through;">中划线，删除线</p> <p style="text-decoration: underline;">下划线</p>
7.text-indent文本缩进
- 作用：设置段落首行是否缩进
- 属性：px单位、em单位、百分比
盒模型
- 用来描述盒子位置、尺寸的属性，分别是width、height、padding、border、margin
1.width
- 作用：设置元素内容的区域宽度
2.height
- 作用：设置可以添加元素内容的区域高度
3.padding
- 作用：设置元素边框内部到宽高之间的距离
p{ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }
4.border
- 作用：设置内边距外面的边界区域，作为盒子实体化的最外层
- 属性：分别设置线的宽度、线的形状、线的颜色
- boder-style
- 定义边框样式
- 常用属性：none:无边框，solid:实线，dashed:虚线
- boder-color
- 设置边框颜色
5.margin
- 作用：设置盒子与盒子之间的距离
p{ margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px; }
盒模型属性
清除默认样式
- 大部分标签都有浏览器加载的默认样式，会对布局造成一些影响。为避免默认样式影响，一定要清楚默认样式
*{margin: 0;padding: 0;} p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0px;padding: 0px;} li{list-style: none;} a{text-decoration: none;} h1,h2,h3,h4,h5,h6,b,strong{font-weight: normal}
height应用
- 高度可以不设置，会根据内部内容高度自动撑开
- 如果设置了高度，后面同级元素过多，会溢出盒子区域
overflow属性
- 如果出现溢出现象，通过overflow进行溢出部分内容显示
overflow="visible" 默认值，显示溢出部分 overflow="hidden" 隐藏溢出部分，隐藏超过边框内容 overflow="scroll" 溢出部分出现滚动条，无论有没有溢出，水平和垂直都会出现滚动条 overflow="auto" 自动的，没有溢出正常显示，溢出就出现滚动条
居中
- 单行文本垂直居中： 让文字行高line-height等于盒子高度height
- 多行文本垂直居中： 让元素高度自适应设置元素内边距上下值相同‘
- 元素水平居中：子盒子宽度低于父盒子宽度，设置子盒子的margin值，水平方向的值设置auto
父子盒模型
- 子元素的宽度加在一起不能大于父元素的宽带
- 盒模型自动内减：不设置子元素的width，同时设置子元素其他属性，子元素的width会自动缩减
margin塌陷现象
- 同级元素塌陷：在垂直方向如果两个元素的外边距有相遇的，浏览器加载两个边距中值较大的那个
- 解决：两元素之间只设置一个方向的margin
- 父子元素塌陷：父元素和子元素设置了同方向的margin-top两属性之间相遇造成塌陷
- 能用padding属性就不用margin属性，水平间不存在margin塌陷现象
标准文档流
- 元素排版过程中，元素默认从左往右，从上往下，前面内容发生变化，后面的内容位置也会变化
- HTML就是一种标准文档流文件
微观现象
- 空白折叠现象
- 文字类元素排在一行出现高低不齐，底边对齐效果
- 写满元素时，自动换行
元素等级、布局元素的分类
- 标准流中，元素区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素
- 块级元素：大部分容器级标签都是块级元素<div>、<h1>
- 块级元素可以设置宽高，在浏览器中正常加载本身属性为display:block;
- 独占一行，不能和其他标签并排,可以直接控制宽度、高度等其他相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
- 行内元素：大部分文本级标签<span>、<a>、<b>
- 行内元素不能正常加载宽高，本身属性为display:inline;
- 可以和其他行内块元素并排一行,不可以直接控制宽度、高度等其他相关css属性
- 无论设置宽高，都只被内容撑开，不能嵌套块级元素
- 行内块元素也叫内联块状元素：<img>、<input>
- 可以设置宽度和高度，本身属性为display:inline-block;
- 可以与其他并排一行显示
- 如果不设置宽高，以原始尺寸加载，或被内容撑开
- 具有标准流的微观性质
显示模式display
- 可以改变标签的显示模式
- 根据属性值的不同，可以加载对应元素等级的特点
display: block 元素以块级元素模式加载，具备块级特点 display: inline 元素以行内元素模式加载，具备行内特点 display: inline-block 元素以行内块元素加载，具备行内块特点 display: none 标签及内部内容直接隐藏，让出原有标准流位置
脱离标准流
- 标签元素脱离标准流的方法包括：浮动，绝对定位、固定定位
浮动float
- 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
浮动的性质
- 浮动的元素脱离标准流，具备行块二象性，不会有空白折叠现象
浮动元素依次贴边
- 浮动的属性值：left、right
- 父元素宽度足够，子元素会依次贴边
float: left float: right
浮动元素没有margin塌陷
- margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象
浮动的元素让出标准流位置
- 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素
字围现象
- 同级元素前面元素浮动，后面元素不浮动，在不浮动的元素中设置文字，文字内容不会被覆盖，会围绕浮动元素进行加载
清除浮动
- 给标准流的父元素添加一个高度height，如果子元素高度发生变化，父元素不会自适应
- 给标准流父元素添加clear属性，父元素不受浮动影响
clear: left 清除前面左浮动带来的影响 clear: right 清除前面右浮动带来的影响 clear: both 清除前面所有浮动带来的影响
伪类
- :after：表示选中的是某个标签内部的最后位置
- content必须添加，内容允许为空
.clearfix:after{ content: "1"; 添加一个文字内容 display: block; 将文字转换为块级元素 height: 0; 高度设置0，避免影响父盒子高度 clear: both; 清除浮动 visibility: hidden; 将元素占位隐藏 }
溢出隐藏
- 设置overflow: hidden，将超过高度的部分直接隐藏
- 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸，无论子元素是标准还是浮动，都会将最高高度作为子高度加载
- 浮动影响后面的元素：父元素有了高度，可以管理内部所有浮动元素，不会延申到后面标签中影响贴边
CSS伪类选择器
- 不需要给标签添加任何属性，都是语法提前规定好的，也不一定立即加载到浏览器上
<a>标签的伪类
- 用户触发对应的行为，就可以加载对应的样式
a:link{color:gray;} 访问前状态 a:visited{color: cyan;} 访问后状态 a:hover{color: red;} 鼠标悬浮经过状态 a:active{color: yellow;} 鼠标点击状态
背景属性
background-color
- 在盒子区域添加背景颜色的修饰
background-image
- 给盒子添加图片的背景修饰
background-image: url(image/1.jpg);
background-repeat
- 背景重复，配合background-image一起使用
background-repeat: repeat 重复，默认属性 background-repeat: no-repeat 不重复，只加载一次 background-repeat: repeat-x 水平重复，垂直方向不重复 background-repeat: repeat-y 垂直重复,水平方向不重复
background-position
- 主要用于设置不重复的图片在背景区域加载开始位置
- 水平方向可选单词：left、center、right
- 垂直方向可选单词：top、center、borrom
background-position: center center 先水平再垂直 - 像素定位：正数表示向右向下移动，负数表示向左向上移动
background-position:100px; 100px; 以左上角为坐标开始移动
background-attachment
- 背景附着：设置背景图片是否随着页面或盒子的滚动而滚动
background-attachment: scroll 滚动的表示背景与盒子相对位置不变 background-attachment: fixed 固定的，页面滚动背景图片不变
综合写法
background: 图片地址 背景重复 背景定位 背景附着
background: url(image/i.jpg) no-repeat center top fixed #fff; 位置可以互换
文字隐藏方法
- 将字号设置为0，IE7以下兼容有问题
- 可以设置text-index,属性值为负的很大的值，文字会走出盒子外部，再设置溢出隐藏隐藏文字
text-index需要转化为块级元素才能设置缩进
CSS精灵
- css精灵是一种处理网页背景图像的方式
- 将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
- 利用背景定位技术，将精灵图的每个小图片加载到对应标签
背景半透明
- css3支持背景半透明的写法，颜色值增加了一种rgba模式
- 0-1之间，0表示完全透明，1表示完全不透明
background-color: rgba(255,0,0,0.4)
背景缩放background-size
- 通过background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动web开发中做屏幕适配非常广泛
background-size: 100px; 调整宽度，长度等比缩放 background-size: cover; 把背景图拓展至足够大，使背景图覆盖背景区域，溢出部分会被隐藏 background-size: contain; 把图片扩展至最大尺寸，保证图片完全显示在背景区域
定位
定位属性position
- 设置定位的元素，它需要根据某个参考元素发生位置偏移
position: relative; 相对定位 position: absolute; 绝对定位 position: fixed; 固定定位
偏移量属性
- 定位元素药发生位置变化的移动，必须搭配偏移量属性进行设置
相对定位
- 相对定位的元素不脱离标准流，不会让出原来占有的位置
- 相对定位的参考元素是自身，left的正值等于right的负值
- 由于相对定位元素比较稳定，不会随意让出位置，可以作为绝对定位的参考元素
position:relative; 设置相对定位，配合top,right使用
绝对定位
- 元素脱离标准流，会让出标准流的位置，可以设置宽高，也可以随时定义位置，不设置宽高只能被内容撑开
- 在绝对定位中，参考点不同，left正值不再等价于right的负值
position:absolute; 设置绝对定位，配合top,right使用
祖先级为参考元素
- 如果祖先级中有定位的元素，就不会去参考<body>
- 参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
- 如果绝对定位参考元素是某个祖先级，会忽视参考元素的padding区域
固定定位
- 参考元素：浏览器窗口
- 由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
position: fixed
定位应用
压盖效果
- 由于绝对定位的元素脱标，压盖效果更好，实际工作中，常见的是绝对定位制作的压盖
居中
- 在需要居中的方向使用偏移量属性比如：left:50%
- 在给绝对定位的子盒子设置一个同方向的margin,属性为负的自身宽度的一半
压盖
- 如果想要更改定位的元素压盖顺序，可以设置一个z-index属性
- 属性值大的会压盖属性值小的，设置z-index属性会压盖没有设置的
- 如果属性值相同，后写的压盖先写的
- z-index只能给定位的元素设置才能生效
- 如果父级设置了z-index,那么子级也会跟随父级一起设置
轮播图实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.lunbo{
position: relative;
width: 500px;
height: 750px;
border: 1px solid chartreuse;
margin: 0 auto;
}
.lunbo .pic li{
position: absolute;
display: none;
top: 0;
left: 0;
}
.lunbo .pic li img{
width: 500px;
}
.lunbo .pic .current{
display: block;
}
.lunbo .btn a{
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.3);
font: 20px/40px "宋体";
text-align: center;
color: #000;
font-weight: bold;
}
.lunbo .btn .leftbtn{
left: 0;
border-radius: 0 50% 50% 0;
}
.lunbo .btn .rightbtn{
right: 0;
border-radius: 50% 0 0 50%;
}
.lunbo .btn a:hover{
background-color: rgba(0, 0, 0, 0.6);
}
.lunbo .sub{
position: absolute;
left: 100px;
bottom: 50px;
width: 300px;
}
.lunbo .sub li{
float: left;
width: 20px;
height: 20px;
margin-right: 20px;
background-color: rgba(0, 0, 0, 0.3);
font: 12px/20px "微软雅黑";
text-align: center;
border-radius:50%;
cursor: pointer; /*光标变成小手*/
}
.lunbo .sub .current{
border: 2px solid snow;
display: block;
}
.lunbo .sub li:hover{
border: 2px solid snow;
}
</style>
</head>
<body>
<div class="lunbo">
<ul class="pic" id="pic">
<li class="current"><img src="lunbo/1.jpg" alt=""></li>
<li><img src="lunbo/2.jpg" alt=""></li>
<li><img src="lunbo/3.jpg" alt=""></li>
<li><img src="lunbo/4.jpg" alt=""></li>
<li><img src="lunbo/5.jpg" alt=""></li>
<li><img src="lunbo/6.jpg" alt=""></li>
</ul>
<div class="btn">
<a href="javascript:;" class="leftbtn"><</a>
<a href="javascript:;" class="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li onclick="show(0)">1</li>
<li onclick="show(1)">2</li>
<li onclick="show(2)">3</li>
<li onclick="show(3)">4</li>
<li onclick="show(4)">5</li>
<li onclick="show(5)">6</li>
</ol>
</div>
<script>
var lis=document.getElementById('sub').getElementsByTagName('li')
var imgs=document.getElementById('pic').getElementsByTagName('li')
function show(num){
for(var i=0;i<imgs.length;i++){
if(i==num){
imgs[num].className="current"
imgs[num].style.display="block"
}else{
imgs[i].className=""
imgs[i].style.display=""
}
}
}
</script>
</body>
</html>
