一、 HTML
1. 基础标签
a span div br hr
table ul>li ol>li dl>dt>dd form input textarea label select
命名规则:
2. 浏览器私有前缀
二、 CSS
1. 选择器
书写顺序(建议)
1. 选择器
标签选择器 就比如 div span a 等标签
class类选择器常用 class=“red” .red{…}
id选择器 基本用于唯一 id=“id” #id{…}
通配符选择器 *号 选择全部标签 基本用于html 去除内外边距
属性:
1.font
- font-size
- font-family
- font-weight 字体粗细 (normal bold 100~900 400=normal 700=bold)
- font-style 字体风格 ( normal/默认 italic/斜体)
- font:综合设置 选择器{font:font-style font-weight font-size/line-height font-family} 顺序要严格遵循 不需要的就不写
2.color颜色 line-height行高 text-align 水平对齐 text-indent 首行缩进(段落前用2em) text-decoration 文本修饰(添加下划线等 underline none a标签默认带下划线 就可以用这个取消)
2. 复合选择器
-
后代选择器
父子(包含选择器) .div a{…} 用空格隔开
子元素选择器 .class>h3{…} 用于亲儿子 因为类似父子选择器(包含关系) 可能会选择到孙子等
交集选择器 p.red{…} 既是p标签class又为red
-
并集选择器
p,span{…} 标签用逗号隔开 逗号理解为 和 的意思 通常用于集体声明
链接伪类选择器 伪类选择器比如 :link{…}
这几个状态的顺序不要乱 lvha
a:link 未访问的链接
a:visited 以访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接(按下鼠标未松开状态)
开发中,a基本设定为
a{ font-weight:700; font-size:16px; color:gary; } a:hover{ color:red; }
快捷生成容器
3. 标签显示模式(一般分为块元素和行内元素)
**常见块级元素(block-level):**h1~h6 p div ul ol li等,其中div是最典型的块元素
-
特点:
比较霸道,独自占一行
高度、宽度,内外边距都可以控制
宽度默认和父级一样宽 100%
是一个容器及盒子,里面可以放行内或者块级元素
-
注意:
只有 文字 才能组成段落,因此p里面不能放块级元素,特别是p不能放div
同理 还有h1~h6 以及 dt这些都是文字类块级标签,里面也不能放块级元素
常见行内元素(inline-level): a strong b em i del s ins u span等 ,其中span是最典型的行内元素
-
特点:
相邻行内元素在一行上,一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
-
注意:
链接里面不能再放链接
特殊情况 a 里面可以放块级元素,但是给 a 转换一下成块级元素最安全
行内块元素(inline-block): img input td 可以对它们设置宽高和对齐属性,也被称为行内块元素
- 特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度、行高、内外边距都可以控制
标签显示模式转换
- 块转行内:display:inline;
- 行内转块:display:block;
- 块、行内元素转行内块:display:inline-block
行高=上距离+内容高度+下距离 利用行高等于盒子的高度,可以让文字垂直居中
4. CSS背景
背景颜色(color)
background-color:颜色值; 默认为transparent 透明的
背景图片(image)
background-image:none | url (url不要加引号)
eg: background-image:url(images/demo.png)
背景平铺(repeat)
background-repeat:repeat | no-repeat | repeat-x | repeat-y
背景位置(position)重点
background-position:length || length
background-position:position || position
-
注意:
-
必须先指定background-image属性
-
position 后面是x坐标和y坐标,可以使用方位名词或者精确单位。
-
如果只指定了一个方位名词,另一个值默认居中,为50%。
-
如果只指定一个数值,那该数值用于x坐标,另一个默认是y坐标,默认居中。
-
如果指定两个值,两个都是方位名字,则两个值前后顺序无关,比如left,top和top,left效果一样
-
如果指定两个值,精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标。
实际工作中,用的最多的就是背景图片居中对齐。
-
背景附着
背景附着就是解释背景是滚动的还是固定的。
background-attachment:scroll | fixed
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background:transparent url(image.jpg)repeat-y scroll center top ;
背景透明(CSS3)
前三位色值,最后一位透明度。
background:rgba(0,0,0,0.3)
5. CSS三大特性
-
CSS层叠性
原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。
样式不冲突,不会层叠
-
CSS继承性
-
概念
子标签会继承父标签的某些样式,如文本和色号
想要设置一个可继承的属性,只需要将它应用于父元素即可
简单理解子承父业
-
注意
恰当的使用继承可以简化代码,降低CSS样式的复杂性,如果很多子元素,那只需要给他们的父元素进行绑定样式就好
子元素可以继承父元素的样式**(text-、font-、line-这些元素开头的可以继承,以及color属性)**
-
-
CSS优先级(重点)
概念:
定义CSS样式时,经常会出现两个或多个规则应用在同一个元素上,此时,
- 选择器相同,则执行层叠性
- 选择器不同,就会出现优先级的问题
-
权重计算公式
div{ background-color: aqua!important; } #red{ font-size: 300; } .black{ color: #000; } a:link{ color: aqua; }
- 权重叠加
**继承的权重是0**
```
<style>
//1.此时选中了p标签,所以计算权重,p标签为#aaa;
.demo p{
color:#aaa;
}
//2.此时未选中p标签,所以不计算权重,p标签为color: #ccc;
.demo {
color: #fff;
}
p{
color: #ccc;
}
</style>
<div class="demo">
<p>123</p>
</div>
```
2. 盒子模型(盒子模型、浮动、定位)重点
1. 盒子模型(Box Model)
1.1 基础知识
组成:元素的内容、边框、内边距、外边距
-
border(边框)
border:宽 风格(none/solid实线/dashed虚线/dotted点线) 颜色
border:1px solid red
-
盒子边框写法总结表
在设置表格间距合并时,可以使用cellsapcing=“0”,但是会发生相邻的像素重叠,导致线变得比较粗深,表格的细线边框可以通过设置CSS属性
//collapse合并的意思 可以消除上述问题 table{ border-collapse:collapse;}
-
padding(内边距)
内边距会撑开原本的盒子,因此在撑开时,同时应该在盒子原本大小上进行减法
特殊情况,如果盒子没有宽度,则不会撑开盒子
padding:上 左右 下 padding: 上 右 下 左
-
margin(外边距)
margin:上 左右 下 margin:上 右 下 左
-
居中对齐
让块级盒子居中水平对齐,1.必须有宽度,2.左右外边距设置为auto。3.如果要让盒子里面的文字居中对齐可以设置 text-align:center;该属性同时也可以让行内元素和行内块居中对齐
-
背景图片和插入图片的区别
1.想要在盒子内移动图片的位置,那么就使用背景图片,可以设置background-position:0 0; 但是插入图片就只能利用margin或者padding 这样会改变盒模型的大小,不合适。
-
清除元素的默认内外边距(重要)
*{ padding:0; margin:0; }
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
-
外边距合并
-
相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并(也称为外边距塌陷)。
解决方法:尽量只给一个盒子添加margin值
-
嵌套块元素垂直外边距的合并(塌陷)
-
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
-
父元素的上外边距会与子元素的上外边距发生合并
-
合并后的外边距为两者中的较大者
解决方案:
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
- 还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。
-
-
-
去除列表默认样式
//li的默认样式去除li{ list-style:none; }
//块元素去除默认内外边距*{ padding:0; margin:0;}
//关于a标签//去除默认样式a {text-decoration:none;color: black;}a:hover{text-decoration:none; cursor:pointer}/*a标签鼠标经过mouseover时的样式*/a:link{text-decoration:none; cursor:pointer;} /*a标签未访问时的样式*/a:visited{text-decoration: overline ; cursor:pointer}/*a标签访问过之后样式*/a:active{text-decoration:overline;cursor:pointer}/*a标签鼠标按下mousedown时的样式*///其中,a:visited是与URL有关,而与单个的a标签无关
//去除Button默认样式button{ border:none}
-
CSS3(扩充)
-
圆角边框
//这个值,是根据正方形的半径设置的。比如正方形边长为200,标出中心点,那么半径即为100;设置border-radius:100;就行。但是有些数字不想计算,也可以直接设置50%。border-radius:length;//让正方形变圆形border-radius:50%;//如果是长方形,一般设置为盒子高度的一半,就不要设置百分比了
-
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
-
2. 浮动(float)
- CSS布局的三种机制,普通流在布局中的特点、为何用浮动、如何清除浮动
2.1 CSS布局的三种机制
2.1.1. 普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列;
- 常用元素:div、 hr、 p、 h1~h6、 ul、 ol、 dl、 form、 table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘,则会自动换行。
- 常用元素:span、 a、 l、 em等
2.1.2浮动
- 让盒子从普通流中浮起来(脱离标准流,漂浮在标准流盒子上方,三维结构的上方)
- 浮动的盒子,不占有原来的位置,俗称“脱标”
- float属性会改变display属性。浮动元素会生成一个块级框,而不论它本身是何种元素,生成的块级框和我们前面的行内块极其相似。
-
如何让多个盒子(div)水平排列成一行
- 可以使用行内块 inline-block ,但是这个有缺陷,会导致盒子之间有空白缝隙,并且不好处理该问题。同时,转换行内块,并不能做到盒子左右对齐
-
如何让两个盒子左右对齐
//浮动(float) 属性值:none left right选择器{ float:属性值;}
-
清除浮动
原因:因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就会影响下面的标准流盒子。
本质:清除浮动就是为了解决父级元素因为子级元素浮动引起内部高度为0的问题。
方法:清除浮动之后,父级就会根据子盒自动检测高度。父级有了高度,就不会影响下面的标准流。
1.//clear属性用于清除浮动 //属性值 left 不允许左侧有浮动元素(清除左侧浮动的影响) //属性值 right 不允许右侧有浮动元素(清除右侧浮动的影响) //属性值 both 同时清除左右两侧浮动的影响(实际工作中,多用both) 选择器{ clear:属性值;} //额外标签法(隔墙法)是W3C推荐的做法,是通过在浮动元素末尾添加一个空的标签<div style="clear:both"></div>,或者其他标签br等也可以 2.//父级添加overflow属性方法可以给父级添加:overflow 为 hidden | auto | scroll 都可以实现优点:代码简洁缺点:内容增多,容易导致内容被隐藏,无法显示需要溢出的元素 3.//使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版,好处就是不用单独加标签了在父级元素加上clearfix类名就可以了这个:after写在css其实就是在dom结构树上,多添加一个不可见的标签。 方法: .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ //IE6、7专有 *zoom:1;} 优点:符合闭合浮动思想 结构语义化正确 缺点:由于IE6/7不支持:after,使用zoom:1会触发hasLayout4.//使用双伪元素清除浮动 就是前后各加一个不可见的标签嘛 .clearfix:before,.clearfix:after{ conten:""; display:table;} .clearfix:after{ clear:both;}.clearfix{ *zoom:1;}
-
总结
什么时候使用清除浮动?
基本满足下面三个标准,就需要使用了。
2.1.3定位
-
将盒子定在浏览器的某一个位置——CSS离不开定位,尤其是到使用 JS 特效时
-
理解
- 为何用定位
- 定位的4种分类
- 四种定位的特点
- 子绝父相
-
边偏移
通过偏移来移动位置
-
定位模式(position)
通过position属性定义元素的定位模式
选择器{ position:属性值;}
-
static(静态定位)
标准流的默认定位方式,无定位的意思。
-
relative(相对定位)——重要
- 相对定位是元素相对于它原来在标准流中的位置来说的。
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
-
absolute(绝对定位)——重要
- 绝对定位是元素相对于他父级元素 来设置元素的位置
- 完全脱标——不再继续占有原来的位置
- 父元素没有定位,则以浏览器(document)为准定位(所以经常会使用子绝父相)
- 绝对定位是元素相对于他父级元素 来设置元素的位置
-
fixed(固定定位)——重要
- 固定定位是绝对定位的一种特殊形式
- 完全脱标——不占有位置
- 只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位是绝对定位的一种特殊形式
-
定位(position)的扩展
-
绝对定位的盒子居中
因为绝对定位的盒子会完全脱标,所以使用margin:auto;无效
//left 设置边偏移 父盒子自身的一半//margin-left 设置 margin-left往左减去自己本身宽度的一半 所以为负值选择器{ left:50% margin-left:-100px}
-
堆叠顺序(z-index)
想要让哪个盒子最上 可以通过设置
//数值越大,层级越高选择器{ z-index:数值;}
z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
-
定位改变display属性
- 可以用inline-block转换为行内块
- 可以用浮动float默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
- 绝对定位和固定定位也和浮动类似,默认转换的特性 转换为行内块。
所以说,一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。
注意:
浮动元素、绝对定位(固定定位)元素的,都不会触发外边距合并的问题,也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题。
-
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: red;
}
li{
list-style: none;
}
.father{
position: relative;
height: 486px;
width: 671px;
margin: 10px auto;
background-color: pink;
}
.arr_l{
position: absolute;
height: 25px;
width: 25px;
background-color: yellow;
top: 50%;
left: 0px;
text-align: center;
line-height: 25px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.arr_r{
position: absolute;
height: 25px;
width: 25px;
background-color: yellow;
top: 50%;
right: 0px;
text-align: center;
line-height: 25px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.cir{
position: absolute;
background-color: aqua;
width: 150px;
height: 30px;
bottom: 0px;
left: 50%;
margin-left: -75px;
border-radius: 15px;
}
.cir li{
float: left;
background-color: aliceblue;
height: 20px;
width: 20px;
margin: 5px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="father">
<a href="#" class="arr_l"><</a>
<a href="#" class="arr_r">></a>
<ul class="cir">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
定位小结
3. CSS高级技巧
1.元素的显示与隐藏
-
display 显示(重点)
// 隐藏对象 并且不再保留位置display:none// 转换对象,并且显示对象display:block
-
visibility 可见性
// 对象可视visibility:visible;// 对象隐藏 , 继续保留位置visibility:hidden;
-
overflow 溢出 (重点)
// 属性值// visible(不剪切内容也不添加滚动条)// hidden(不显示超过对象尺寸的内容,超出部分隐藏掉)// scroll(不管超出内容否,总是显示滚动条)// auto(超出自动显示滚动条,不超出不显示滚动条)
-
总结
2.CSS用户界面样式
-
鼠标样式 cursor
<ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是禁止</li></ul>
-
轮廓线 outline
outline:outline-color || outline-style || outline-width//常用<input type="text" style="outline:0;">
-
防止拖拽文本域 resize
<textarea style="resize:none;"> </textarea>
3.vertical-align 垂直对齐
- 有宽度的块级元素居中对齐,使用margin:0 auto;
- 让文字居中对齐,是text-align:center;
vertical-align 垂直对齐,它只针对行内元素或者行内块元素。
vertical-align : baseline | top |middle | bottom
主要用于图片搭配文字对齐,还可以用于去除图片底侧空白缝隙;关于空白缝隙问题,也可以将元素设置为块级元素display:block‘
4.溢出的文字省略号显示
-
white-space
-
text-overflow
-
总结三部曲
//先强制一行内显示文本white-sapce:nowrap; //超出的部分隐藏overflow:hidden; //文字用省略号代替超出的部分text-overflow:ellipsis;
5.CSS精灵技术
-
background-image、background-repeat、background-position
-
精确测量,确定图片大小及其位置
-
背景定位基本都是负值
-
滑动门
<style>
/*1. a 是 设置 左侧 背景 (左门)*/
a {
/*因为我们是滑动门,左右推拉 跟文字内容多少有关系,此时需要用文字撑开盒子, 就要用到行内块*/
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
margin: 100px;
padding-left: 15px;
color: #fff;
}
/*2. span 是设置 右侧 背景 (右门)*/
a span {
display: inline-block;
height: 33px;
/*一定注意 span 需要背景图片 右对齐*/
background: url(images/to.png) no-repeat right top;
padding-right: 15px;
}
/*3 因为整个导航栏都是 链接 所以 a 要包含 span */
</style>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
6.三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*我们用css 边框可以模拟三角效果*/
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
p {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
//下面两句是为了照顾兼容性
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
三、 HTML5
1. H5新增语义化标签
新增语义化标签:
<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:块级标签
<aside>:侧边栏标签
<footer>:尾部标签
新增多媒体标签:
<audio>:音频 属性:autoplay(加载完毕,立即播放) | controls(显示播放控件) | loop(结束后重新开始播放) | src
<audio src="文件地址" controls="controls"></audio>
<video>:视频
video标签常见属性
新增input表单、表单属性
四、 CSS3
1. 选择器
1.1 属性选择器
button[disabled]{ cursor:default;}
1.2 结构伪类选择器
ul li:first-child{ color:#ccc;}
注意:n可以是数字、关键词和,比如 even 是偶数, odd 是奇数
1.3 伪元素选择器
div::before{ content:"在原本的div前加上我这段文字"}div::after{ content:"在原本的div后加上我这段文字"}
2. 转换
2.1 2D 转换
写在前面 为了看出变化过程 可以添加 transition属性
// 谁使用 谁添加transition:all 0.4s;
**转换(transform)**是CSS3中具有颠覆性的特性之一,可以实现元素的位移,旋转,缩放等效果。
1. 2D转换之移动 translate
2D移动时2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
transform:translate(x,y);transform:translateX(n);transform:translateY(n);
注意:
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的 优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
2. 2D转换之旋转 rotate
2D旋转指的是让元素在2纬平面内顺时针或逆时针旋转。
transform:rotate(度数)
注意:
- rotate里面跟度数,单位是deg
- 角度为正时,顺时针,负时,为逆时针。
- 默认选中的中心点是元素的中心点。
设置元素的中心点 transform-origin
// 注意后面的参数x 和 y用空格隔开
// x y 默认转换的中心点是元素的中心点(50%,50%)
// 还可以给x y设置像素 或者 方位名词 (top bottom left right center)transform-origin:x y;
3. 2D转换之缩放 scale
2D 缩放就是指放大或缩小
// 数字是倍数 所以不跟单位transform:scale(x,y);
参数规则如下:
4. 2D转换综合写法
一句话,顺序很重要,因此一般都是先写移动(translate),再写旋转或缩放。
2.2 动画
**动画(animation)**是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过度,动画可以实现更多变化,更多控制,连续自动播放等效果。
1. 动画的基本使用
- 先定义动画
- 再使用(调用)动画
1. 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
2. 调用动画
div{
width:100px;
height:200px;
//调用动画
animation-name:动画名称;
//持续时间
animation-duration:持续时间;
}
2. 动画的常用属性
//animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;animation:myfirst 5s linear 2s infinite alternate;
2.3 3D 转换
三维坐标系,X、Y、Z轴(垂直于屏幕,往人这边为正,往电脑里面为负)。
1. 3D位移:translate3d(x,y,z)
// Z轴出效果,需要现在父元素添加perspective属性。
// 在2D的基础上多加一个Z轴
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在y轴上移动
translform:translateZ(100px):仅仅是在z轴上移动
translform:translate3d(x,y,z):在x,y,z轴上移动
2. 3D旋转:rotate3D(x,y,z)
// 为了看出效果,需要现在父元素添加perspective属性。
// 在2D的基础上多加一个Z轴
// 关于方向,可以使用左手准则进行判断(左手招财猫,大拇指指向X轴/Y轴为正方向)Z轴就是2d的旋转效果,因为左手拇指指向自己。
translform:rotateX(45deg):仅仅是在x轴上旋转
translform:rotateY(45deg):仅仅是在y轴上旋转
translform:rotateZ(45deg):仅仅是在z轴上旋转
translform:rotate3d(x,y,z):在x,y,z轴上旋转
3. 透视:perspective
该属性需要写在被观察元素的父盒子上面的。
4. 3D呈现:transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat 子元素不开启3d立体空间 默认的
- transform-style:preserve-3d;子元素开启立体空间
- 代码写给父级,但影响的是子盒子
注:本文仅作为自己学习的经验日志…如若侵权,联系即删。