前端总结HTML+CSS

html

html是什么？

html 超文本标记语言，用来描述网页的语言。不是编程语言而是一种标记语言。

web标准：

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。

web 标准的构成：

结构：用于对网页元素进行整理和分类 ---- html

表现：用于对网页元素的板式，颜色，大小等外观设置 ---- css

行为：网页模型的定义和交互 ---- Javascript

Web 标准提出的最佳体验方案：结构、表现、行为相分离

简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中

标签：

语义标签：

<h1></h1> 标题标签 h1-h6

<p></p> 段落标签

<hr /> 水平线标签

<br />换行标签

文本格式化标签：

<b></b><strong></strong>加粗

<i></i><em></em>倾斜

<s></s><del></del>删除线

<u></u><ins></ins>下划线

图像标签：

属性属性值描述

src url 路径，必填

alt 文本图像不能显示的替换文本

title 文本鼠标悬停的文本

width 宽控制图片宽度

height 高控制图片高度

border 边框给图片加边框

路径：

绝对路径：

绝对路径是指文件在硬盘上真正存在的路径

D:\Java\JavaWeb\day01\a.jpg

http://www.baidu.com/b.jpg

相对路径：

一个文件相对于另外一个文件的位置

“文件名” 文件和html文件在同一路径下。

“./文件名” 文件在html文件的下一级目录。　　

“../文件名” 文件在html文件的上一级目录。　　

链接标签：

//<a href=”url” target=”窗口弹出方式”>

_blank 在新窗口中打开被链接文档。

_self 默认。在相同的框架中打开被链接文档。

链接分类：

1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >

2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。3.空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a >

4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的 href 属性中，设置属性值为 #名字的形式，如第2集
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">第2集介绍</h3>

特殊字符：（&与字母之间没有空格，为了显示所以加上了空格）

& nbsp;空格

& lt; 小于号

& gt;大于号

表格标签：

<table>

<tr> <th>单元格内的文字</th> ... </tr>

<tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.<table> </table> 是用于定义表格的标签

2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中

3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

4.<th></th> 用于定于表格中的表头单元格，表头单元格里面的文本内容加粗居中显示

5.字母 td 指表格数据（table data），即数据单元格的内容

表格属性：

align left center right 表格相对于周围元素的对齐方式

border 1或者"" 表格的边框默认的""没有边框

cellpadding 像素值表格表框和内容的距离

cellspacing 像素值单元格哥单元格之间的距离

width 像素值或者百分比规定单元格的宽度

hright 像素值或者百分比规定单元格的高度

合并单元格：

1、确定是跨行还是跨列

2、找到目标单元格写上合并方式

3、删掉多余的单元格

跨行合并：rowspan="合并单元格的个数"

最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数"

最左侧单元格为目标单元格, 写合并代码

总结

<thead></thead>：用于定义表格的头部。

<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。

<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。

以上标签都是放在 <table></table> 标签中。

表格学习整体可以分为三大部分:

表格的相关标签

table thead body tr th td

表格的相关属性

cellspacing cellpadding width height border

合并单元格：rowspan collspan

列表

无序列表

<ul>

...

</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性

有序列表

<ol>

...

</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li>之间相当于一个容器，可以容纳所有元素
有序列表会带有自己样式属性

自定义列表

<dl>

</dl>

<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用

表单：

<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件 </form>

表单控件

转存失败重新上传取消

<label> 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.语法： <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

<select> 表单元素

<textarea> 表单元素

<textarea> 标签是用于定义多行文本输入的控件。该控件常见于留言板，评论。

cols=“每行中的字符数” ，rows=“显示的行数”

div	主要是用来布局用的没有语义一个div占一行
span	没有语义多个span 在一行显示
h1 - h6	标题标签
p	段落标签
a	超链接 href 属性里面写的是要跳转的路径
img	图片标签 src 链接的是图片的地址
ul li	无序列表 ul 里面只能嵌套 li li可以嵌套任何标签
ol li	有序列表
dl dt dd	自定义列表
form	表单属性 action 表示跳转地址 method 提交方式
input	默认type类型是text 文本
input type=“button”	按钮
input type=“text”	文本
input type=“password”	密码框
input type=“image”	表单类型的图片
input type=“fifile”	文件
input type=“radio”	单选默认选中 checked
input type=“checkbox”	复选默认选中 checked
select	下拉框
option	嵌套在select 里面选中给 option 添加 selected
label	label 元素不会向用户呈现任何特殊效果。不过他可以提高用户体验 for属性对应 input 中对应的id
table	表格
tr	行
td	列
colspan	table 的属性跨列合并
rowspan	table 的属性跨行合并div
cellspacing	table 的属性单元格和单元格之间的距离即 td 和td 之间的距离
cellpadding	table 的属性单元格和文字之间的距离即td 和文字之间的距离
b	加粗
strong	加粗
i	倾斜
em	倾斜
u	下划线
ins	下划线
s	删除线
del	删除线

css

1.布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

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 …

行内引入：<div style="这里写样式">我是一个块级的标签</div>

