您的位置：首页 > Web前端 > CSS

css 盒子分类 及内联元素和块级元素盒模型设置是否生效问题

2020-07-14 05:49 405 查看

元素

  1. 概念：html标签就是元素，元素一般有内部盒子和外部盒子
  2. 区分：
元素外部盒子内部盒子块级盒子内联级盒子块级盒子内联级盒子
  1. 分类：根据外部盒子的不同可以分为内联元素和块级元素;根据内容是否能替换可以分为替换元素和非替换元素。
  2. 尺寸：
    元素内部尺寸：content+padding
    元素尺寸：content+padding+border
    元素外部尺寸：content+padding+border+margin
    由于css默认的流是水平方向的，所以margin:auto只能改变水平方向的元素内部尺寸，即div的width:auto，100%占据父元素空间时，margin变大了content就会变小（流动性）

内联元素和块级元素特点

纯内联元素（inline）

1. 不能设置,即无法改变盒子尺寸：width、height、margin-top、margin-bottom
2. 可以设置但可能无效果：padding-top、padding-bottom（当距离前面后面元素（或者父元素上下）距离大于等于padding-top或padding-bottom的值时有效果）
3. 背景色跟着content走且不规则。没有行框盒子。
4. padding-left和padding-right是加载最前面和最后面的文字上的。
5. inline-block、block每一行都有一个行框盒子。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
}
.div1 {
background: #f00;
width: 100px;
height: 100px;
margin-bottom: 120px;
}
span{
width: 100px;   /*不能设置，即不能改变盒子尺寸*/
height: 100px;  /*不能设置*/
border: 1px solid;  /*可以设置*/
padding: 100px; /*top、bottom可能没效果，left、right可以设置。当距离前面后面元素（或者父元素上下）距离大于等于padding-top或padding-bottom的值时有效果*/
margin: 10px;   /*top、bottom不能设置，left、right可以设置*/
}
</style>
</head>
<body>
<div class="div1"></div>
<span>a</span>
</body>
</html>


块级元素

均可以设置：width、height、padding、border、margin

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航