Web前端–CSS

7.块级，行级，行级块

①块级标签：无论内容多少，都会独自占据一行的标签。可以通过width和height设置宽高。

​ 默认宽：与父级一样；

​ 默认高：0或者与内容一致；

例：<p></p>,<h1></h1>,<ul></ul>,<ol></ol>,<hr></hr>

②行级标签：只占自身大小的标签，不占一行，即使设置宽高也无效。

例：<font>,<b></b>,<i></i>,<a></a>

③行级块标签：只占自身大小，不独占一行，但是可以设置宽高。

例：<img/>,<input/>

注：一般情况下使用块级标签包含行级标签，不使用行级标签包含块级标签。

<a></a>标签可以包含任何标签，但是不能包含它本身。

<p></p>标签不可以包含任何块级标签。

8.Display

作用：通过display样式可以修改标签类型。

设置为行级标签：{display：inline；}

设置为块级标签：{display：block；}

设置为行级块标签：{display：inline-block；}

释放标签的空间，让标签在网页上消失：{display：none；}

9.div，span

起源：因为<h1></h1>,<p></p>,<b></b>…这些标签都有默认的样式，因此有了div，span。

①div标签：是块级标签，可以放置任何标签。

​ div标签没有任何附加属性，是一个纯净版的块级标签。

​ div主要用于网页布局。

②span标签：是行级标签。

​ 没有任何附加属性，是一个纯净版的行级标签。

​ 主要用于网页内文字的修饰。

10.盒子模型(盒模型)box-model

一个盒子我们会分为四个部分：从内到外：内容区(content)、内边距(padding)、边框(border)、外边距(margin).

标签大小 = 内容区+内边距+边框

①内容区(content):标签的内容都会存储在内容区中。(例如：文字，子标签)

width与height只是设置内容区的大小，且只适用于块级和行级标签。

如果标签的内边距和边框都没有，那么内容区大小就等于标签的大小。

②内边距：内容与边框之间的距离，会影响标签大小。

.text{ padding-left:10px; <!--内容与左边框距离10px,其余位置分别是right(右)，top(顶部)，bottom(底部)--> } .text{ padding:0px 10px; <!--前者表示内容与顶部底部的距离为0px，后者表示内容与左右边框距离10px--> } .text{ padding:10px; <!--上例以为上下左右一样，都为10px--> padding:5px 10px 15px 20px; <!--上例设置的位置分别为上，右，下，左。即为从顶部开始，顺时针设置。--> }

③边框：是标签可见框的最外围，也计算在标签大小之内。

table:{ border:1px; <!--各种用法和内边距一样--> border:outline; <!--上例为去除原有样式--> } table:{ border:1px red solid; <!--特有的简写：意为边框大小1px，红色，直线--> }

边框的样式：dotted(点线)，dashed(虚线)，solid(实线)，double(双线)，groove(槽线)。

设置四个角为圆角边框：{border-radius：10px；}

设置左上为圆角边框：{border-top-left-radius：10px；}

圆角的设置范围为0-50px。

④外边距：标签与周围标签相距的空间。(可重复)

外边距的用法和内边距相似。

margin的值可以为负值。

margin的值还可以auto(自动)，设置外边距为最大值。当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等。即为居中。

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

11.清楚浏览器默认样式

*{ margin:0px; padding:0px; }

12.浮动

文档流：是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放标签，即为文档流。

浮动：指标签脱离原来的文档流，在父标签中浮动起来。

.div1{ float:left; <!--向左浮动，其余值为right(向右浮动)，none(不浮动)--> }

块级标签和行级都可以浮动。

当一个行级标签浮动后将会自动变成一个块级标签。

当一个块级标签浮动后，宽度默认是内容的宽度。因此当一个块级标签浮动后，我们都会手动给它加上宽度。

我自己的理解是：当块级和行级标签浮动后，都可以按照行级块来对待。

注：浮动带来的问题：高度塌陷。浮动元素没有将父级元素撑开。

解决方法：①：设置高度撑开父级标签。

②清除浮动影响 ，设置后会自动将父级标签撑开为浮动标签高度。

<div style="clear:left"></div> <!--清除左浮动影响，right-清除右浮动影响，both-清除全部影响-->

13.定位(position)

定位时必须有一个参照物。

①相对定位：相对定位是以其原来位置为参照物移动，移动后原来位置还被占用(不脱离文档流)，相对定位不会改变标签类型，但是会提升一个层级。

​ 开启相对定位，可以通过left，right，top，bottom设置偏移量。若没有设置偏移量，标签位置不动。

.img{ position:relative;<!--开启相对定位--> left:100px;<!--左边框距离原位置100px--> }

②绝对定位：绝对定位是以离它最近的开启了定位的祖先标签移位，若没有祖先标签开启定位，则会以网页的边框为参照物。

​ 开启了绝对定位的标签，就会脱离原来的文档流。通过left，right，top，bottom设置偏移量，若没有设置，则位置不变。

<style> #div1{ position:relative;<!--父标签开启相对定位--> } .div2{ position:absolute;<!--子标签开启绝对定位--> left:100px;<!--设置子标签距离父标签左侧边框100px--> } </style> <div id="div1"> <div class="div2"> </div> </div>

注：一般情况开启了子标签的绝对定位都会开启父标签的相对定位。

③Z-index(设置标签的堆叠顺序)

如果定位标签的层级是一样的，则下边的标签会盖住上边的。

通过z-index属性可以用来设置标签的层级。

可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级。

层级越高，越优先显示。

对于没有开启定位的标签不能使用z-index。

若有错误，欢迎私信指正。