前端相关知识(CSS)(2)(美化页面效果)

一)设置背景属性:

一)设置背景颜色:

1.1)background-color:transparent:

相当于是父亲元素的默认选项，相当于是把父亲元素的背景颜色给搬运过来了

1.2)设置背景颜色使用background-color，具体用法和color十分类似

可以使用英文单词，rgb，16进制的数字，或者是rgba

背景颜色和文本颜色不要进行设置得太接近，否则容易看不清，背景如果是深色，文本就设置成浅色，如果背景是浅色，那么文本就设置成深色

二)设置背景图片:把一张图设置成背景 

background-image: url("文件路径")

当我们设置背景图片的时候，默认是一个平铺的效果，就像是铺地砖，挨个的进行平铺

2.1)第一个例子:

 

尽量不要写width这个属性，尽量找一个小一点的图片来演示

2.2)第二个例子:

 

 2.3)第三个例子:

 

 此时在网页端啥也没有，那么怎么解决这个问题呢？

1)向div里面塞点东西 

2)增大height属性，但是当图片较小时会发生平铺；

3)此时的背景图和背景图片是可以同时进行存在的，背景图可以遮住的地方，是显示背景图的；背景图片遮不住的地方，就会显示颜色；

4)在CSS中，可以通过background-repeat来设置平铺属性，来设置背景图片的平铺效果

no-reapeat表示不平铺；

reapeat表示平铺；

repeat-x表示水平平铺；

repeat-y表示竖直平铺；

  div{
          background-color:red;
   background-image: url(hhhh.png); 
   /* 下图表示如果进行平铺的总高度或者进行平铺repeat的竖直高度再或者表示(有背景颜色之后)还不进行平铺的高度 */
   height:700px;
   background-repeat:no-repeat;
}
<div>
      这是一段话
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt in rerum aspernatur! Modi et cumque ea, error iusto deserunt? Aspernatur culpa reprehenderit quia hic modi numquam provident sunt labore atque?
 </div>

上个代码的展示效果如上，但是如果让他平铺，把no-reapeat变成reapeat那么背景图片就会直接覆盖掉背景颜色，所以此时可以设置成不平铺，但是背景图和背景颜色是可以同时存在的；

当我们显示不进行平铺的时候，背景图片是直接显示在右上角的，前提是当他不平铺的时候，可不可以把他展示在别的地方呢？

三)设置背景图的位置:当然前提是在不平铺的情况下

1)background-position(参数1，参数2)里面的参数有两个

一个是水平方向上的位置，一个是垂直方向上的位置

2)这种写法在总体上是支持三种风格的，这里面要写两个参数，如果只写一个，那么第二个默认垂直居中，例如只写一个center就表示水平居中，还默认垂直居中；

1))方向名词：top(在顶部)，left，right，bottom，center;

2))精准单位：可以写具体的数字例如background-position:10px 20px，注意中间没有分号，并且10px表示里与最左边的距离是10px，离最上面的距离是20px;

3)) 混合使用：background-position:10px center;这个就表示里最左边的距离是10，但是垂直位置居中；

4))如果指定了一个方位名词，那么第二个则默认居中，如果说参数给的是精确值，那么给的第一个肯定是x，第二个肯定是y

5))如果说给的参数是一个精确值，况且只给了一个数值，那么数值一定是x坐标，另外一个垂直居中；

background-position:0 0 表示处于最上角

div{
    background-image:url(baidu.png);
    background-color:red;
    height:600px;
    width:1000px;
    background-repeat:no-repeat;
    background-position:center,center;
 }
 

<div class="image"></div>

四)设置背景图片的大小主要也有三种写法：

1)直接写数值：

background-size:30px 30px;这就表示我们所添加的背景图片的长度是30px,宽度是30px

2)按照百分比进行设置：

千万不要设置成平铺，不然效果不明显，这个background-size中的百分数表示，这个背景图片的长度是背景颜色范围的长度的一半，宽度也是他的一半；

  div{
   background-color:red;
   background-image: url(hhhh.png); 
   /* 下图表示如果进行平铺的总高度或者进行平铺repeat的竖直高度再或者表示(有背景颜色之后)还不进行平铺的高度 */
   height:700px;
   background-repeat:no-repeat;
   background-size:50% 50%;
}
 

3)还可以使用英文单词来进行设置

垂直居中水平居中，或者直接写一个center也是表示垂直居中水平居中

background-size: center,center

4)cover和contain直接在background-size

cover表示背景图片完全填充本经颜色所占的区域，不会让当前元素露出背景色，保证背景图始终在元素之内；

contain表示不会完全占领(高度和父亲元素是一样的，宽度度会留出两个边来)，可能会露出一部分背景色；

cover表示直接填充满背景区域(宽度和父亲元素一样，高度在图片中可能就会冒出去了)

5)background这一系列属性，对于图片的处理能力来说是比image标签来说要更厉害，因此我们在实际开发中，也会经常使用background-color来进行代替image

五)圆角矩形:

HTML中的元素，默认都是矩形的

1)设置圆角矩形：border-radius，通过这个属性来设置是边框带有圆角效果，就可以把一个正方形变成圆形，数值越大，弧线越强烈；

2)网页中的元素其实都是一个一个的矩形，很多网页，表示一个头像都是圆形的

如果想得到圆形:

先得到一个正方形

假设此时正方形的宽度是200px，那么此时直接将border-radus的值直接设置成100px即可

就可以通过border-radius的值设置成50%即可，就是以宽度为基准，或者边角的长度足够大

3)如果说当前不是正方形，就是一个比较扁的矩形，此时就可以把border-radius设置成高度的一半，此时也可以实现一个类似于矩形和圆形混合的一个形状(按钮)

元素:我们可以看到页面结构和样式(前端)

控制台:我们可以查看JS打印的日志

来源:我们可以看到HTML/CSS/JS的源码

网络:查看浏览器和服务器之间的页面交互，前端后端都是需要进行查看的；

性能:页面加载的一些重要指标

根据PC端和手机端来进行设置不同的页面

下面勾上就是针对当前页面生效，不进行勾选就是针对当前页面不生效

 

5)元素的显示模式:行内元素和块级元素和行内块元素

一般来说独占一行的就是块级元素，不独占一行的就是行内元素

1)是否独占一行

2)块级元素，高度，宽度，内外边距，行高都是可以进行控制的；

行内元素，高度，宽度，行高都是无效的，左右外边距有效，上下无效，内边距都有效

3)块级元素默认的宽度就是和父亲元素是一样的，但是行内元素默认的宽度就是和本身内容是有关的，如果没有内容，那么宽度就是0了

4)块级元素可以容纳其他块级元素和行内元素，行内元素只能包含行内元素，是不可以包含块级元素的

5)虽然p标签是块级元素，但是p标签内部只能放文字和行内元素，我们一般不会使用p标签放块级元素，比如说无法设置a标签的宽度和高度

可以把行内元素想象成是一个文本，如果行内元素里面的内容多，那么这个宽度和范围就大一些，如果说行内元素里面的内容少，那么这个显示的范围就少一些

行内块元素:既可以进行设置宽高，不独占一行；

虽然可以让多个行内块元素进行水平排列，但是会有换行转化成的空格，所以我们要想实现水平布局，就要想别的办法

常见的块级元素：h1-h6，p，div，ul，li，table

常见的行内元素：span，em，strong，a

input，img既不是行内元素，也不是块级元素，是行内块元素

块级元素内部可以容纳其他的块级元素和行内元素，行内元素内部只能包含行内元素，不可以包含块级元素；

此时就可以通过CSS中的display来进行修改元素的显示模式，可以把块级元素修改成行内元素，也可以把行内元素修改成块级元素，最最常用的方法，就是把行内元素修改成块级元素

场景1:在一个大的div标签里面包含着两个小的div标签，尝试给三个div设置宽高尺寸和颜色

最终结果:两个小的div标签独占一行，并且成功的进行设置了宽度和高度

  <div class="father">
        <div class="child1">
        </div>
        <div class="child2">

        </div>
    </div>
.father{
    background-color:green;
    width:800px;
    height:800px;
}
.father .child1{
    background-color:red;
    width:300px;
    height:500px;
}
.father .child2{
    background-color: black;
    width:300px;
    height:300px;
}

—————————————————————————————————————————

场景2:div里面包含着两个span标签，我们尝试给两个span标签和div标签，进行设置宽度和高度

.father{
    background-color:green;
    width:800px;
    height:800px;
}
.father .child1{
    background-color:red;
    width:300px;
    height:500px;
}
.father .child2{
    background-color: black;
    width:300px;
    height:300px;
}
    </style>
</head>
<body>
 <div class="father">
    <span class="child1">
        11
    </span>
    <span class="child2">
11
    </span>
</div>

1)显示效果永远是这样的，因为行内元素是不可以设置宽高的，进行设置也不会显示，行内元素里面的宽度和是和内容有关系，和里面放的内容多少是紧密联系在一起的，兴许放的多，宽度和高度就会更大一些；如果标签里面啥元素也不放，文字也不放，那么这些行内元素就会消失，啥效果也没有

2)例如span标签里面是不可存放一些块级元素，例如往里面加div，li标签都是不行的

1)例如多个a标签在网页上面正常的情况下显示的结果为一行，我们想要一行有一个a标签(每一个a标签独占一行)，就可以这么写：

 <a href="#">我是一个超链接</a>
 <a href="#">我是一个超链接</a>
 a{
     display:block;
 }
 display这是就是用来改变元素的显示形式,把它设置成块级元素 

2)接下来可以给a标签设置背景颜色，把行内元素设置成块级元素，就可以设置尺寸了

 a{
     display:block;
     background-color:red;
     height:70px;
     width:70px;
 }
 <a href="#">我是一个超链接</a>
 <a href="#">我是一个超链接</a>

3)当a标签转化成块级元素之后，就可以设置宽高了，但是也不能再次一行排列了，怎样做才可以即可以设置宽高又可以一行排列；这时就必须把他转化成行内块元素了；

a{
    display:inline-block;
    background-color: red;
    width: 100px;
    height:100px;
}
 <a href="#">我是一个超链接</a>
 <a href="#">我是一个超链接</a>

但是此时方框之间会有空格，那么怎么消除这个空格呢？把两个a标签写在一行即可

display还有一个特殊的选项，叫做null，表示元素不会进行显示，将元素隐藏

虽然使用开发者工具是可以将这个元素进行显示出来的，但是在界面上并不会显示出来