一、盒子类型
1.块元素
- 块元素有:
div、 p、 ul、 li、 h1-h6、 dl、 dt、 dd -
-
块元素的特点
-
- 支持全部的样式
- 如果没有设置宽度,默认为父级的宽度100%
- 盒子占据一行、即使设置了宽度
-
- 代码实例:
效果:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素</title> <style type="text/css"> body{ margin: 0; } .box, .box1, .box2{ background-color: gold; margin-bottom: 20px; } .box1{ width: 200px; } .box2{ background-color: green; width:300px; } </style> </head> <body> <div class="box">div标签</div> <div class="box1">div标签设置宽度</div> <p class="box2">p标签</p> </body> </html>
2. 内联元素
-
内联元素:
a、 span、 em、 b、 strong、 i -
-
特点
-
- 只支持部分样式:(不支持宽、高、margin上下、padding上下,要注意的是在设置pandding上下的时候背景会产生一样,布局不会改变)
- 宽度由内容决定
- 盒子并在一行
- 代码换行的时候盒子之间会产生间距
- 子元素是内联元素,父元素可以使用text-algin属性设置子元素的对齐
-
-
-
解决代码换行产生间距的方法
-
- 去掉内联元素之间的换行
- 将内联元素的复制设置fongt-size为0,内联元素自身再设置font-size就可以了
-
-
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联元素</title> <style type="text/css"> .box{ width:500px; height:300px; border:1px solid #000; margin:50px auto 0; /*居中*/ font-size:0; /*解决代码换行的间距*/ } .box a{ background-color: gold; /*不起作用*/ width:100px; height:50px; /*只有左右起作用*/ margin:100px 20px; padding: 10px 20px; /*上下会使背景色发生变化整体不会变化*/ font-size:16px; /* 解决换行产生的间距 */ } .box1{ width:500px; height:300px; border:1px solid #000; margin:50px auto 0; text-align: center; /*设置块中内容居中*/ } </style> </head> <body> <div class="box"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> <a href="#">链接五</a> </div> <div class="box1"> <a href="#">链接</a> </div> </body> </html>
效果:
3.内联块元素与类型转换
-
内联块元素:
img input 或者用display设置inline-block -
-
特点
-
- 支持全部的样式
- 如果没有设置宽高,宽高用内容决定
- 盒子并在一行
- 代码换行,盒子间会产生间距
- 子元素是内联块元素,父元素可以用text-align属性设置元素对齐
-
-
类型转换
-
-
display属性
-
- none:属性隐藏且不占位置;
- block:元素以块元素显示;
- inline:元素以内联元素显示
- inline-block:元素以内联块元素显示
-
-
-
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联块元素</title>
<style type="text/css">
.box{
width:500px;
height:300px;
border:1px solid #000;
margin:50px auto 0; /*居中*/
font-size:0;