嵌入式：将CSS样式表放到head中用<style>标签包裹起来

转存失败重新上传取消

选择器：

标签选择器：

标签选择器{ 属性：属性值 ... }作用：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

类选择器：

.类名 { 属性1: 属性值1; ... }

1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。 2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。 3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 4.可以理解为给这个标签起了一个名字，来表示。 5.长名称或词组可以使用中横线来为选择器命名。 6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 7.命名要有意义，尽量使别人一眼就知道这个类名的目的。

多类名选择器：

1.在标签class 属性中写多个类名

2.多个类名中间必须用空格分开

3.这个标签就可以分别具有这些类名的样式

ID选择器：

id选择器{

属性：属性值 ... }

1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

3.id 选择器和类选择器最大的不同在于使用次数上。

4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器：

 * {
        属性1: 属性值1;  
        ...
    }

复合选择器:

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器：

元素1 元素2 {样式声明}

1.元素1 和元素2 中间用空格隔开

2.元素1 是父级，元素2 是子级，最终选择的是元素2

3.元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

4.元素1 和元素2 可以是任意基础选择器

子选择器：

元素1>元素2{样式声明}

1.元素1 和元素2 中间用大于号隔开

2.元素1 是父级，元素2 是子级，最终选择的是元素2

3.元素2 必须是亲儿子，其孙子、重孙之类不可以

并集选择器：

元素1，元素2{样式声明}

1.元素1 和元素2 中间用逗号隔开

2.逗号可以理解为和的意思

3.并集选择器通常用于集体声明

伪类选择器：

特点是用冒号（:）表示，比如 :hover

链接伪类选择器：

a:link 没有点击过的(访问过的)链接a:visited 点击过的(访问过的)链接a:hover 鼠标经过的那个链接a:active 鼠标正在按下还没有弹起鼠标的那个链接

:focus 伪类选择器用于选取获得焦点的表单元素(焦点就是光标，一般情况 <input> 类表单元素才能获取)

input:focus{样式声明}

转存失败重新上传取消

元素显示模式分类

写出常见的块元素和块元素的特点？

特点：1、独占一行显示

2、可以设置宽高

3、在不设置宽度的时候其宽度是父元素的100%

常见的块级元素：

div，p(不可以嵌套div),h1-h6,ol,ul,li,dl,dt,dd

转换成行内元素的方法：display：block;

写出常见的行内元素和行内元素的特点？

特点：1、多个在一行显示

2、不可以设置宽高

3、在不设置宽度的时候其宽度是有内容撑起

常见的块级元素：

a(可以嵌套除自身以外的其他标签）,span

转换成行内元素的方法：display：inline;

写出常见的行内块元素和行内块元素的特点？

特点：1、多个一行显示

2、可以设置宽高

3、在不设置宽度的时候其宽度是有内容撑起

常见的块级元素：

td ,img

转换成行内块元素的方法：display：inline-block;

css设置字体样式：

font-size :字号

font-weight：字体粗细

font-style：字体风格（加粗，倾斜）

fonnt-famliy：字体样式（微软雅黑，宋体…）

合写方式：font：font-style font-weight font-size/line-height font-family

color:设置字体颜色

text-

text-align:center 文字居中行内元素和行内块元素

text-decoration：none 取消下划线 underline下划线

text-indent：首行缩进

line-height：文字垂直居中

css设置背景颜色：

backgrond-color：背景色

backgrond-image：背景图

background-repeat：背景平铺方式（repeat默认值，no-repeat不平铺，repeat-x,repeat-y)

background-attachment :背景是否随滚动条滚动（fixed固定不动，scroll滚动默认值）

background-pasition：背景定位（1、当背景定位xy两个值都是方位名词的时候前后顺序无所谓2、当只写了一个方位名词的时候第二个值默认为center3、当两个都是准确数值的时候两者的前后顺序不可改变4、当xy使用方位名词和数值混合书写是X的方位名词只能用left right center Y的方位名词只能用top bottom center

合写方式：background：color url() repeat attachment pasition;

例子：background：pink url(images/bg.png) no-repeat fixed center 40px;

background: rgba(0, 0, 0, .3) 背景半透明

css三大特性：

层叠性:就近原则

继承性：（继承父元素的特性）父元素高度不会继承

（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

body { font:12px/1.5 Microsoft YaHei； }

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
*此时子元素的行高是：当前子元素的文字大小 * 1.5*
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级：!important>行内>id>class hover >通配符*

important声明无穷大
行内样式 1,0,0,0
ID选择器 0,1,0,0
类选择器，伪类选择器0,0,1,0
标签（元素）选择器 0,0,0,1
继承，通配符选择器 0,0,0,0

优先级注意点:

权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

盒子模型

盒子模型本质就是个盒子，它包括：外边距、边框、内边距、实际内容

边框：border

border-width 定义边框粗细，单位是px

border-style 定义边框的样式

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

border-color 定义边框颜色

边框简写：border：border-width border-style border-color；

表格的细线边框：

