2020-02-23 CSS基础（三）

a链接伪类选择器

• 了解的写法：如果开发中四种都要使用，必须按照link visited hover active顺序

搜狗一下

真正开发时，一般只处理a的默认颜色和鼠标经过的颜色设置

搜狗一下

focus文本框获取光标的伪类

显示模式

块元素

1.独占一行
2.块元素时可以直接设置宽度和高度的，如果未设置宽度，默认是父元素的宽度
3.块元素可以直接设置内外边距
4.可以放置任何行内元素（span a em等）
5.不要早p h标签中嵌套div
6.代表元素：p div h标题 ul li ol dl dt dd

行内元素

1.一行可以放置多个
2.行内元素不能直接设置宽高，如果设置也不会生效，默认的宽高就是内容的宽高
3.行内元素不允许嵌套块级元素（a标签除外），行内元素最好嵌套文字或者行内元素
4.行内元素之内设置水平间距，不能设置垂直间距
5.a标签中不允许再嵌套a标签
6.代表元素：a span em strong ins b s u i

行内块元素

1.一行可以放置多个
2.可以设置宽度和高度，默认都会有自己的宽高
3.可以直接设置内外边距
4.代表元素：img input textarea select

显示模式的转换

转行内元素：display:inline;

转块元素:display:block;

转行内块元素:display:inline_block;

行高总结

line-height是设置行高的

1.当值小于的容器的高度，文字会偏上显示
2.当值等于容器的高度，文字会垂直居中显示
3.当值大于容器的高度，文字会偏下显示

背景

背景色background-color

 div {
     width: 100px;
     height: 100px;
     /* 设置背景色 为transparent 是透明色的意思  */
     /* background-color: transparent; */
     /* background-color: red; 预定义颜色*/ 
     /* background-color: rgb(250,100,0); rgb */
     /* background-color: #666666;  #666666 可以简写为 #666 十六进制的*/
     /* background-color: #666; */
     /* #f40的简写 是 #ff4400 */
     background-color: #ff4400;
}

背景图background-image

• 要给需要添加背景图的容器,当前容器必须设置宽高, 背景图不会自动撑开容器的
• 小图会显示完整 平铺(重复) 大图显示不完整
• 背景图的使用场景
  1.页面logo 装饰性的小图标 页面大的背景图

背景平铺

• 背景图片默认展示会平铺(重复显示), 可以使用background-repeat来修改
• 取值
  1.repeat; 默认值 平铺
  2.no-repeat 不平铺----- 使用的最多
  3.repeat-x 水平方向平铺
  4.repeat-y 垂直方向平铺

背景定位

• 设置背景图的方位 background-position:
  • 可以是五个方位名词组合 left top right bottom center
    1.这五个方位名词在搭配的使用的时候必须是 横向和纵向
    2.如果在设置的时候 只写了一个 第二个值 默认就是center
    3.如果使用的时候是 纯方位名词使用 是不分先后顺序的
  • 具体数值 设置背景图位置 精确的px单位 第一个值一定是横向的 第二个值一定是纵向,如果在设置的时候 只写了一个 第二个值 默认就是center
  • 组合 混搭 具体的像素值和 方位名词混合使用 第一个值一定是横向的 第二个值一定是纵向 顺序不可更改
    如果在设置的时候 只写了一个 第二个值 默认就是center

 background-position:  top center; 
 background-position: 10px 50px; 
 background-position: 50px 10px;
 background-position: center 40px;

背景附着-background-attachment

1.属性的默认值是 scroll，
2.也就是说，在默认的情况下，背景会随文档滚动。
3.fixed:背景固定 因此不会受到滚动的影响

背景联写

• background: 颜色 背景图片 背景平铺 背景附着 背景定位 推荐写法 理论上没有固定顺序 顺序可以自定义
• 注意
  1. 颜色默认值是 transparent
  2.背景图片默认值是 none
  3.背景平铺默认值是 repeat
  4.背景附着默认值是 scroll
  5.背景定位默认值是 0 0 (left top)

背景色半透明

div {
     width: 100px;
     height: 100px;
     /* 设置背景半透明  
     rgba 
     rgb三个取值是0-255
     a 取值是 0 - 1 
     */
     background-color: rgba(20,180,210,.5);
}