Web实训学习-day04：css选择器、display、背景

1、CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是唯了可以选择更准确的元素标签。

1.1交集选择器

由两个选择器构成，必须满足：既有标签一的特点，也有标签二的特点。

/*交集选择器：由两个基础选择器：一个是标签选择器，一个是class选择器*/
div.content {
	color: red;
}

1.2并集选择器

/*同时选择多个选择器，中间用逗号隔开*/
p, .box, span {
    font-size: 36px;
    color: green;
}

1.3后代选择器

/*用来选择元素或元素组的 子孙后代*/
.grandf .father p {
    color: red;
    font-weight: 700;
}

1.4子元素选择器

/*子元素选择器只能选择作为某元素子元素的元素
	用大于号选择，只能找到本层的下一层的元素*/
.grandf > p {
    color: red;
    font-weight: 700;
}

2、标签显示模式（display）

2.1块级元素（block）

每个块元素通常都会独自占据一行或多整行，可以对其设置宽度、高度、对齐等属性，通常用于网页布局和网页结构的搭建

• 块元素默认的宽是父容器的100%
• 总是从新行开始
• 高度、宽度、行高、外边距以及内边距都可以控制
• 可以容纳内联元素和其他块元素

2.2行内元素（inline）

• 和相邻行内元素在一行上
• 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或者其他行内元素（a特殊）
• 行内元素有边框（border）

2.3行内块元素（inline-block）

• 默认宽度就是它本身的宽度
• 宽度、高度、行高、外边距以及内边距都可以控制

注意点：

• 对于行内块来说，如果代码有回车换行，会对页面布局产生影响

• 行内块遵循基线对齐

块级元素和行内元素分别有哪些以及块元素和行内元素的区别

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol lo dl dt dd h1 h2 h3 h4... p

1. 行内元素与块级元素的区别

   行内元素会在一条直线上排列，都是同一行，水平方向排列

   块级元素各占一行，垂直方向排列，块级元素从新行开始，结束接着一个断行

2. 块级元素可以包含行内元素和块元素，行内元素不能包含块级元素，只能包含文本或者其他行内元素

3. 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效

3.背景样式

3.1背景颜色

.box {
    width: 200px;
    height: 50px;
    background-color: rgba(255,0,0,0.5);
}

3.2背景图片

.box {
    width: 200px;
    height: 200px;
    background-image: url(链接图片的地址); // 插入图片
    background-repead: no-repeat; // 设置不平铺
}

3.3图片重复方式

.box {
    width: 200px;
    height: 200px;
    background-image: url(链接图片的地址); // 插入图片
    /*设置图片的重复方式*/
    background-repead: no-repeat; // 设置不平铺
}

3.4图片位置

.box {
    width: 200px;
    height: 200px;
    background-image: url(链接图片的地址); // 插入图片
    background-repead: no-repeat; // 设置不平铺
    /*设置图片位置*/
    /*background-position: center center;*/ 
    /*background-position: 100px 100px;*/
    background-position: 50% 50%;
    /*百分比指代是盒子和图片百分比重合的位置*/
    /*水平 垂直*/
    
    /*如果position给一个值，另外一个值是50%*/
}

简写插入图片

.box {
    width: 690px;
    height:1227px;
    border: 1px solid red;
    /*如果position给一个值，另外一个值是50%*/
    background: blue url(图片路径) no-repeat center;
}