前端全栈学习笔记第四天 - CSS

落日映苍穹つ 2021-09-17 15:04 368阅读 0赞

之前很杂的把前端几乎学了一遍，从html,css，h5,c3,js，jq，ajax，php，vue，微信小程序，微信小游戏，three.js,node，mongodb现在再系统的学一遍，为明年实习打下扎实的基础，简单的就不再赘述。先看一下第四天的学习路线

第四天的学习

第一个重头戏是标签的类型(显示模式)

第二个是css三大特性

第三个是css背景

一 ：标签的显示模式：display

块级元素：block

行内元素：inline

行内块级元素：inline-block

快元素：通常都会独占一行或多行，可以对他进行设置长，宽，对齐等属性，用于网页布局和网页结构的搭建

常见的快元素<h1>-,<h6>,<p><div>,<ul>,<li><ol>,div是最常见的快元素

行内元素：不占独立的 区域，一般靠自身的文字大小和图像尺寸来支撑结构，一般不可用设置长，宽，对齐等属性，常用于控制页面中文字的样式

常见的行内元素：<a> ,<strong> <b>,<sapn>,<u>,sapn是最典型的行内元素

下面我们来对比一下行内元素和快元素

块元素特点：

1：总是从新开始

2：可以设置宽高，内边距，外边距等属性

3：默认宽度是浏览器的宽度

4：快元素可以容纳行内元素和其他快元素

行内元素的特点：

1：和相邻行内元素在一行上

2：不可用设置宽高，但是可以设置padding，margin，但是在垂直方向无效

3：默认宽度就是他自身内容宽度

4：行内元素只能容纳文本或其他行内元素，a除外

5：链接里面不能再放链接

这里着重看一下第4点：

在行内元素p里面放了一个快元素

![20190110184123534.png][]

但是在浏览器解析的时候，就会变成这样

![20190110184226195.png][]

其实行内元素和块元素也不是一成不变的，他们之间存在转化关系：

我们先来看一下几个标准的行内块元素：<img/> ,<input/>,<td>,

行内块元素的特点：

1：和相邻行内元素（行内块）在一行上，但是之间会出现空白缝隙

2：默认宽高就是他本身内容的宽高

3：宽高，行高，内外边距都可以控制

之前做的一个网页，这里出现差错，当时不知道为什么现在通过系统的学习，终于知道了，看原博文

[https://blog.csdn.net/qq\_38845858/article/details/83050656][https_blog.csdn.net_qq_38845858_article_details_83050656]

标签显示模式的转化(display)

行内转快 ： display:block;

快转行内：display:inline;

快,行内转行内块：display:inline-block；

我们先看一下行高：行高的作用就是让盒子里面的文字垂直居中，做法就是让文字的高度等于盒子的高度

我们先了解一下什么是行高

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

二：CSS三大特性

层叠性，继承性，优先级

层叠性：层叠性就是多个css样式重叠

原则是就近原则

继承性：当两个标签具有父子关系的时候，儿子一般会继承父亲的属性

优先级：这里涉及到权重问题，权重大的，优先级高，优先执行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

如果标签有自己的属性，先执行自己的，此时权重，优先级,继承都靠边站

三：css背景

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

## 下面w3c复制来的 ##

## 背景图像 ##

要把图像放入背景，需要使用 [background-image 属性][background-image]。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

## 背景重复 ##

如果需要在页面上对背景图像进行平铺，可以使用 [background-repeat 属性][background-repeat]。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body
      { 
      background-image: url(/i/eg_bg_03.gif);
      background-repeat: repeat-y;
      }

## 背景定位 ##

可以利用 [background-position 属性][background-position]改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:center;
      }

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

## 背景关联 ##

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 [background-attachment 属性][background-attachment]防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
      {
      background-image:url(/i/eg_bg_02.gif);
      background-repeat:no-repeat;
      background-attachment:fixed
      }

我们来看一个利用背景定位的小案例：

--------------------

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        a {
            width: 60px;
            height: 49px;
            display: block;
            background: url(img/a.png) no-repeat left top;
    
        }
    
        a:hover {
            background-position: left bottom;
        }
        </style>
    </head>
    
    <body>
        <a href=""></a>
    </body>
    
    </html>

本来是一张很大的图，但是给了他固定的匡高，他就会只显示一部分。当鼠标经过的时候，变换他的位置。很好的做到了切换

4：背景透明css3属性

background ： raba（0,0,0,0.1）取值范围在0-1之间

5：盒子模型：

css三大模块：盒子模型，定位，浮动，其他都是细节。

盒子模型：边框，内边距，外边距

边框：  border: 1px solid black; 记住书写顺序就ok

表格细线边框：当我们表格挨表格，很容易出现表格叠加，这时候，很粗，很难看，怎么让他变细呢，

cellpadding="0" cellspacing="0"

直的边框太难看，学一个圆角边框

border-radius: 50%;

内边距

padding：边框和内容的距离，设置padding，是从内往外撑开的

外边距

margin：边框和边框的距离

下面看个小案例：

--------------------

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>新闻列表</title>
        <style type="text/css">
        body {
            background: #f4f4f4;
        }
    
        .nav {
            width: 570px;
            height: 360px;
            border: 1px black solid;
            margin: 0 auto;
            margin-top: 230px;
            border: 1px solid #000;
        }
    
        .title {
            margin-left: 15px;
            margin-right: 15px;
        }
    
        h1 {
    
    
            margin-bottom: 0px;
        }
    
        h3 {
            padding-top: 20px;
            padding-bottom: 10px;
            border-bottom: 1px black dashed;
            margin-left: 15px;
    
        }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <div class="title">
                <h1>最新文章/New articles</h1>
                <hr />
                <h3>招聘网页设计</h3>
                <h3>招聘全栈工程师</h3>
                <h3>招聘大数据研发</h3>
            </div>
        </div>
    </body>
    
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

[20190110184123534.png]: /images/20210812/f7ecf2af947e4d69828729008b254a4b.png
[20190110184226195.png]: /images/20210812/830d48d9b5f444208ddb7d079d9be56c.png
[https_blog.csdn.net_qq_38845858_article_details_83050656]: https://blog.csdn.net/qq_38845858/article/details/83050656
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/afa2cdf9fa634463a8d438034c522e7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/ff51bb449fcf419dbfecd947b37f4831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/1fe811a4b83840298d7e198ffc561b0f.png
[background-image]: http://www.w3school.com.cn/cssref/pr_background-image.asp
[background-repeat]: http://www.w3school.com.cn/cssref/pr_background-repeat.asp
[background-position]: http://www.w3school.com.cn/cssref/pr_background-position.asp
[background-attachment]: http://www.w3school.com.cn/cssref/pr_background-attachment.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/bdb5b612750f4594a290eb979e16d717.png