我在乐字节学习的第四天

钟意小宝宝
99 阅读5分钟

今天是我在乐字节学习的第四天，今天也是元气满满的一天。

我们一起来回顾下今天的学习的内容，今天学习的内容比较基础，我学的也比较轻松。下面给大家分享下我一天的学习成果吧！！！！

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

第二个是css三大特性

第三个是css背景

一 ：标签的显示模式：display

块级元素：block

行内元素：inline

行内块级元素：inline-block

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

常见的快元素

-,

,

,
    ,
    • ,div是最常见的快元素

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

      常见的行内元素： , ,,,sapn是最典型的行内元素

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

      块元素特点：

      1：总是从新开始

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

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

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

      行内元素的特点：

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

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

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

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

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

      这里着重看一下第4点：

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

      img

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

      img

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

      我们先来看一下几个标准的行内块元素： ,,,

      行内块元素的特点：

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

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

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

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

      blog.csdn.net/qq_38845858…

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

      行内转快 ： display:block;

      快转行内：display:inline;

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

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

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

      img

      二：CSS三大特性

      层叠性，继承性，优先级

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

      原则是就近原则

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

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

      img

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

      三：css背景

      img

      下面w3c复制来的

      背景图像

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

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

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

      背景重复

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

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

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

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

      背景定位

      可以利用 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 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（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>

      效果图：

      img

avatar
文章
阅读
粉丝