标签：行内 字节 元素 学习 repeat 图像 background 第四天 属性
今天是我在乐字节学习的第四天，今天也是元气满满的一天。
我们一起来回顾下今天的学习的内容，今天学习的内容比较基础，我学的也比较轻松。下面给大家分享下我一天的学习成果吧！！！！
第一个重头戏是标签的类型(显示模式)
第二个是css三大特性
第三个是css背景
一 ：标签的显示模式：display
块级元素：block
行内元素：inline
行内块级元素：inline-block
快元素：通常都会独占一行或多行，可以对他进行设置长，宽，对齐等属性，用于网页布局和网页结构的搭建
常见的快元素
-,
,
,- ,
-
- ,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>
效果图：
标签：行内,字节,元素,学习,repeat,图像,background,第四天,属性 来源： https://blog.csdn.net/zhongyiyi11/article/details/111214252
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。