css的关键內容 规范流、盒子实体模型、波动、精

2021-01-20 14:51 jianzhan
1、块级元素:如:<div></div>
2、行内元素:如:<span></span>
从实际效果中看块级元素与行内元素的差别:


根据CSS的设定把行内元素变换成块级元素:




规范流:便是标识的排序方法。
<div class="style2">我的将来并不是梦</div>
<span id="st" class="style1">栏目1</span>
<span class="style2">栏目2</span>
<br />
<span class="style3 guaiji">阳光男孩</span>
<span class="style3 ">栏目3</span>
以上是标识的1个排序方法,下列是网页页面內容的展现方法,它是以标识的排序方法来展现的

这便是大家对规范流的了解(就象流水,排在前面的标识內容前面出現,排后边的标识內容后边出現)

盒子实体模型:


下面在CSS款式文档中设定边框border:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
}
.guaiji
{
display: block;
}

以上对边框的设定能够简写为:border:2px blue solid;运作实际效果1样。
下面设定内边距padding:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
}
.guaiji
{
display: block;
}

以上出現边框线不平的状况是把行内元素变换成块级元素所造成的欠佳实际效果
下面设定外边距margin
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:4px;
}
.guaiji
{
display: block;
}

要留意的是:行内元素针对一些款式的设定是不起功效的例如:margin
下应对內容设定:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:70px;
}
.guaiji
{
display: block;
}
网页页面实际效果以下:

以上发现行内元素不起功效,进1步表明行内款式针对一些款式是不适用的
波动:设定float:left;即让下面盒子靠在上面流动性盒子的左侧缘
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:40px;
line-height:40px;
vertical-align:middle;
float:left;
}
.guaiji
{
display: block;
}
网页页面实际效果以下:

设定波动以后,內容的排序已属于非规范流排序
不想对style3开展左波动,能够消除波动:
.style3
{
color: #00bbdd;
clear:left;
}
实际效果以下:

精准定位:下应对栏目1开展相对性精准定位,偏位量为top:50px;(即相对原先的部位开展偏位)
.style2
{
color: #ff0000;
position:relative;
top:50px;
}
实际效果以下:

改为肯定精准定位:
.style1
{
color: #0000ff;
position:absolute;
top:70px;
}
实际效果以下:

肯定精准定位是以其所属标识的父标识开展精准定位,假如其外面沒有其他块级元素标识则以<body></body>为父标识开展精准定位