HTML/CSS笔记整理

来源：互联网发布：开源建模软件编辑：程序博客网时间：2024/06/06 10:27

HTML/CSS部分

1、 /*清除浮动

由于浮动元素会影响到其前后的元素及父级元素width，height等属性，

解决：清除浮动，减少对其他元素造成的影响

1、为父级元素指定宽高--只适合高度固定的布局

2、在浮动元素末尾增加空div，并设置clear:both; <div style="clear:both;"></div>

3、利用父元素：伪类after实现

4、让父级元素一起浮动

5、为父元素定义 display:table;

6、为父级元素设置 overflow: hidden

2、边框绘制三角形：transparent--透明属性

3、外边距--margin允许有负值

水平的margin累加

垂直排列

1、标准流的排列，margin合并取最大值

2、特例

(1)d1浮动d2清除浮动，margin合并，以浮动元素为主

(2)d1不动，d2浮动，margin累加

(3)d1浮动，d2不动（d2在d1之下），且d1 d2之上为浏览器，d2设置上外边距，则d1与d2一起移动

4、/*标准盒子模型与怪异盒子模型

一、定义特点

标准盒子模型（严格模式strictmode，浏览器按W3C模式解析执行代码）

盒子实际占宽：width+border+padding+margin

怪异盒子模型（兼容模式quirkmode，使用浏览器自己的方式解析执行代码，由于不同浏览器解析执行方式不一样，所以称之为“怪异模式”）

盒子实际占宽：width+margin

二、如何区分

怪异模式：忽略DTD的声明，即省略网页中上面的声明

标准模式：html5 声明<!DOCTYPE html>

html4 声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

盒子模型与内容边框外边距内边距有关

/*css3新增盒子模型设置属性*/

/*box-sizing:border-box;按怪异盒子模型显示*/

/*box-sizing: content-box;按标准盒子模型显示*/

5、 /*outline不占空间，悬停时用来解决串位问题*/

/*border占空间*/

6、表单

--a、CSS获取焦点 focus

--b、form的五个属性

<!--action 提交地址

method 提交方式 get-默认 post

enctype 表单信息提交的编码方式

enctype="application/x-www-form-urlencoded" 默认

multipart/form-data 图片文件等多媒体应用

text/plain 文本传递

name 表单名

target 提交页面打开方式

-->

--c、placeholder html5提供的默认值

multiple 多选

<textarea cols="20" rows="20"></textarea> 多文本控件

<input type="hidden"> 隐藏控件

<input type="file"> 文本控件

<input type="range" value="25" min="0" mzx="100" step="3">范围选择控件

--d、HTML5新增表单

7、<!--表格

水平对齐text-align

center left right

垂直对齐

vertical-align

top middle bottom

border-spcing：20px 30px;

调整单元格边距距离：水平垂直-->

<!--如何实现表格边框1px

1、table给个颜色设boeder-spacing:1px 1px; td给个颜色

2、border-collapse:collapse表格边框合并为单一边框

-->

