html

基础标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta chatset="utf-8">
<title>页面标题</title>
<meta content="关键字" name="keywords">
<meta content="描述内容" name="description">
</head>
<body>
<div></div>
<span></span>
<h1></h1>
<h2></h2>
<p></p>
<!-- 注释 -->

</body>
</html>

高级标签

1
2
3
4
<a href="www.yodu.xyz" style="" target="_blank" >有度</a>

属性:target="_blank" 新标签中打开
用途:超链接、锚点、电话邮件、协议限定符(可放javascript)
1
<img src="" style="width:640px" alt="图片占位符,图不显示时看到" title="图片提示符">
1
2
3
4
5
6
7
8
9
<ul type="disc">
<li>苹果</li>
<li></li>
<li>香蕉</li>
</ul>

<!--
type="disc" //符号:disc;square;circle
-->
1
2
3
4
5
6
7
8
9
10
11
<ol type="1" reversed="reversed"> 
<li>苹果</li>
<li></li>
<li>香蕉</li>
</ol>
<!--
属性:
type="1" //序号形式:1;a;A; i;I(罗马数字)
reversed="reversed" //倒序
start="2" //起始数
-->
表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form method="get" action="">
<p>
<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value=''; this.style.color=;#333'}" onblur="if(this.value=''){this.value='请输入用户名'; this.style.color='#999'}" >
<!-- 提示文案变化 onfocus获得焦点;onblur失去焦点;-->

<input type="password" name="password" value="请输入密码">
<input type="submit" >

单选:
苹果<input type="radio" name="same" value="apple" checked="checked">
香蕉<input type="radio" name="same" value="banana">

复选:
苹果<input type="checkbox" name="same" value="apple" checked="checked">
香蕉<input type="checkbox" name="same" value="banana">

下拉菜单
<select name="province">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>

<input type="submit">
</p>
</form>

表单中的按钮点击时不刷新:加上type="button"

一、问题
1
<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99"  data-type=1><span class="am-icon-pencil-square-o"></span>修改</button>

页面上有这样一个按钮,每次点击这个按钮的时候,执行完button的click事件后,会自动的重新刷新一下当前的页面。

二、原因

button,input type=button按钮在IE和w3c,firefox浏览器区别:
1、当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。
2、但是在W3C浏览器,如Firefox下就需要注意了,button标签按钮会提交表单,而input标签type属性为button不会对表单进行任何操作。

三、解决办法

为button按钮增加一个type=”button”属性。

1
<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99"  data-type=1><span class="am-icon-pencil-square-o"></span>修改</button>

规定

行级元素只能嵌套行级元素,块级元素可以嵌套任何元素;

p不能套div;

a不能套a;

html编码

1
2
3
&nbsp; 		空格
&lt; <
&gt; >

CSS

引入

行间样式

1
2
<div style="width:100px; height:100px; background-color:blue;">
</div>

页面级css

1
2
3
4
5
6
7
8
9
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head

外部css文件

1
2
3
<head>
<link rel="stylesheet" href="index.css">
</head>

基础选择器

id选择器

是唯一的;

1
2
3
4
5
<div id="only"> 123 </div>

#only {
background-color:blue;
}

class选择器

多对多,可以一对多,也可以多对一;

1
2
3
4
5
6
7
8
<div class="demo demo1"> 123 </div>
<div class="demo"> 456 </div>
.demo {
background-color:blue;
}
.demo {
color:#f40;
}

标签选择器

选中所有该标签,不管套多少层;

1
2
3
div {
background-color:blue;
}

通配符*

选中所有标签;

1
2
3
* {
background-color:blue;
}

属性选择器

选中含有该属性的元素;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[id] {
background-color:blue;
}
[id="demo"]{
background-color:red;
}

//包含字符就选中,i表示不分大小写
p[class*="main" i] {
...
}

//开头包含字符
p[[class^="main-a"]] {
...
}

//结尾包含字符
p[[class$="main-a"]] {
...
}

//鼠标事件
[OnMouseOver] {
color: burlywood;
}
[OnMouseOver]:after {
content: "JS: " attr(OnMouseOver);
}

复杂选择器

父子选择器/派生选择器;

可选中父下面所有的,不管有多少层;

1
2
3
4
5
6
7
div span {
background-color:blue;
}

