Box model
width
height
padding
border
margin
width :
width: length value|percentage|auto
maximum width;
max-width: length value|percentage|auto
minimum width:
min-width: length value|percentage| auto
Description: Set the content width of block-level elements and replacement elements
ie6 does not support the maximum and minimum width/height
Block label occupies a whole line, full of background color, width and height can be set
Height:
height:length value|percentage|auto
maximum height:
max-height:length value|percentage|auto
minimum height:
min-height:length value|percentage| auto
Description: Set the content height of block-level elements and replacement elements
Border attributes:
border width border-width
border color border-color
border style border-style
border-width:thin | medium | thick |Length value
border-color: color|transparent
set border-style, border-color, border-widht to have the same style in the four directions of the border. 
Abbreviation:
border: width style color
border-left: width Style color
.one{
border: 10px #e899ee solid;}
.two{
border-top:5px red solid;
border-Left:1epx blue dotted;
border-right:1epx blue dotted;
border-bottom :5px red solid;
}
The padding attribute value cannot be negative
The space occupied by the box in the web page is not only related to the width and height attributes, but also related to padding.
.one{
width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
width:100%;height:100%;background-color:#ececec;}
Margins
similar margin as abbreviations and padding
By default, the corresponding html block-level element has margins, and the body defaults to 8px
Usually override the default style
body,h1,h2,h3,h4,h5,h6,p{
margin:0;}
The margin value is auto, which realizes the display effect of centering in the horizontal direction
. The margin is calculated by the browser
Calculation of the width and height of the
standard box for margin collapse :
In addition to the standard, there are also IE boxes
Which web page to choose?
In fact, if there is a doctype document type declaration, use the standard, otherwise the browser chooses the
HTML element classification:
block-level element, occupies a line
p div h1~h6 ul li ol dl dt dd, etc.
In-line elements (inline elements), one line shows
span a em, etc.
Inline elements do not have width and height attribute settings
There is also a special img that is an inline-block inline block element, which is presented as inline, but has the corresponding characteristics of block
display: none will not display
Is it possible to set the block level as an inline element by setting? The answer is yes.
Can be set with the display attribute
<head>
.one{font-size:Opx;}
div{dispLay:inline;
font-size:16px;}
</head>
<div class="one">
<div>display </div>
<div>display </div>
<div>display </div>
</div>
forThere are gaps between inline elementsIn addition to removing the line break to solve the problem, it can also be achieved by setting the corresponding css property above
to sum up
NEXT:
float float!
One word of the day:
prevalent/fashionable replace popular