8. /*浏览器兼容性

css Hack(黑客)：指不同浏览器对CSS解析结果不同，

会导致相同的CSS输出页面的效果不同，

此时需要CSS HACK 来解决CSS局部兼容性问题

原理：利用书写顺序和不同浏览器对一些特定书写方法解析方式

不同而达到的效果

ie6 _

ie6/7 *

ie7及以上 !important

ie8及以上 \0

ie6-ie10 \9

ie7-ie8 >

常见兼容性问题

1、IE6、7浮动问题

一个元素浮动，后面的元素会紧随其后

(1)clear :both

(2)单独处理IE6、7

*position:absolute;

*left:0px;

*right:0px;

*z-index:-1;

2、不同浏览器默认外边距不一致(ie6、7)

body{

margin:0;

padding:0;

}

3、IE6外边距加倍问题（浮动元素）

_display:inline;

_margin-left:15px;

4、IE6、7超链接问题,省略href伪类失效

解决：不省略href=""

5、IE6不支持png

(1)png换成gif

(2)_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="img/pp1.png")

6、IE6 1光标问题

overflow: hidden;

7、透明度问题IE6-8 opacity不好使，设置filter

opacity: 0.3;（0-1）

filter: alpha(opacity=30);（0-100）

8、input padding问题（IE8 IE9？及以下内容超长时padding会消失）

解决：套个div

9、input高度问题：如没有height属性，高级浏览器会采用line-height作为高度

而IE不会采用line-height，而使用默认的高度

解决：统一高度

10、3像素bug问题

解决：图片加 display: block/vertical-align: middle

9、兼容性注意事项

1、每个浏览器都有默认的字体及大小，尽量不要小于浏览器的最小字体

2、重置 common.css defaule.css reset.css放通用代码

3、ie的条件注释（IE的if条件hack）ie10及以上不支持

<!--[if gte ie 8]>

<style>

@media all and (-webkit-min-device-pixel-ratio:0){

div{

color:yellow;

}

@-moz-document url-prefix() {

div{

color:blue;

}

</style>

<![endif]-->

<!--if ie 7 仅仅指IE7

if lt IE 7 小于7

if lte 小于等于 less than or equal

gt 大于

gte 大于等于 greater than or equal-->

10、

document.write(navigator.userAgent);

谷歌：webkit

IE ： trident--IE内核：用于解析代码以及决定如何显示

欧朋 wenkit

Safari webkit

火狐：Gecko

11、页面重定向 document.location.href="test01.html";

12、 /*css图片精灵：css sprites

是一种css图片合成技术，该方法将多个小图标合并到一张大图

再利用css的背景定位来显示的图片部分

目的：1、减少加载网页图片时对服务器的请求次数

2、提高页面的加载速度*/

13、ps图片格式

BMP 位图格式无压缩图片格式，比较大，图片清晰

jpg 有损压缩，压缩方式是去除冗余的图像和色彩数据，

不支持透明格式

GIF 可以保存背景透明格式，只能呈现256色，适合较少

色彩的图片，可做多帧动画

png 汲取了GIF和jpg的特点，压缩率高不失真

14-1、 /*垂直居中

1、单行文本

行高 line-height：200px;

2、多行文本/行级元素块级元素

方法1、 display：table-cell；

vertical-align:middle;

方法2、padding-top: 150px;

padding-bottom: 150px;

3、定位法

固定宽高：

父相对子绝对

top:50%;

margin-top:-（高的一半）px;

4、定位法

未知宽高

position: absolute;

top:50%;

transform:translateY(-50%)；

5、css3

display:flex;

flex-direction: column;

justify-content: center;

6、伪类法

14-2、水平居中：

1.text-align//文本

2.margin:0 auto;//固定宽高

3.position/margin-div宽高//固定宽高

4不固宽：display:table

margin:0 auto

套一个div：text-align:center;

5.浮动元素居中：套一个父元素；不考虑宽高；

6.不考虑宽高： position:absolute;left:0;right:0;top:0;bottom:0;

7.css3 box布局实现：

display: -webkit-box;//开启盒子模型

-webkit-box-orient: horizontal;//水平

-webkit-box-pack: center;

8,css3水平居中：

width:

-webkit-fit-content;

margin-left: auto;

margin-right: auto;

15、/*水平垂直都居中

1、固定宽高--定位法

position: absolute;

top:50%;

left:50%;

margin-top:-40px;

margin-left: -40px;

2、未固定宽高--定位法

position: absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

3、未固定宽高

display:flex;

justify-content: center;

align-items: center;

16、CSS技巧

1.连续书写字符：自动换行:word-wrap: break-word;

2.单词按照整个单词换行,单词折断：word-break: break-all-------不考虑单词完整性;

3.不让单词换行：空白格处理处理元素中的空白，在一行内显示

4.超出部分显示省略号（文本只有一行时）text-overflow: ellipsis;

5./* display: run-in;根据上下文，作为内联或块级元素显示，如果display：run-in是块级元素（）display：block，

则这个元素会变成inline属性,同时嵌入到后面的block元素中去，若display: run-in;元素后面不是block元素，则该元素保持本身属性*/

17、css2

:after

:before

css3

::after;

::before;

特点：content:(

内容可以有：

1.字符串[可以进行属性设置]

2.图片(引用多媒体;改不了宽高)

3.调用当前元素的属性；

4.可以调用计数器：counter(不用列表实现序号)

18、图片热点

rect coords="10,10,200,200"前两个值是左上角坐标，后两个值是右下角坐标

circle coords="50,50,50" 圆心坐标，半径

poly多边形

阅读全文

0 0