黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 大大、 时间: 2019-4-19 23:47
标题: 技术贴
下面就简单的总结一下半个多月基础班所学的知识吧！
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;

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2