目录
一、HTML中元素类型的转换
1、标签的等级
(1)行内标签:可以和其他的标签(元素)在行内并排;不能设置宽和高;默认的宽度就是文字的宽度。eg: span、input、label
(2)块级标签:每个标签独占一行,不能和其他任何标签并列(同一行显示);可以设置宽高,若不设宽度则它的宽度默认为父级标签的100%
常见的块级标签: 标题标签:h1~h6 、 段落标签:p 、 列表标签:ul、ol、li 、div
2、元素类型的转换
通过CSS的display属性实现块级元素和行内元素的相互转换。
display属性的取值:
inline:将元素转换为行内元素。若元素是行内元素,则该元素的display属性的默认为inline
block:将行内元素转换为块级元素。块级元素display属性的默认值
inline-block:与inline的区别是允许元素设置宽高、对齐方式、间距等属性
二、页面布局
1、页面布局的过程
第一步:确定版心。是页面的主要内容,通常在页面中水平居中显示
第二步:分析页面中的模块(header、nav、banner、content、footer)
第三步:控制页面的各个模块(页面布局设计)
2、页面布局的常用属性
A、浮动属性 float
可以让标签在页面中浮动起来,打破传统的流式布局,使页面内容更丰富
float属性的取值:left、right、none(默认值)
(1)浮动属性的副作用
a、父级容器的背景无法显示
b、父级容器的边框不能被撑开
c、会导致margin、padding属性失效
(2)清除浮动影响(副作用)的方法
a、对父级元素设置合适的CSS高度
b、使用clear:both清除浮动
c、为父级元素设置overflow:hidden
<style>
.parent{
width: 500px;
background-color: yellow;
height: 150px;/*用第一种方法消除副作用*/
}
.clear-div{
clear: both;
}/*用第二种方法清除副作用*/
</style>
<body>
<div class="parent">
<div class="left-son">box-left</div>
<div class="right-son">box-right</div>
<div class="clear-div"></div><!--用第二种方法清除副作用-->
</div>
</body>
B、定位属性 position
(1)定位模式
a、static:自动定位(默认)
b、 relative:相对定位,相对于其原文档流的位置进行定位
c、 absolute:绝对定位,相对于其上一个已经定位的父元素进行定位
d、fixed:固定定位,相对于浏览器窗口进行定位
eg:
<style>
.d1{
width: 200px;
height: 150px;
background-color: red;
}
.d2{
width: 260px;
height: 160px;
position: relative; /*相对定位,相对于红色div下边框有50px距离,他的前面没有文本,
所以相对网页边框右移160px*/
position: absolute;/* 绝对定位,遇上一个已定位的元素之间的距离,因为d1没有被定位,
所以d2绝对定位参考body*/
}
</style>
(2)偏移量
a、top:距离顶部的偏移量
b、 left:距离左侧的偏移量
c、right:距离右侧的偏移量
d、bottom:距离底部的偏移量
C、溢出属性 over-flow
a、visible:默认值,内容不会被修剪,多余的内容会呈现在元素框之外
b、hidden:溢出内容会被修剪,并且被修剪的内容是不可见的
c、auto:在需要时产生滚动条,即自适应所要显示的内容
d、scroll:溢出内容会被修剪,且浏览器会始终显示滚动
D、层叠属性 z-index
在多元素定位时,会出现位置的重叠。
取值可以是正整数、0、负整数,默认值为0