HTML
排版标签总结
标签名 定义 说明
<hx></hx> 标题标签 作为标题使用，并且依据重要性递减
<p></p> 段落标签 可以把 HTML 文档分割为若干段落
<hr /> 水平线标签 没啥可说的，就是一条线
<br /> 换行标签
<div></div> div标签 用来布局的，但是现在一行只能放一个div
<span></span> span标签 用来布局的，一行上可以放好多个span
文本格式化标签(熟记)
图像标签img (重点)
链接标签(重点)
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
锚点定位 （难点）
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷..
<a href="#two">
base 标签
<base target="_blank" />
总结：
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
把所有的连接 都默认添加 target="_blank"
预格式化文本pre标签
所谓的预格式化文本就是 ，按照我们预先写好的文字格式来显示页面， 保留空格和换行等.
特殊字符 （理解）
总结表格
标签名 定义 说明
<table></table> 表格标签 就是一个四方的盒子
<tr></tr> 表格行标签 行标签要再table标签内部才有意义
<td></td> 单元格标签 单元格标签是个容器级元素，可以放任何东西
<th></th> 表头单元格标签 它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption> 表格标题标签 表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan 合并属性 用来合并单元格的
列表总结
标签名 定义 说明
<ul></ul> 无序标签 里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol> 有序标签 里面只能包含li 有顺序， 使用情况较少
<dl></dl> 自定义列表 里面有2个兄弟， dt 和 dd
input 常用属性
input 属性小结
属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了
label标签(理解)
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面。
textarea控件(文本域)
select下拉列表
select 中至少包含一对 option
在option 中定义selected =" selected "时，当前项即为默认选中项。
form表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。
CSS
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
引入CSS样式表（书写位置）
行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内部样式表（内嵌样式表）
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
外部样式表（外链式）
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
基础选择器总结
选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 不推荐使用 * {color: red;}
font总结
属性 表示 注意点
font-size 字号 我们通常用的单位是px 像素，一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font 字体连写 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现
综合设置顺序：选择器 { font: font-style font-weight font-size/line-height font-family;}
font-size和font-family必须有，其他省略（默认属性）。
color 表示方式 属性值
预定义的颜色值 red，green，blue，还有我们的御用色 pink
十六进制 #FF0000，#FF6600，#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
CSS外观属性总结
属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式 left center right
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none
复合选择器总结
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是> .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
块级元素的特点：
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
注意：
1、只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
2、同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
注意：
1、链接里面不能再放链接。
2、特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全（a可以嵌套div）
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个（2）默认宽度就是它本身内容的宽度。（3）高度，行高、外边距以及内边距都可以控制。
三种模式总结区别
元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
line-height
行高的测量方法：基线和基线之间的距离；
单行文本垂直居中
行高和高度的三种关系
如果 行高 等 高度 文字会 垂直居中
如果行高 大于 高度 文字会 偏下
如果行高小于高度 文字会 偏上
背景总结
属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment 背景固定还是滚动 scroll/fixed
背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; （仅建议）
CSS 三大特性
1、层叠性；
样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行那个样式。
2、继承性；
子标签会继承父标签的某些样式，如文本颜色和字号。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
3、优先性。
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题。
1）权重计算公式
标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大
2）权重的叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
注意：
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
盒子模型
盒子边框写法总结表
上边框 下边框 左边框 右边框
border-top-style:样式; border-bottom-style:样式; border-left-style:样式; border-right-style:样式;
border-top-width:宽度; border- bottom-width:宽度; border-left-width:宽度; border-right-width:宽度;
border-top-color:颜色; border- bottom-color:颜色; border-left-color:颜色; border-right-color:颜色;
border-top:宽度 样式 颜色; border-bottom:宽度 样式 颜色; border-left:宽度 样式 颜色; border-right:宽度 样式 颜色;
表格的细线边框 table{ border-collapse:collapse; } 表示相邻边框合并在一起。
padding 内边距
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
值的个数 表达意思
1个值 padding：上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ；
3个值 padding：上内边距 左右内边距 下内边距；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；
内边距产生的问题：
1、如果给设置了宽高的盒子设置内边距则会撑大盒子，需减去内边距的值，维持原来盒子尺寸；
2、如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
块级盒子水平居中
可以让一个块级盒子实现水平居中必须：
盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
插入图片和背景图片区别
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
外边距合并
(1). 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
(2). 嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案：（给子盒子设置margin-top,父盒子会随着子盒子一起掉下来）
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
去掉列表默认的样式 list-style:none;
圆角边框border-radius:length;每一个值可以为 数值或百分比的形式；矩形就只用 用 高度的一半就好了。
盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；前两个属性是必须写的。其余的可以省略。
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
普通流（标准流）
块级元素会独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等
浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
float —— 浮漏特
特点 说明
浮 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙
注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
li+a 语义更清晰，一看这就是有条理的列表型内容。
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
语法：选择器{clear:属性值;} clear 清除
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
但是我们实际工作中， 几乎只用 clear: both;
1).额外标签法(隔墙法)
<div style=”clear:both”></div>，
2).父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
3).使用after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 专有 */
4).使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
清除浮动总结
pink老师告诉你我们以后什么时候用清除浮动呢？
父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。
清除浮动的方式 优点 缺点
额外标签法（隔墙法） 通俗易懂，书写方便 添加许多无意义的标签，结构化较差。
父级overflow:hidden; 书写简单 溢出隐藏
父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
父级双伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
CSS属性书写顺序(重点)
建议遵循以下顺序：
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
定位(position)
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移
1、边偏移：top\bottom\left\right
边偏移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
2、定位模式(position)
值 语义
static 静态定位 ，不用
relative 相对定位
absolute 绝对定位
fixed 固定定位
定位小结
定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况
静态static 不脱标，正常模式 正常模式 不能 几乎不用
相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级
定位(position)的扩展
1、绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。
2、堆叠顺序（z-index）
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
3、定位改变display属性
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
圆角矩形设置4个角
border-radius: 左上角 右上角 右下角 左下角;
CSS高级技巧
1. 元素的显示与隐藏
1.1 display 显示（重点）
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置
1.2 visibility 可见性 (了解)
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
1.3 overflow 溢出(重点)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
实际开发场景：
清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
1.4 显示与隐藏总结
属性 区别 用途
display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 隐藏对象，保留位置 使用较少
overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
2. CSS用户界面样式
2.1 鼠标样式cursor
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
2.2 轮廓线 outline
outline : outline-color ||outline-style || outline-width outline: none;
2.3 防止拖拽文本域resize:none;
2.4 用户界面样式总结：
属性 用途 用途
鼠标样式 更改鼠标样式cursor 样式很多，重点记住 pointer
轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none
3. vertical-align 垂直对齐
只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐
vertical-align : baseline |top |middle |bottom
3.1 图片、表单和文字对齐
默认的图片会和文字基线对齐。
3.2 去除图片底侧空白缝隙
父盒子没有宽高，由图片（或者表单等行内块）撑开，图片下面会多出缝隙；如果父盒子有宽高，则不会出现此问题。
解决方案：
1）、给img 设置vertical-align:middle/top/bottom;图片不要和基线对齐即可；常用。
2）、给img 设置display:block;转换为块级元素就不会存在问题了，少用。
4. 溢出的文字省略号显示
4.1 white-space
white-space:normal ；默认处理方式；自动换行。。
white-space:nowrap ；强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
4.2 text-overflow 文字溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
4.3 总结三步曲（给父元素设置）
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
|
|
收藏
淘帖
踩
