0529 front-end

CSS background styles:

background-color: background color

background-image: Background image

background-repeat: repeat background image

repeat-y: the y-axis is repeated only

repeat-x: x-axis only repeated

no-repeat: Unique, displayed only once

background-position: the positioning of the background image

Value: two, respectively, represent the x and y directions, only if a write, the two values ​​are equal

FIG. Sprite: each set of icons, the purpose is to reduce the http request

background: all of the above is to put all together

background:color image repeat position

Box model

composition:

margin: Margin distance between the box and the box

Together wrote properties

Four

When writing a time, all four are the same

Two, when, on the right, on the padded edge

Three when, on the lower right side of the padded

margin-top margin-right margin-bottom margin-left four alone could write

border: the border box

Together wrote properties

border-color color

border-top-color  border-left-color

border-style upper and lower left and right pattern

border-width about the width of the upper and lower

The time of writing no need to distinguish order

padding: padding the filler

Above the lower right corner left

On the padded edge

Defined width and height only content section

content: content bought things

Box size = content + padding + border

Locate

One way css layout

Positioning: top, left, right, bottom element only in the case will be used to increase localization

Relative positioning: generally do not top, left, right, bottom

Absolute positioning: the element will flow out of the document; generally do not have margin

Fixed positioning: the element will flow out of the document, only the browser window can keep things under control

In general, the relative and absolute positioning are simultaneously occurring

All general drop-down box is absolutely positioned with relative positioning completion

float

Divided into two: left floating, floating right;

Will flow out of the document

float

clear:both  清除所有的浮动

清除浮动:不是清除自身的浮动,而是清除上一个浮动对自身造成的影响

overflow:hidden溢出隐藏,主要是用于清除浮动

overflow:scroll 溢出部分以滚动条显示

增加一个空的标签,清除所有的浮动,即可解决高度失效的问题

 

Guess you like

Origin www.cnblogs.com/lxx121/p/10947507.html