下面就简单的总结一下半个多月基础班所学的知识吧!
01表格
table嵌套tr,tr嵌套多个td,tr表示行,td单元格我们也可以认为是列;
table表示整体,tr表示行,td表示列;
表格的常见属性:
宽:width;
高:height;
边框:border,如果设置border=0是没有边框;
对齐方式:align 取值left、center、right;设置表格在网页中的水平对齐方式;
单元格和单元格之间的距离:cellspacing
单元格内容到单元格边框的距离:cellpadding
table单元格合并
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
注意:合并单元格的顺序:先上后下,先左后右;
单元格合并的步骤
01 先确定一个几行几列的普通表格
02确定是跨行还是跨列;
03 根据先上后下,先左后右的原则找到目标单元格,然后书写合并方式,确定合并单元格的数量;
04 删除多余的单元格;
Css作用
Css就是层叠样式表
作用:进行页面的版面布局和外观样式的美化
通过css书写代码能够将结构html和样式css分离书写,简化代码,提高可阅读性;
Css引入方式(书写位置)
Css的引入方式分为3种:行内式,内部样式(内联样式),外部样式
行内式
后代选择器(重点)
Html布局有嵌套关系
父级 + 空格+子级元素{ css键值对}
Css里面一个空格表示后代关系
后代选择器是我们在实际开发中常用的;
总结
后代选择器/包含选择器:有父子级的包含关系,一个空格表示了后代关系;
子元素选择器(重点)
只能选择嵌套关系的父子关系得到元素,也就是嵌套的第一层元素,一个大于号“>”表示选中子级;
链接的伪类
四种状态:
a:link 未访问的链接(访问前)
a:visited 已访问的链接(访问后)
a:hover 鼠标移动到连接上(鼠标经过)
a:active 选定的链接(按下鼠标的时候)
注意:以上的顺序不能颠倒;四种状态不会全部用;
清除元素默认的内外边距
1、*{marin:0;padding:0; } 清除所有元素的默认边距和默认样式;
2、行内元素尽量不要设置垂直方(上下)向内外边距,因为行内元素设置了margin-top、margin-bottom和padding-top、paddinig-bottom是不显示效果;
嵌套垂直外边距合并(重点)
问题描述(环境)
如果两个盒子有嵌套包含的父子级关系,如果给子级盒子设置了margin-top,效果显示父级盒子也会跟着掉下来;
解决方案:
方案1:给父级盒子添加border-top为1px,划分父级和子级边缘(不建议使用)
方案2:我们直接将子级的margin-top取消,然后设置父级的padding-top,注意加了padding会撑大盒子,需要加多少减多少;(酌情使用)
Css的三种布局机制(了解):
1、普通流:块级元素独占一行,从上向下顺序排列;常用的元素:div、hr、p、h1-h6、ul、ol、dl、form、table;
行内元素一行共存多个,从左到右排列,碰到父元素边缘则自动换行; 常用元素:span、a、i、em;
2、浮动:让盒子从普通流中浮起来,让多个块级盒子一行显示;
3、定位:将盒子在浏览器的某一个位置,后期会经常用到;
浮动float
作用:
让元素脱离文档流,进行页面效果的布局,让多个盒子水平排列一行显示,盒子左右对齐,最早是用来实现文字环绕文字
属性和属性值(强制记忆)
属性:float
属性值:none left right
float:left; 左浮动
float:right; 右浮动
浮动的特点
01 浮:让盒子脱离原来的文档流,漂浮起来;
02漏:盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来;
03特:a、浮动之后的盒子的显示模式会更改为行内块元素的特点;
b、浮动之后的元素之间的没有缝隙的,紧贴在一起,顶端对齐;
c、如果父级盒子不够宽装不下浮动的盒子,盒子会掉下来另起一行;
注意:做浮动布局的盒子建议尽量都添加固定的宽高;
导航实际开发
代码框架
实际开发中导航栏默认用ul嵌套li,li嵌套a标签完成,然后让li左浮动float:left;,最后设置相关的细节样式,将a的显示模式更改为块display:block;方便我们设置宽高去实现鼠标经过整个盒子的时候有想要的效果;
清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动;
实际开发中常用的一种清楚浮动的方法:after。
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
为什么要用定位
将元素定到某一个位置或者其他元素的上面,位置可以任意更改,完全脱了文档流;
定位的基本构成
定位=定位模式+边偏移(left、right、top、bottom)
定位的精髓:利用更改方向英文来进行位置改变设置;
定位的分类
静态定位:position:static;(很少用)
相对定位:position:relative;
绝对定位:position:absolute;
固定定位:position:fixed;
为什么要用子绝父相?
相对定位是占位的定位,绝对定位是不占位的定位,实际工作中我们需要不改变父级元素原来占有的位置,如果使用绝对定位的话父级元素占有的位置会被其他盒子占有,影响我们整体布局,所以我就用相对定位进行占位的定位;
应用
子级绝对,父级相对,父级盒子定位了,但是依然占位,不会影响其他盒子的布局;
让有定位的盒子水平或者垂直居中
01、如果盒子的定位模式是对定位:position:relative;相对定位,因为他没有脱离文档流,所以可以直接用margin:auto;进行居中设置。
02、如果盒子是绝对定位或者固定位,盒子脱离了文档流:可以进行以下操作:
设置水平居中:设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半,让盒子水平居中;
设置垂直居中:设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半,让盒子垂直居中;
overflow:hideen;的常用技巧(重点)
01 overflow:hideen;可以让超出固定范围的内容隐藏掉;
02 overflow:hideen;可以清除浮动,布局的时候我们做左右或者左中右布局,都是父级嵌套子级盒子,然后将子级盒子浮动,但是如果没有给父级添加固定的高度,子级浮动以后父级的高度为0,不占位,会影响后面的布局,就给父级添加overflow:hideen;来解决;
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题,两个嵌套的盒子,都没有浮动或者定位,给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题,就给父级添加overflow:hideen;来解决;
用户界面-鼠标样式鼠标样式:cursor
小白(默认) cursor:default;
小手: cursor:pointer; 常用一般是用在一些提示要点击的样式,不能跳转的时候;
移动: cursor:move;
文本: cursor:text;
禁止: cursor:not-allowed;
取消表单默认的蓝色交互框(记住)
表单元素默认选中的时候会有一个蓝色的边框,各个浏览器设置是不一样的,所以我们在开发过程中直接去掉就可以,代码如下:
outline:none; |
|