我在乐字节学习的第四天

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

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

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

第二个是css三大特性

第三个是css背景

一 :标签的显示模式:display

块级元素:block

行内元素:inline

行内块级元素:inline-block

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

常见的快元素

-,

,

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

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

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

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

块元素特点:

1:总是从新开始

2:可以设置宽高,内边距,外边距等属性

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

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

行内元素的特点:

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

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

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

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

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

这里着重看一下第4点:

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

我在乐字节学习的第四天

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

我在乐字节学习的第四天

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

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

行内块元素的特点:

1:和相邻行内元素(行内块)在一行上,但是之间会出现空白缝隙

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

3:宽高,行高,内外边距都可以控制

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

https://blog.csdn.net/qq_38845858/article/details/83050656

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

行内转快 : display:block;

快转行内:display:inline;

快,行内转行内块:display:inline-block;

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

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

我在乐字节学习的第四天

二:CSS三大特性

层叠性,继承性,优先级

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

原则是就近原则

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

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

我在乐字节学习的第四天

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

三:css背景

我在乐字节学习的第四天

下面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>

效果图:

我在乐字节学习的第四天

上一篇:HTML&CSS实现轮播图布局


下一篇:pytorch repeat 和 expand 函数的使用场景,区别