.demo span em{
background-color:blue;
}

直接子元素选择器

1
2
3
4
5
6
<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
1
2
3
div > em {
background-color:blue;
}

浏览器查找标签为从右向左,第一步要遍历所有标签,找到em,然后往上查。

9947844B-B15C-4688-A15C-4EDEB7739BB9

并列选择器

多个限制条件一起,不加空格;可有多个。

1
2
3
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
1
2
3
div.demo {
background-color:blue;
}

分组选择器

一起选中

1
2
3
<em>1</em>
<div>2</div>
<p>3</p>
1
2
3
em,div,p{
background-color:blue;
}

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div:hover{
background-color:blue;
}
/*鼠标移入显示*/

伪元素,是行间元素
span::before{
content:"内容前面"
}
span::after{
content:"内容后面"
}

.item:nth-child(2){ /*选择第二个子元素*/
}
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
/*支持关键字*/
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */

选择器优先级

!important > 行间样式 > id > class | 属性选择器 > 标签选择器 > 通配符 (同级后面覆盖前面的)

css权重 (256进制)

用于计算优先级,一行的全部选择器相加,最大的优先

!important Infinity

行间样式 1000

id 100

class|属性选择器|伪类 10

标签选择器 1

通配符*、关系选择符( +, >, ~, ‘‘) 和 否定伪类:not()) 对优先级没有影响

原则总结:越具体的优先级越高,越广泛优先级越低(待验证)

属性

1
2
3
4
5
6
7
8
9
10
11
div{
text-align: left; /*对齐方式*/
text-indent:2em; /*缩进 1em= 1 font-size; */
text-decoration: none\underline\linethrough;
line-height: 30px; /*行高*/
width:100px;
height:100px; /*框高*/
display:inline/block/inline-block;/*改变元素类型*/

opacity:0.5 半透明
}

文本溢出处理

1
2
3
4
5
6
单行溢出
p{
white-space:nowrap; // 不换行;
overflow:hidden;
text-overflow:ellipsis; // 超出变省略号;
}

背景图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div{
background-image:url(aa.jpg);
background-size:100px 100px;
background-repeat:no-repeat;
background-position:100px 100px; /top left /center center
}

图下不了时显示文字:
方法一
div{
text-indent:200px;
white-space:nowrap;
overflow:hidden;
}

方法二
div{
height:0px;
padding-top:90px;
overflow:hedden;
}

元素类型

可通过display改变元素类型;

行级元素/内联元素(inline)

内容决定元素位置,不能通过css改变宽高;

span strong em a del

块级元素(block)

独占一行,可通过css改变宽高;

div p ul li ol form address

行级块元素(inline-block)

内容决定大小,可通过css改变宽高;

img

文本类元素空格

带有inline和inline-block的元素具有文本属性,空格和换行会显示出来,元素间会有一个 空格(文本分隔符)

inline-block元素内有文本时与外文本的对齐

1
<span>内文本</span> 外文本
1
2
3
4
5
6
7
span{
display:inline-block;
height:100px;
width:100px;
background-color:#ccc;
vertical-align: 10px 向下移10px /middle
}

盒子模型

CSS box-model

  • Margin(外边距) - 边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
margin塌陷

父子结构中,垂直方向的子级margin不会基于父级的顶部,就像顶部塌陷消失了一样;

解决:

1.给父级设置border-top (不好)

2.改变父级的渲染规则 bfc(block format context)

触发盒子的bfc,按情况选用:

1
2
3
4
position:absolute ;
display:inline-block;
float:left/right;
overflow:hidden; 超出父级的不显示
margin合并

同级的上下的margin会合并,不需要解决;

定位

绝对定位absolute

脱离原来的位置进行定位,升到上面的层;

相对于最近的有定位的父级进行定位,无则相对于document;

作为定位位移,可灵活切换参照;

1
2
3
4
5
6
7
8
div{
position:absolute;
left:200px;
top:300px;
width:100px;
height:100px;
background-color:blue;
}

相对定位relative

保留原来位置进行定位,升到上面的层;

相对与自己原来位置进行定位;

作为定位基准

1
2
3
4
5
6
7
8
div{
position:relative ;
left:200px;
top:300px;
width:100px;
height:100px;
background-color:blue;
}

固定定位fixed

不随页面滚动;

