黑马程序员技术交流社区
标题:
重点笔记发表
[打印本页]
作者:
韩超杰
时间:
2019-4-21 15:23
标题:
重点笔记发表
摘抄重点笔记：
Table的基本结构<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
表格的常见属性
Widtfh 宽 height 高 边框border
表格标题caption应放在<table>下面
4
5
无序列表基本结构
有序列表基本结构
自定义列表
6
表单的组成部分
7
input控件
<input type="text" > 文本框
<input type="password"> 密码框
<input type="radio" name="1">XXX 单选 radio是单选
<input type="radio" name="1">SSS
实现单选应在后面加一个相同的name
<input type="checkbox" name="1"> 多选 checkbox是多选
<input type="checkbox" name="1">
实现多选应在后面加一个相同的name
checkde加在单选和多选的后面实现默认选中的效果
8
input按钮组
<input type=“button” value=“XXXX” /> XXXX为按钮的名字
提交按钮：<input type=“submit” value=“XXXX” />
重置按钮：<input type=“reset” value=“XXXX”/>
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径
文件域名：<input type=“file” /> 为上传文件
button标签按钮：<button>我也是按钮</button>
label标签的作用
点击文字可以直接将光标定到输入框
01 用label直接包括input表单 ----- <label> 用户名： <input type=“radio” name=“usename” value=“请输入用户名” /> </label>；
02 用for 属性规定 label 与哪个表单元素绑定，for去定义一个取值，然后在input身上用id调用for取值 ---- <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />
文本域textarea
textarea为双标签，可控制宽高
select下拉列表
一对select标签可以嵌套多对option标签
form表单域
作用
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：
action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字” 设置不同的取值名称用于后台提交；
注意：一个页面中可能会出现过个form标签，我们需要用添加name属性设置不同的表单名称来区分；
<form action="" method="post" name="表单名称1"></form>
<form action="" method="post" name="表单名称2"></form>
Css作用
Css就是层叠样式表
作用：进行页面的版面布局和外观样式的美化
通过css书写代码能够将结构html和样式css分离书写，简化代码，提高可阅读性；
Css引入方式（书写位置）
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式
行内式
将样式用style属性添加给标签，在标签的开始标签身上，就是在开始标签身上敲空格，然后将style当做属性添加，style后面的双引号里面书写css语法：属性:属性值；
语法：<div style=”属性1:属性值1；属性2:属性值2；…… ”></div>
注意：由于行内式没有实现结构和样式的分离，文件的可读性差，不建议大量使用；
内部样式（内联样式）
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；因为style只是html的一个标签；
内部样式只能对当前的页面起作用；
Css外部连接
操作
01 新建一个.css文件，放在项目下面的css文件夹里面；
02 单标签link标签配合自己的3属性书写在head标签里面：
rel 关系 告诉浏览器当前引入的文件和html是样式表的关系
type 类型 告诉浏览器当前引入的是css文件类型
href 路径 告诉浏览器去这个路径找到我们的css文件
<link rel="stylesheet" type="text/css" href="css/style.css">
外部链接的优点
01可以将页面样式一致的写一个样式列表，然后直接用link配合3属性进行调用，能够更好的管理页面；
02 实现了样式和结构的完全分离，我们经常使用的一种方法；
Css样式的书写格式
选择器 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3；…… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’ : ’ 链接；；
Css注释 /*注释内容*/
所有的注释都是提高代码的可读性，浏览器是不给解析的，写给我们自己看的；
Html的注释<!- - 注释内容 -->
CSS样式规则（键值对规则）
第一步确定给谁加样式 ---- 选择器
第二部书写 {}
第三步 在{}里面书写css键值对规则 {属性1:属性值1；属性2:属性值2；}
Css选择器
简介
Css选择器可以分为：基础选择器和高级选择器（复合选择器）；
基础选择器：标签选择器、类选择器、id选择器
高级选择器（复合选择器）：后代选择器、指定标签选择器、并集选择器
选择器的作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器
以标签名称命名的选择器，可以把将页面中所有的同类元素（该标签）全部选中；
标签选择器在实际开发中不建议使用；
类选择器
类选择器使用有一个过程：
01 定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束；
类名称可以重复出现使用，前提条件是：两个盒子的样式完全一致的，就和人的名字一样是可以重复de；
一个class调用多个类名
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red font100”>一个元素调用多个类名</div>
多类名调用可以解决统一修改某一个属性，还可以简化代码
Id选择器
id选择器使用有一个过程：
01 定义： 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id称”进行调用；
id选择器的命名规则：
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束；
类选择器和id选择器的区别：姓名和身份证号的区别
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器 *
一个 * 号表示选中了所有的标签（包括了咱们学过的和咩有学过的w3c规定的标签）
*{
margin:0;
padding:0;
}
以上代码表示所有的标签默认的margin设置为0，padding设置为0；
常见的文字控制属性
颜色 color
文字大小font-size（强制记忆）
font-size 取值单位是px和em，px常用，em表示一个字的大小；
一般情况下浏览器默认的文字大小是不一致的，所以我一开始就需要将整体的body的font-size设置为固定的大小统一浏览器的显示，按项目需求一般是12px、14px、16px之间；
文字字体font-family（强制记忆）
font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字或者特殊符号和有空格隔开的英文，要用英文状态的引号引起来；
font-family:Arial,”Microsoft Yahei”，“微软雅黑”,”黑体”；
常用的unicode字体写法（了解）
字体加粗样式font-weight（强制记忆）
加粗
font-weight:bold; font-weight:700;
不加粗
font-weight:normal; font-weight:400;
字体风格font-style （强制记忆）
改变字体默认的显示风格，倾斜和不倾斜
• 倾斜：font-style:italic;
• 不倾斜：font-style:normal;
实际开发中我们会用em或者i标签装小文字默认是倾斜的，我们用不倾斜来让文字扶正；
字体综合写法font（大重点强制记忆）
font：是否倾斜 是否加粗 文字大小/ 行高 字体；
font：font-style font-weight font-size/line-height font-family;
注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
实际工作中一般只用：font:文字大小 字体；
文字颜色 color
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333； #666； #9999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字居中显示text-align（强制记忆）
取值：left right center
text-align:center; 表示让盒子里面的文本居中显示，文本必须有父级；
文本行高line-height（强制记忆）
line-height设置两行文字之间的距离；
量取行高的方法
如果有psd源文件可以直接去字符面板索取
首行缩进text-indent（强制记忆）
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小，取值可以是正值也可是负值；
文本装饰text-decoration （强制记忆）
text-decoration:none;没有线 ---- 取消超链接a默认的下划线
text-decoration：underline；下划线 --- 给需要加下划线的文字加下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线
第一天总结
Emmet语法：
标签名+tab键可以生成整个标签；例如：div 表示生成div标签；
标签*数字+tab键可以按照数字生成对应的个数标签；例如：p*3表示3生成3个p；
如果是父子级关系可以直接用>连接+tab：例如：div>p 表示div嵌套p标签；
如果是兄弟关系就直接用+加tab；例如：div+p 表示div和p标签是同级元素；
如果要写类名和id名称直接早标签后面跟. 和#即可；例如：div.box === <div class=“box”></div> div#box === <div id=“box”></div> ；
如果想要生成有顺序的类名，直接在类名后面加$+数字；
复合选择器
后代选择器（重点）
Html布局有嵌套关系
父级 + 空格+子级元素{ css键值对}
Css里面一个空格表示后代关系
后代选择器是我们在实际开发中常用的；
总结
后代选择器/包含选择器：有父子级的包含关系，一个空格表示了后代关系；
子元素选择器（重点）
只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级；
>表示只选择儿子，其他不管；
交集选择器（指定标签选择器）：
直接在标签选择器后面紧跟着书写类选择器或者id选择器即可；
在一堆标签里面单独指定和其他标签样式不一致的方法；
并集选择器（重点）
样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可；
一个逗号表示并集关系；
问题：.box,.con,p,span{color:#f00; line-height:30px;} 表示什么？
好处：使用并集选择器书写代码可以节约代码量，重复的代码只写一遍；
链接的伪类
四种状态：
a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；四种状态不会全部用；
实际使用
实际使用的时候超链接的伪类时，不需要全部都写，
1. 只需要先设置一个总体的a的样式表示所有状态
2. 然后单独设置鼠标经过a:hover 的样式；
第一行代码表示将所有的伪类状态设置一直
第二行代码表示鼠标经过；
例如： .nav a{text-decoration: none; font-size:18px; color:#f00;}
.nav a:hover{color:#333;}
盒子的实体化三属性（重点）
宽 width
高height
背景 background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题；
标签显示模式
分类
块元素
特点：01独自占一行；
02 可以设置宽高并且生效；
03 如果不设置宽度width就默认显示为100%(父级多宽盒子就多宽)；
04 一般用来做布局标签（div/p/ul/li/dl/dt/dd/h）,p和h，dt段落和标题类的不能嵌套其他盒子；
行内元素：
特点
01一行共存多个
02 可以设置宽高，但是不生效；
03 默认宽度是内容撑开；
04 一般行内元素里面只能嵌套文本和其他的行内元素，但是超链接a特殊处理后可以在里面放其他元素；（span/a/em/i/b/strong/ins/del/s/u）
行内块元素：
特点
01一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距（img/input/td）
三种显示模式之间的转换（强制记忆）
通过设置display属性的不同取值实现相互转换：
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
常见的导航布局思路（理解记忆）
一般导航的布局结构是一个大的div表示整体盒子，里面是ul 嵌套多个li，li里面嵌套a，我们需要将li在一行显示（浮动、display: inline-block;），然后用display: block将li里面的a转化为块元素（方便我们实现鼠标经过a的时候设置样式）；
单行文字文本垂直居中：
设置文字的行高line-height等于盒子的自身高度；
如果line-height:值小于盒子自身高度文字偏上
如果line-height:值大于盒子自身高度文字偏下
背景属性background
背景颜色： background-color
背景图片： background-image
背景平铺： background-repeat
取值默认不写就是平铺等价于repeat
不平铺 no-repeat（记住）
X轴平铺 repeat-x
Y轴平铺 repeat-y
background-position:X坐标（水平方向） Y坐标（垂直方向）；
取值：可以是纯数字，也可以是方位名字（top/bottom/left/right）;
注意：01如果使用方位名字只写一个值另外一个值就默认居中，所以两个值建议都写；
02 取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；
03 建议大家在书写的时候X和Y轴都书写；
04 精确的取值和方位名词是可以混合使用的；
超大背景图的使用
• 一般情况下我们用大背景图是为了匹配不同的分辨率的屏幕，所以图片越大越好，但是我们用背景插入图片之后需要将图片的位置进行位置调节，让图片的中间位置显示出来，可以是用 background-position:center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；
背景图片固定：
background-attachment:fixed;
背景的复合写法（重点）
background:背景颜色 url(背景图片路径) 平铺方式 是否固定 X轴 Y轴；
注意：01 属性值没有书写顺序，没有的属性可以省略不写；
02 实际工作中建议大家使用复合写法；
Css3背景颜色透明background:rgba(0,0,0,0.5)
背景颜色半透明：background：rgba(0,0,0,0.3);（重点）
R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写；
rgb三个颜色取值最小是0，最大是255；
a的取值是0-1之间，0表示全部透明transparent，1表示不透明；
注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
Css的三大特性：
• 层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性：
有一些css属性子级是可以继承父级的，一般文在控制属性都会被继承，a标签继承color除外，需要单独设置（因为a独特显示，不会继承父级的color，我们需要单独设置）；
能被继承的文字属性：font-size、color、font-weight、font-style、text-indent，text-indent、line-height、text-align: center;、text-decoration:、font-family:
权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
!important 提高权重，有提权的效果，有了样式优先生效；
计算的时候 0,0,0,0 最后一位是不进位
继承性 ==== 0,0,0,0
标签选择器 === 0,0,0,1
类选择器 ===== 0,0,1,0
Id选择器 -==== 0,1,0,0
行内式 === 1,0,0,0
盒子模型
组成（记忆）
内容：实体化宽高
边框：border
内边距：padding 拉开内容到盒子边缘的距离；
外边距：margin 拉开盒子与盒子之间的距离；
边框border
综合写法（工作常用，强制记忆）
border:边框粗细 边框线条样式 边框的颜色；
border:2px dashed rgb(0,255,0); 绿色得到虚线
border属性分布写法（了解）
边框粗细 border-width
边框的线条样式 border-style
边框颜色 border-color
常见的线条样式（强制记忆）
solid实线 dashed虚线 dotted点线
单独设置不同方向的边框（重点强制记忆单词）
方位名词：left/right/top/bottom
如果想要设置四个方向不同的边框样式，我们只需要配合方位名词border-方位名词
border:3px solid #ccc; 四个边框都是一个样式
不同方向设置
border-left:3px solid #ccc; 左边框
border-right:3px solid #ccc; 右边框
border-top:3px solid #ccc; 上边框
border-bottom:3px solid #ccc; 下边框
没有边框border：none；
如果想input这样默认有边框的，我们需要先将默认的边框干掉none===== border:none;表示没有边框，然后可以根据需求书写自己的边框；
设置细线表格（记忆）
01 首先要新建几行几列，设置table的属性默认border不写，单元格之间的距离cellspacing="0"；
02 在css里可以设置table的宽度，设置border，同时设置td和th的border；
03 通过设置border-collapse:collapse;让相邻的边框合并在一起；
细线表格记住下面的代码就是细线表格（强制记忆）
内边距padding
作用
拉开内容到盒子边缘的距离；
padding的显示问题—撑大盒子（理解记忆）
问题描述
如果给固定宽高或者固定宽度的盒子添加padding和border就会默认将盒子撑大；
解决方案：
加多少减多少：四周都加了就宽高都减，只加了左右（padding-left，padding-right，border-left，border-right）就只减宽度，只加了上下（padding-，padding-bottom，border-top，border-bottom）就只减宽度；
添加padding不撑开盒子的情况
如果盒子没有固定的宽高或宽度，添加了padding是不会撑大盒子的；
盒子的实际占位大小（理解记忆）
盒子的实际占位大小=内容宽高+padding+border
Padding相关设置不同方向（强制记忆）：
padding:30px; 四个方向的内边距都是一个值；
padding-left:40px; 设置左边的内边距；
padding-right:40px; 设置右边的内边距
padding-top:40px; 设置距离顶部的内边距
Padding-bottom:40px; 设置距离底部的内边距
取值的个数不同表示意思不同（强制记忆）：
padding：30px； 表示四个方向的取值都一样；
padding：30px 60px； 表示：上下 左右 取值；
padding：30px 50px 60px； 表示：上 左右 下 取值；
padding：30px 40px 50px 60px ； 表示：上 右 下 左 取值；
盒子模型在调试工具里面颜色显示
橙黄色 margin
黄色 border
浅绿色 padding
浅蓝色 内容width height
关于导航布局每一个小盒子的宽度问题
做导航布局的时候一般每一个小盒子的宽度是不一样，而且两边距离是一样的，所以我们不能设置固定的宽度
解决：我们可以直接设置小盒子的padding-left和padding-right，这两个值可以合并书写，padding的两值取法--- padding:上下为0 左右设置想要的值；
外边距margin（理解强制记忆）
作用
拉开盒子和盒子之间的距离
Margin设置不同方向的外边距：
margin:30px; 四个方向的外边距都是一个值；
margin-left:40px; 设置左边的外边距；
margin-right:40px; 设置右边的外边距
margin-top:40px; 设置距离顶部的外边距
margin-bottom:40px; 设置距离底部的外边距
取值的个数不同表示意思不同：
margin：30px； 表示四个方向的取值都一样；
margin：30px 60px； 表示：上下 左右 取值；
margin：30px 50px 60px； 表示：上 左右 下 取值；
margin：30px 40px 50px 60px ； 表示：上 右 下 左 取值；
如何让盒子水平居中（强制理解）
条件：
01 盒子必须要有宽度，显示模式尽量是块元素；
02 设置左右外边距为auto
书写方式
方法1：margin-left:auto; margin-right:auto;
方法2：margin:auto;
方法3：margin:0 auto; 前面的0不一定是固定的，它表示margin-top和margin-bottom，可以根据需求进行调节；
text-align文本居中显示和margin：auto；的区别（理解记忆）
01、text-align是让盒子里面的文本和行内元素或者行内块元素居中显示；
02、margin左右设置为 auto让块元素盒子居中显示；
插入图片和背景图片区别（了解）
插入图片占位的内容，背景图不占位的装饰
01、插入图片一般都是以内容出现是经常更改，背景图片是用来进行装饰的一般不经常更改，所以我们产品图和内容图片用插入图片，一些小的修饰要陪你过背景图；
02、插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；/03、背03、景图片移动位置用背景图片额度定位background-position进行设置；
清除元素默认的内外边距
1、*{marin:0；padding:0; } 清除所有元素的默认边距和默认样式；
2、行内元素尽量不要设置垂直方（上下）向内外边距，因为行内元素设置了margin-top、margin-bottom和padding-top、paddinig-bottom是不显示效果；
并列垂直外边距合并（理解记忆）
环境
如果两个盒子上下垂直排列，给上面的盒子设置margin-bottom，给下面的盒子设置margin-top，两者谁的取值大就显示谁的？
解决方案
只设置一个，我们只需要给上面的盒子margin-bottom或者给下面的盒子给margin-top；
嵌套垂直外边距合并（重点）
问题描述（环境）
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
方案1：给父级盒子添加border-top为1px，划分父级和子级边缘（不建议使用）
方案2：我们直接将子级的margin-top取消，然后设置父级的padding-top，注意加了padding会撑大盒子，需要加多少减多少；（酌情使用）
方案3（强制记忆）：给父级盒子设置overflow: hidden;强制区分父级和子级的关系；
圆角属性border-radius
取值
正圆：想要设置正圆我们必须是一个正方形，然后设置border-radius:50%;
=====
胶囊形状：形状应该是一个长方形，我们只需要设置border-radius的取值为长方形的高度的一半；
圆角矩形：形状可以是长方形也可以是正方形，我们只需要设置border-radius的取值为固定的像素值，一般圆角的取值是5px-20px之间；
border-radius: 8px;
border-radius取值个数详解
一个值：表示四个角都是一样的
两个值：对角，border-radius：左上角和右下角 右上角和左下角；
border-radius: 30px 80px;
三个值：border-radius：左上角 右上角和左下角 右下角；
border-radius: 30px 150px 80px;
四个值：顺时针设置border-radius：左上角 右上角 右下角 左下角 ；
border-radius: 30px 150px 80px 10px;
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/ 外阴影；
实际工作中常用的设置（强制记忆）
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色；
为什么要用定位
将元素定到某一个位置或者其他元素的上面，位置可以任意更改，完全脱了文档流；
定位的基本构成
定位=定位模式+边偏移（left、right、top、bottom）
定位的精髓：利用更改方向英文来进行位置改变设置；
边偏移
left、right 控制左右的位置
top、bottom 控制上下的位置
定位模式
定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
相对定位是参照自己原来的位置进行定位的，原来占有的位置不会改变还存在；
参照物：自己
自己本身原来的位置
特点
相对于自己为参照物进行位移，属于占位定位，盒子仍然在标准流里面；
注意：一般情况下不会单独使用会配合绝对定位进行使用；
绝对定位：position:absolute;
注意:绝对定位完全脱离了文档流，原来的位置就被其他的盒子占有了；
参照物：
01 如果父级没有定位默认的参照物就是浏览器
02 如果父级有定位参照物就是父级元素
绝对定位的参照物选取（重点）
绝对定位的参照物默认以父级为主，如果父级没有定位就一层一层往上找祖先盒子，如果找不到有定位的祖先盒子就以浏览器为参照物；
注意：父级的定位可以是除静态定位以外任何一种定位形式；
子绝父相（重点）
为什么要用子绝父相？
相对定位是占位的定位，绝对定位是不占位的定位，实际工作中我们需要不改变父级元素原来占有的位置，如果使用绝对定位的话父级元素占有的位置会被其他盒子占有，影响我们整体布局，所以我就用相对定位进行占位的定位；
应用
子级绝对，父级相对，父级盒子定位了，但是依然占位，不会影响其他盒子的布局；
固定定位： position:fixed;
参照物：电脑屏幕（可视窗口）；
特点：
固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；
让有定位的盒子水平或者垂直居中（死记硬背）
1. 如果盒子的定位模式是对定位：position:relative;相对定位，因为他没有脱离文档流，所以可以直接用margin:auto;进行居中设置。
2. 如果盒子是绝对定位或者固定位，盒子脱离了文档流：可以进行以下操作：
设置水平居中：设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；
设置垂直居中：设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；
定位元素z-index堆叠顺序
进行了定位的元素，放在最后面的盒子会压在其他盒子最上面，我们可以配合z-inde属性来调节堆叠顺序，默认取值为0，值可以取正值，负值，0；取值不带单位，值取的越大就会显示在最上面；
z-index必须配合定位属性使用
定位改变display属性
• 相对定位不会改变盒子的显示模式；
• 绝对定位和固定定位会将盒子的显示模式转化成具有行内块元素的特性；
• 行内块元素：一行共存多个，设置宽高生效，默认的宽度是由内容撑开；
• 注意：如果给了定位属性，由于元素默认的宽度是由内容撑开的，所以建议在书写定位元素的时候尽量自己设置宽度；
浮动和定位能防止外边距合并（了解）
如果盒子有嵌套关系，给子级添加了margin-top就会出现外边距塌陷，但是如果用了浮动或者绝对定位和固定定位，就不会出现这样的问题；
圆角的设置
圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
左上：border-top-left-radius:20px;
右上：border-top-right-radius:20px;
右下：border-bottom-right-radius:20px;
左下：border-bottom-left-radius:20px；
如果4个角，数值相同 border-radius: 15px;
里面数值不同，我们也可以按照简写的形式，具体格式: border-radius: 左上角 右上角 右下角 左下角;
常见的网页布局思路
01 图文列表
一个大的div起一个class类名，此盒子的宽度是版心，里面嵌套一个ul，ul里面嵌套多个li，li的宽高是固定的，li里面嵌套a，a里面嵌套图片img，标题h4，段落p；
以下这种直接就是li里面嵌套图片img，标题h4，段落p，超链接a
关于定位
左上角 left：0； top：0；
右下角：right:0; bottom:0;
如何让盒子固定定位，随着版心盒子的放大缩小进行位置的移动；
利用固定定位将盒子定位
1. top:50%; margin-top:-盒子自己的高度的一半；让盒子在可是屏幕中垂直居中
2. 设置盒子的left:50%;让盒子的marin-left：- 版心的一半+盒子自身的宽度+想要的小缝隙距离；
如何分析效果图
01 分析我们的基本结构
02 根据分析的结构先写出大父级盒子的实体化三属性width height background
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漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
1. 特：a、浮动之后的盒子的显示模式会更改为行内块元素的特点；
b、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶端对齐；
c、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
注意：做浮动布局的盒子建议尽量都添加固定的宽高；
常见布局
左右布局(重点)
一个父级盒子嵌套两个子级盒子，给父级盒子设置固定的宽高，第一个子级盒子左浮动float:left;，第二个子级盒子右浮动float:right;
左中右布局(重点)
一个父级盒子嵌套三个子级盒子，给父级盒子设置固定的宽高，第一个子级盒子左浮动float:left;，第二个子级盒子左浮动float:left; 第三个子级盒子右浮动float:right;
如果每一个盒子之间有距离我们默认给中间的盒子设置margin:0 想要的值；
浮动布局注意点（超级重要）
01利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；
02 所有的浮动布局在效果图量取的宽高必须一模一样
关于属性继承问题（理解）
能够继承的属性就只有文字控制属性（自己在去写写）
宽和高是不能继承，但是我们的盒子如果是块元素，默认的宽度是父级的100%显示，可是这不是继承；
导航实际开发
代码框架
实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成，然后让li左浮动float:left；,最后设置相关的细节样式，将a的显示模式更改为块display:block；方便我们设置宽高去实现鼠标经过整个盒子的时候有想要的效果；
原因
01 li嵌套a语义清晰；
02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；
03 友情链接类似的小导航可以直接用a链接完成；
浮动布局特比注意点
在做浮动布局的时候一般是多个盒子进行布局，父级里面的所有的布局的子盒子都要浮动，不允许只浮动一部分；
清除浮动（重点）
环境1
标准流（默认情况下）：父级盒子嵌套子级盒子，如果不给父级盒子设置固定的高度，父级盒子默认的高度为0，但是实际的高度是子级盒子撑开的；
环境2
浮动流（浮动布局）：父级盒子嵌套子级盒子，如果不给父级盒子设置固定的高度，父级盒子里面的子级盒子设置浮动float属性，父级盒子的高度不会被撑开，就是默认的0；
这样就会影响我们后面的盒子正常显示；
造成问题的原因：
子级浮动以后脱离了标准流，不会占父级的位置，导致父级的高度 不会被撑开；
清除浮动本质：
父级盒子因为子级浮动引起内部高度为0的问题，清除福鼎之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
额外标签法（了解）
在浮动元素的末尾添加一个空的标签：例如：<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用；
父级加overflow属性法（记住重要的）
直接给父级添加overflow:hidden;，强制的撑开父级；
• overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；
• overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示；
after伪元素法（重要工作常用直接复制用就可以）
After伪元素清除浮动法实际开发中推荐使用：
/*声明清除浮动的样式*/
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
双伪元素清除浮动（了解）
/*声明清除浮动的样式*/
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2