day02

今天学了什么

1.盒子模型

1.1 margin,padding 的传参

margin:0;  //四个方向都改变
margin:0 10px; //top,bottom为0px;left,right为10px
margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;

1.2 box-sizing

当盒子模型给属性 box-sizing: border-box
设置border,padding 他的宽高不发生改变
默认值： box-sizing: content-box；

box-sizing: border-box;

2.HTML标签的分类

• 2.1块标签：

特点：

- 1.独占一行
- 2.能够设置宽高

div,h1~h6,p,ul,li,dl,dt,dd
display:block;

• 2.2内联标签：

特点:

- 1.并排显示
- 2.不能设置宽高
- 3.不能设置 margin-top,margin-bottom

a,span,em,strong
display:inline-block

2.3内联块

特点：

• 1.并排显示
• 2.可以设置宽高

button,img,input
display:inline-block

2.4水平居中

display:block;
margin-left:auto;
margin-right:auto;

3.css选择器

<p class=”test” id=”first”>hello world</p>
<h4>标题</h4>

3.1.元素选择器

p{color:pink}

3.2.class选择器

.test{color:yellow}

3.3.id选择器

#first{color:blue}

3.4.分组选择器

p,h4{background:gray}

3.5.后代选择器

div>span{} //选取div所有子元素为span的标签
div span{}  //选中div之后的所有子元素span

3.6.兄弟选择器

div+p{}//选取紧邻div之后的第一个兄弟元素
div~p{}//选取紧邻div之后的所有兄弟元素

3.7伪类选择器

div:hover{} //鼠标悬浮渲染效果
input:focus{} //鼠标悬浮获取焦点

3.8伪元素

":before" 伪元素可以在元素的内容前面插入新内容

p:before{
  content:''
}

":after" 伪元素可以在元素的内容之后插入新内容。

p:after{
 content:''
}

3.9.属性选择

div[class='test']{}

3.10选择器优先级

元素选择器<class选择器<ID选择器<!important

4.css基本样式

4.1css背景

4.1.1背景基本属性

背景颜色:background-color：red;
背景图片:backgorund-image:url();
背景重复:background-repeat:no-repeat,repeat-x,repeat-y;
背景吸附:background-attachment:fixed | scroll
背景位置:background-position: x y

div {
 width: 100px;
 height: 100px;
background-color: #eee;
background-image: url("images/icon1.png");
background-repeat: no-repeat;
background-position: center center;
}

4.1.2简写background:

color image repeat position

div{
 width: 100px;
 height: 100px;
background: #eee url("images/icon1.png") no-repeat center center;
}

4.1.3背景图片大小

background-size属性指定背景图片大小。
background-size: x y;
x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最>小大小。
相当于background-size:100% 100%;

background-size:cover;
background-size: 100% 100%;

4.2 css本文

text-align文本对齐方式

text-align: right|left|center //左、右、中对齐

text-decoration文本修饰

text-decoration：none// 关闭文本修饰
text-decoration: underline //下划线
text-decoration:overline   //上划线
text-decoration:line-through //中间贯串线

text-indent文本缩进(块标签)

text-indent:2em;
text-lndent:20%;

text-transform文本转换

text-transform:uppercase //大写
text-transform:lowercase  //小写
text-transform:capitalize //首字母大写

4.3. css字体

4.3.1字体系列

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

p{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif}

4.3.2字体大小

font-size:14px;

4.3.3字体风格

font-style:normal //正常
font-style:italic //斜体

4.3.4字体粗细

font-weight:normal | bold | lighter
取数值：100~900；

4.3.5行高

line-height

4.4css链接

4.4.1链接的四种状态

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

若单独设置几个链接，必须遵守如下规则：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

4.5雪碧图

• 原理：把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量
• 优点：
  1.减少加载网页图片时对服务器的请求次数
  2.提高页面的加载速度

3.减少鼠标滑过的一些bug

• 不足:
  1.CSS雪碧的最大问题是内存使用
  2.影响浏览器的缩放功能
  3.拼图维护比较麻烦
  4.使CSS的编写变得困难
  5.CSS 雪碧调用的图片不能被打印
  6.错误得使用 Sprites 影响可访问性

案例演示

雪碧图logo集合.png

**代码演示**
 div{
   width: 25px;
   height: 18px;
   background-color: black;
   background-repeat: no-repeat;
   background-image: url("images/icons_type.png");
   background-position: -57px;
}

**结果演示

结果图2.png