border-collapse: collapse; 表示相邻边框合并在一起

内边距：padding

padding: 盒子中内容距离盒子边框的距离，标签里面嵌套的都是内容(padding不会撑开盒子的)

合写：

padding：

一个值代表上下左右内边距一致

两个值的时候第一个值是上下第二个值是左右

三个值代表的顺序是上，左右，下

四个值代表顺序上，右，下，左

分写：

padding-top:上内边距

padding-bottom:下内边距

padding-left:左内边距

padding-right:右内边距

内边距会影响盒子大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

外边距:margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

margin：

一个值代表上下左右内边距一致

两个值的时候第一个值是上下第二个值是左右

三个值代表的顺序是上，左右，下

四个值代表顺序上，右，下，左

分写：

margin-top:上外边距

margin-bottom:下外边距

margin-left:左外边距

margin-right:右外边距

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）
盒子左右的外边距都设置为 auto

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

外边距塌陷

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
可以给设置浮动
可以设置绝对定位
可以设置固定定位

清除内外边距：

*{padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */ }

css其他样式

border-radius 属性用于设置元素的外边框圆角。

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

box-shadow 盒子阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow（必需）水平阴影位置，正值居右负值居左

v-shadow（必需）垂直阴影位置，正值居下负值居上

blur（可选）模糊距离

spread （可选）阴影的尺寸

color（可选）阴影的颜色

inset（可选）可以将外部阴影（outset）改为内部阴影

text-shadow 文字阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow（必需）水平阴影位置，正值居右负值居左

v-shadow（必需）垂直阴影位置，正值居下负值居上

blur（可选）模糊距离

color（可选）阴影的颜色

浮动

普通流（标准流）

标准流: 就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

浮动

浮动可以让多个块级元素一行内排列显示

第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

选择器{float:属性值;}

none 元素不浮动，默认值

left 元素向左浮动

right 元素向右浮动

特性：1.浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定浮，动的盒子中间是没有缝隙的

浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

原因：子盒子浮动，脱标，父盒子没有高度，不会被撑开，下盒子移动到下侧

清除浮动

本质：清除浮动的本质是清除浮动元素脱离标准流造成的影响，浮动的子标签无法撑开父盒子的高度

策略：闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

额外标签法：隔墙法, 就是在最后一个浮动的子元素后面添

注意：

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

清除浮动的方式

1、额外标签法

选择器{clear ：属性值}

left 不允许左侧有浮动元素

right 不允许有侧有浮动元素

both 同时清除左右两侧浮动的影响

2、父级添加 overflow 属性

overflow:hidden | auto | scroll;

3、父级添加after伪元素

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }

4、父级添加双伪元素

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

定位

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移属性

top 定义元素相对于其父元素上边线的距离。

bottom 定义元素相对于其父元素下边线的距离。

left 定义元素相对于其父元素左边线的距离。

right 定义元素相对于其父元素右边线的距离。

通过 position属性定义元素的定位模式

选择器 { position: 属性值; }

属性值

static 静态定位

relative 相对定位 相对定位并没有脱标

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

absolute 绝对定位

完全脱标 —— 完全不占位置；

父元素没有定位，则以浏览器为准定位

父元素要有定位元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

子绝父相：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

fixed 固定定位 固定于浏览器可视区的位置

固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）
- 完全脱标—— 完全不占位置；
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
  - 跟父元素没有任何关系；单独使用的
  - 不随滚动条滚动。

Sticky 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

固定定位小技巧：固定在版心左侧位置

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

堆叠顺序（z-index）

选择器 { z-index: 1; }

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

绝对定位的盒子居中

加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

定位的特殊性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

元素的显示与隐藏

display 设置或检索对象是否及如何显示

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视

visibility：hidden; 　元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

精灵图

为什么使用精灵图（目的）：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现---background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

字体图标

把下载包里面的 fonts 文件夹放入页面根目录下

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }

span { font-family: "icomoon"; }

css三角

我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

鼠标样式

cursor: default ; 小白鼠标样式(默认)cursor: pointer; 鼠标小手样式cursor:move ; 鼠标移动样式cursor:text ; 鼠标文本样式cursor:not-allowed ; 鼠标禁止样式cursor:help ; 鼠帮助样式

轮廓线

表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

防止拖拽文本域 resize

textarea{ resize: none; }

vertical-align 属性应用

vertical-align : baseline | top | middle | bottom

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

解决图片底部默认空白缝隙问题

1.给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把图片转换为块级元素 display: block;

溢出的文字省略号显示

/1. 先强制一行内显示文本/ white-space: nowrap; （默认 normal 自动换行）

/2. 超出的部分隐藏/ overflow: hidden;

/3. 文字用省略号替代超出的部分/ text-overflow: ellipsis;

多行文本溢出显示省略号

/*1. 超出的部分隐藏 */overflow: hidden;

/*2. 文字用省略号替代超出的部分 */text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;

margin负值运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

文字围绕浮动元素

浮动

行内块巧妙运用

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

html

css

猜你喜欢