css中一个框的实际宽度是由哪几部分组成的

html-css017

css中一个框的实际宽度是由哪几部分组成的,第1张

一个div 就是由<div></div>组成,

它可以由css定义:

width宽度

height高度

border边框

margin外边距

padding内边距

background背景

float浮动方式

position定位方式

等等。。。

块级元素和行内元素最明显的就是,

块级元素会换行,行内元素不会换行。。

其实字面就可以解释这个了,块级,就是一块东西,行内的话,就是在一行字或者一行别的元素里应用,它是不会换行,

比如span,i,b,这些就是行内元素。。。

div这些就是块级元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>景安网络</title>

<style type="text/css">

.wab{ width:100px padding:10px margin:5px border:2px solid #009966}

</style>

</head>

<body>

<div class="wab">宽度组成</div>

</body>

</html>

代码运行如下

css实际宽度=margin值+padding值+border值+width值