第一阶段总结
1：课程总结；
web前端开发学员课堂笔记总结
分类：推荐文章 ·
发布：2025-12-20 ·
浏览：1
UL 无序列表
OL 有序列表
伪类选择器语法：（顺序不能混）
1、a:link （超链接的初始状态）
2、a:visited（超链接被访问后的状态）
3、a:hover（鼠标悬停，即鼠标划过超链接时的状态）
4、a:active（超链接被激活的状态，即鼠标按下时超链接的状态）
class/id 改名
文字的行高，line-height在ps测量的时候是从文字的头部测量到下一行，如果是单行文字，并且垂直方向时居中的，那么用line-height来设置。注意点：行高时需要文字大小一样的时候，才可以用行高去设置的。
如果line-height的数值没有px，那么这个时候的数值，表示的意思是字号的几倍，列如：line-heiht：4；==line-height：64px；。如果想要清楚文字自带的间距，给line-height：1；
em这个单位是一个相对单位，相对于字号大小
背景图所在的盒子，如果什么都没有也没有设置宽高，那么背景图看不见。背景图的显示范围由内容或者设置的宽高，背景图默认是平铺的。
background-attachment:fixed；是会让背景图固定死在哪里不动，不动的范围只在盒子的范围内不动，一旦出了盒子的范围背景图就不见了。背景图固定是相对于整个页面的。
页面书写的时候，宽度不能直接写整个设计图的宽度，原因是因为每个电脑端额分辨率不一样那我们一般情况下写页面的时候，宽度是写版心（排版的中心）的款的（不会超过1200px）
写页面的时候
1、先确定页面有没有版心，如果有版心，那么宽度用的是像素，如果没有版心用的百分比。
2、切图（不要多切），尽量按着图片的实际大小
元素类型：
display：块display：block；
行内display：inline；
行内块display：inline-block；
隐藏display：none
li默认的值：display：list-item；
css选择器：
class权重：10
元素选择器：权重1
id选择器：权重100
通配符：权重0
包含选择器：权重所以的相加之和
字和字的间距：letter-spacing
单词之间的间距：word-spacing
padding：10px 20px 30px 40px 上右下左
padding：10px 20px 30px 上10 左右20 下30
padding：10px 20px 上下是10 左右是20
padding：10px 4个都是10
border：1px solid实线（dashed虚线）（dotted点状线）（double双线）
图片的兼容：
给img{display：block；}
绝对定位：position：absolute；
相对定位：position：realtive；
常见的浏览器兼容和解决方式：
图片的相关兼容：
1，默认向下撑大的像素hack：img{display：block；}
2，图片默认情况下横着排列的时候，水平之间有空隙back：img{floatleft；}
3，图片添加超链接之后再IE上有边框hack：img{border：0；}
表单相关的兼容：
1，表单元素距离顶部间距不一致，hack：input{float：left；}
2，去除input默认的边框的时候，如果用border：none；在IE的低版本上不兼容hack：input{border：0；}
3，input里面书写文字的时候。在ie的低版本上文字默认在顶端，其他浏览器文字实在垂直居中的位置，hack：input{line-height；}
其他相关的兼容问题：
1，margin-top的兼容问题，hack：给父元素添加overflow：hidden；
2，双倍间距，产生的条件：一个浮动元素添加了外边距之后，在IE上的解析数据是双倍的，hack给浮动元素添加display：inline；
3，百分比的问题，hack：给右边的浮动添加clear：right；
4，外边距重叠hack：给其中一个添加父元素，并且添加声明overflow：hidden；
5，鼠标变小手cursor：hand；这个声明只在IE9一下识别，hack：cursor：pointer；
表单和表格！！！
表单字段集 fieldset
表单字段集标题 legend
提示信息的标签 label
上传文件上传多个文件添加属性multiple
单选按钮
必选属性name同组的名字一样
选中checked
禁用disabled
多选
下拉菜单
文本域行数rows 字符的宽度cols
表格！！！
th水平居中并且加粗
表格标题
行分组
列分组
给table添加的一个属性添加分割线rules
控制单元格和单元格之间的间距border-spacing
合并单元格的边框border-collapse：collapse
固定单元格的宽度table-layout：fixed
内容为空的时候隐藏empty-cells：hide
控制表格标题位置的属性caption-side
BFC
是块级格式化上下文
出发条件：1；根元素HTML
2；浮动除了none
3；position：absolute或者fixed
4；display：inline-block或者table-cell或者tablecaption或者flex或者inline-flex
5；overflow除了visible
特性：
1；内部的盒子，蛔虫上往下排列
2；两个相邻盒子上下的距离由margin来决定，属于同一个BFC里面相邻的盒子margin会发生重叠（外边距重叠）
3；一个子元素的margin-left和包含块的border-left相接触
4；BFC区域不会与float box发生重叠（自适应的2栏布局后台管理系统的页面）
5；里面的元素不会影响到外面的元素
6；BFC参与浮动盒子高度计算（高度塌陷）
新增加的标签！！！
内容块section
文章article
头部header
尾部footer
导航nav
旁边aside
独立内容块figure标题figcaption
高度显示mark
媒体文件的引入embed
css3属性！！！！！
文字阴影text-shadow：水平阴影 垂直的 模糊的 颜色
盒子阴影box-shadow：水平阴影 垂直的 模糊度 延伸半径 颜色 inset；
单词换行word-break：默认值normail keep-all对于中文 break-all强行对于单词进行换行
word-wrap：break-wrap；
英文大小写
text-transform：对于英文单词的首个字母都大写capitalize
font-variant：默认值normal小型打大写字母small-caps
背景的大小background-size 用px % cover把图片放到足够大，部分图片不能正确显示，可能会把图片拉倒变形 contain按比例进行放大
背景的渐变background-image或者background
线型渐变 background-image：linear-gradient（red，blue）；
径向渐变 background-image：radial-gradient（blue，yellow）；
移动端！！！
em相对单位 相对最近的父元素的字号大小
rem root em相对单位 相对于根元素的字号大小
vw viewport width相对当前的视扣得宽度
100vw=375px
1vw=3.75px
1rem=120px
1rem=32vw=120px
2：自我总结；
通过了一个月的学习，大大小小了解了很多，从以前的一无所知，到现在知道了HTML的基础和pc端移动端的设计，布局，以及自己的实践操作。感触很深！
刚来学校一位就是简单的基础知识，压根没当回事，不好好学习，上课时不时地走神，打瞌睡，突然发现自己跟不上脚步了，心里开始着急，不知如何是好。也是因为自己好久没有学习了，上了好几年班，突然学习有点不适应，本来公司就是属于比较放松的单位，也有点懒惰成性，来到学校感觉养成了那种懒惰的习惯，没有自我的把控意识，每天想的是吃什么，喝什么，怎么玩，前两周学习有点跟不上了，心里比较着急，担心月考考不好怎么办？庆幸的是宿舍有一个学长比我来早一个月，还好回去能问问他，每天晚上回去复习当天知识点，不会的问问老师或者宿舍的学长，坚持复习当天课程，敲打代码，让自己从一个无知的程序员变成一个无所不知的程序员。
3：自我改进；
1.在智慧方面：需要继续加强学习，包括知识理论学习和实践操作学习，提高自己的知识水平，加强训练提高自己的专业技术水平。平时闲暇实践可以浏览一些学习网站。
2.在恒性方面：做事要细心，有始有终，持之以恒，培养自己的意志力，列入以学习为例：
1：制定目标和计划，
2：正视困难，解决困难，学习自己是在做不出来，再问问老师，
3：时刻提醒自己，自己能行。
3.在自律方面：严格要求自己，遵守学校校规，从我做起，树立好榜样。