本帖最后由 雪糕大大 于 2019-7-24 14:45 编辑
本人才疏学浅,不是专业人士,分享些我认为比较重点的部分总结一下: web标准的组成部分: 结构标准(HTML) 表现标准(CSS样式) 行为标准(javascript)
HTML :HTML是超文本标记语言,不是编程语言。用HTML标签来描述网页元素,比如:链接、图片、文字等;将所有的标签放在尖括号“<>” 里面。 html就是认识一些标签,知道其用法。重点分清楚块元素,行内元素:行标签:(可以共用一行)strong em img a,b,i,s,u,input,span 块标签:(独占一行)h1-h6,p,div,hr,ul,ol,li,dt,dd,dl CSS :Cascading Style Sheets,简称层叠样式表,主要是用来进行页面的版面布局和外观样式的美化;能够将结构html和样式css分离书写,简化代码,提高可阅读性。 引用方法就是:行内样式、内嵌样式(内联样式)、外部链接样式(外联样式)· 网页布局的三种机制:普通流布局、浮动布局、定位布局 写好网页布局很重要~
零散的小知识点:1,盒子的组成: 内容 一般指的就是宽和高 边框:border 内边距:padding 拉开内容到盒子边缘的距离; 外边距: margin 拉开盒子与盒子之间的距离; 2,css属性书写顺序: 1、布局定位属性:display / position / float / clear / visibility / overflow 2、自身属性:width / height / margin / padding / border / background 3、文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word 4、其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … 3,溢出文字在一行用省略号显示: 第一步 让文字强制在一行显示:white-space: nowrap; 第二步:将超出固定宽高的内容溢出隐藏overflow: hidden; 第三步:让隐藏的文字以省略号显示:text-overflow: ellipsis; 4,定位模式: 静态定位:position:static; 相对定位:position:relative; 参照物:相对于自己去进行位置移动; 相对定位特点:相对于自己为参照物进行位移,属于占位定位,盒子仍然在标准流里面;相对定位是不会改变盒子的显示模式的;
绝对定位:position:absolute;
参照物:绝对定位的参照物默认以父级为主,如果父级没有定位,就一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照; 注意:绝对定位完全脱离了文档流;
绝对定位特点:绝对定位是完全脱离了标准流不占位的,参照物默认以父级为主,如果父级没有定位一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照定位;
固定定位:position:fixed
参照物:电脑屏幕(可视窗口); 注意:固定定位完全脱离了标准流,参照物是可视窗口为准,和父级没任何关系。
|