1，元素分类
1-1，块级元素（block）
html中的常用块级元素有：<div> <h1~h6> <p> <ul> <ol> <li> <form> <table>......
不过设置：display：block 就是将元素显示为块级元素：
例：
<a href="">qq</a>
<a href="">360</a>
<a herf="">google</a>
运行效果：
将元素<a>元素设置为块级元素：
a {
display: block
}
运行效果：
块级元素特点：
1、每个块级元素都独占一行。
2、块级元素可设置高度、宽度、行高以及顶和底边距。
3、块级元素在没有设置宽度的情况下和父元素的宽度一致，除非另外设置了宽度。
1-2，内联元素（inline）
常用的内联元素：<q> <a> <span> <var> <br> <strong> <em>......
既然元素可以显示为块级元素，那么块级元素当然能设置为内联元素：
例：
<h1>唐诗</h1>
<h1>宋词</h1>
<h1>三百首</h1>
运行效果：
将块级元素<h1>设置为内联元素：
h1 {
display: inline
}
运行效果：
内联元素特点：
1、和其他内联元素都在一行上。
2、内联元素不可设置高度、宽度及顶部和底部边距。
3、内联元素的宽度就是它包含的文字或图片的宽度，不可改变。
1-3，内联块状元素（inline-block）
常见的内联块状元素：<img> <input>
将联元素设置为内联块状元素：
a {
display: inline-block;
width: 100px;
height: 50px;
background-color: pink
}
运行效果：
inline-block 元素特点：
1、和其他元素都在同一行上。
2、内联块状元素可设置高度、宽度、行高以及顶和底边距。
2，盒模型
边界（margin） 边框（border）填充/*内边距*/（padding） 内容
2-1，边框
底边框：border-bottom: 1px solid red;
顶边框：border-top:1px solid red;
右边框：border-right:1px solid red;
左边框：border-left:1px solid red;
例：
h1 {
border-bottom: 2px solid red;
}
运行效果：
2-2，宽度和高度
width和height仅能设置内容的宽度和高度，而不是整个盒模型的宽度和高度
盒模型的宽度：
左外边界（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽（width）+右内边距（padding-right）+右边框（border-right）+右边界（margin-right）
盒模型的高度：
顶部边界（margin-top）+顶部边框（border-top）+顶部内边距（padding-top）+内容高（height）+底部内边距（padding-bottom）+底部边框（border-bottom）+底部边界（margin-bottom）
p {
width: 100px;
height: 50px;
padding: 20px;
border: 5px solid red;
margin:20px
}
运行效果：
2-3，填充
内容与边框之间的距离：
div {
padding: 0 20px 10px 30px /* 上 右 下 左 */
}
或
div {
padding-top: 0;/*顶部内边距为 0*/
padding-right: 20px;/*右内边距为 20px*/
padding-bottom: 10px;/*底部内边距为 10px*/
padding-left: 30px/*左内边距为 30px*/
}
若上、右、下、左的填充都相同：
div {
padding: 10px /*上下左右内边距都为10px*/
}
若上下填充一样，左右填充一样：
div {
padding: 10px 20px/*上下内边距为10px 左右内边距为20px*/
}
例：
.div {
background-color: #FF0;
padding: 10px 10px 10px 10px;
border: 3px solid #0FF;
}
.p1 {
width: 150px;
height: 80px;
margin: 0;
background-color: #0F0
}
运行效果：
图中的黄色区域便是填充区域，padding运行时，会以顶部内边距和左内边距定位！
2-4，边界
边界与边框之间的距离：
div {
margin: 0 20px 10px 30px /* 上 右 下 左 */
}
或
div {
margin-top: 0;/*顶部边界为 0*/
margin-right: 20px;/*右边界为 20px*/
margin-bottom: 10px;/*底部边界为 10px*/
margin-left: 30px/*左边界为 30px*/
}
若上、右、下、左的边界都相同：
div {
margin: 10px /*上下左右边界都为10px*/
}
若上下边界一样，左右边界一样：
div {
margin: 10px 20px/*上下边界为10px 左右边界为20px*/
}
例：
.div1 {
background-color: #ABCDEF;
border: 3px solid #00F
}
.p2 {
width: 200px;
height: 100px;
background-color: #FEDCBA;
border: 3px solid #00F;
margin: 15px 30px 20px 30px
}
运行效果：
图中两蓝色边框之间的距离便是<p>的边界
若在编写样式是为编写margin，系统会以顶边界和底边界为准空一行！ 如：去除上例中的 margin： 15px 30px 20px 30px
运行效果：
网友评论