Common CSS attributes (2): css attributes

Common CSS attributes (2): css attributes
Border of the Box Model

Border-(top/bottom/left/right)-style:The style of the solid border, such as (solid line, dotted dot line, dashed dotted line)

Border-top-color:# Aaa border color

Border-top-width:20 PX Border Width

Four border connections:For exampleBorder-color:#000

Border attribute writing: Border-top:#555 solid 5px

Write border attributes in four directions: Border:12px dashed 10px

Note: There is no order requirement, but the border style, that is, the line type, cannot be small.

Supplement:

Border merge:Border-collapse:Collapse

Remove border:Border:0 none

Remove the path outline: Outline-style:None

 

Margin inside the box model

Padding-left:20px;

Padding-right:10px;

Padding-top:30%;

Padding-bottom:40%;

Attribute writing:

Padding:20px; both the top, bottom, and left are 20px

Padding:10px: 20px; up/down: 10px; around: 20px

Padding:10px 20px 30px; top margin: 10px; left and right: 20px; bottom: 30px

Padding:10px 20px 30px 40px; top 10px, right 20px, bottom 30px, left 40px

Note: Specify the width and height for the box. Using padding in the box will support the large box.

Supplement: The Box width is equal to: the defined width + Border Width + Left and Right padding

 

Margin Outside the Box Model

Margin (similar to the padding method ): Margin: 20px

Margin:20px auto (auto indicates adaptive. In my opinion, it is centered)

Supplement: The two boxes are vertical, and the bottom margin of the box above is set. The box below sets the bottom margin. the margins of the two boxes are the ones with the large margin.

Solution:Nested box outer margin collapsed

For exampleMargin-top:10 PX, the parent box moves 10 PX down relative to the top, and the Child box does not move relative to the parent box

There are two solutions:The first method is to set a border for the parent box; the second method is to set the parent box:Overflow:Hidden; (hidden when the content overflow element box)

In addition, an element in a row can define both the left and right sides of the internal margin, which is ignored in the upper and lower cases. In a row, an internal block can define the internal and external margins.

 

Floating Layout

Float:Left/right

Features:

Elements do not occupy the original position after floating (de-mark)

The floating box is displayed on one line (unless the border is no longer supported)

When an element in a row floats, it is converted into a block element in a row.

How to clear floating: 

Clear:Left/both/right is the most used clear: both

Method 1:<Div> Note: you cannot use this method if the content is out of the box.

Method 3:Clear floating with pseudo elements (recommended)

. Clearfix: after {

Content :".";

Display: block;

Height: 0;

Line-height: 0;

Visibility: hidden; specifies that the element is invisible (but occupies space on the page)

Clear: both;

}

Compatible with IE:

. Clearfix {

Zoom: 1;

}