居中

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
position:absolute ;
left:50%;
top:50%;

width:100px;
height:100px;
background-color:blue;
}

div{
margin:0 auto;
}

层 z-index

默认层为0,相对于屏幕向外为正轴,值越大越靠近人;

浮动模型

float

浮动元素产生浮动流,所有产生了浮动流的元素,块级元素看不到他们;产生了bfc的元素和文本类属性元素(inline)及文本都能看到浮动元素;浮动设计的初衷是实现文字环绕效果。

就算是块级元素也会排成行;多个时,left从左往右排,right从右往左排;

47C19AE5-76A0-4192-92F7-3196FC61C111

清除浮动流

包有浮动元素的父级,边界不会包住子元素,通过清除浮动流来解决;

1
2
3
4
5
6
<div class="wraper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p></p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wraper {
border:1px solid black;
}
.content {
float:left;
color:#fff;
background-color: #333;
width:100px;
height:100px;
}
.wrapper::after{ /通过伪元素清除浮动,必须转成块级元素;
content:"";
clear:both;
display:block;
}
.p { /通过p清除浮动,要加结构,不好;
border-top:0px solid green;
clear:both;
}

39635AE8-D37B-49CC-90D5-B6438A8D2837

设置了position:abolute; float:left/right; 的会在内部把元素转换成inline-block;

flex定位

平均分布自适应缩放

如下,3个item横向平均排布

1
2
3
4
5
<div class="wrapper">
<div class="item1"></div>
<div class="item1"></div>
<div class="item2"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
display: flex;
flex-wrap: wrap;
}
.item1 {
padding: 20px; /*item的间距*/
flex: 0 0 33.333333333333336%; /*1个item的大小比例*/
}
.item2 {
padding: 20px; /*item的间距*/
flex-grow: 1; /*存在剩余空间时放大*/
overflow: hidden; /*避免内容子级撑破父级容器*/
}

技巧

图片固定比例截取和缩放

由于图片尺寸经常不一致,所以需要把图片按固定宽高比例裁剪显示,并根据屏幕尺寸自适应缩放;

1
2
3
4
5
6
7
8
9
10
11
<div class="img-wrap">
<img src="./200x200.png">
</div>
.works-item-t {
padding-bottom: 133%;
position: relative;
}
.works-item-t > img {
position: absolute;
width: 100%; height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.img-wrap {
display: block;
position: relative;
/* 实现缩放:padding的百分比基于父元素宽度,表示高度是宽度的56% */
padding: 56% 0 0;
}

.img-wrap > img {
position: absolute;
width: 100%;
height: 100%;
/*实现缩放*/
object-fit: cover;
left: 0;
top: 0;
}

实现边框与内容重叠

1
2
3
4
img {
outline: rgba(3, 3, 3, 0.1) 1px solid;
outline-offset: -1px;
}

初始化样式

改变标签的默认定义,如em改为红色;

通配符* 初始化所有标签,去掉所有的自带margin、padding;

1
2
3
4
5
6
7
8
9
ul{list-style:none;}
a{text-decoration:none;color:#002be5}
a img{border:0;} /*a 中有img时 img border为0 */
em{color:#e50000;font-style:normal;}
*{
padding:0;
margin:0;
text-decoration:none;
}

滚动条和撑满显示

当子元素尺寸大于父元素时,显示滚动条;当子元素小于父元素时,撑满包裹的父元素

1
2
3
<div class="wrap" v-dragWidth>
<div class="son">son. . . . . . . . . . . . .. . . . . . . . . . . . .</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap {
width: 600px;
height: 100px;
background: #eef;
overflow-x: auto; //超出时显示滚动条
}

.son {
width: fit-content; //width小于min-width时将显示min-width的值
min-width: 100%; //小于时撑满父元素
height: 50%;
background: #ffe;
white-space: nowrap;
}

效果如下:

image-20190701220416345

image-20190701220447752

参考:

CSS的width、max-width和min-width

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

前后添加内容

1
2
3
4
5
6
7
.lfr-panel-title:after{ 
content: "links";
}

.lfr-panel-title:before{
content: "links";
}

开发方式

模块化

先定义功能(css),后选配功能,可模块化

555AE1B1-10CD-429E-850A-8139383A29B4

规范

缩进:html、css、js 统一2个空格;

js中字符使用单引号‘string’;