css-Dimensions and Borders

1. Priority of the base selector
Weight: Identifies the importance of the current selector, the greater the weight, the higher the priority.
Element Selector 1
Class Selector 10
Pseudo class Selector 10
ID Selector 100
Inline Style 1000
The weights of the selectors are added together, the big priority
After the same weight value is defined as the main
2. Dimensions and Borders
1. Units
1. Dimension units
1.px Pixels 1024*768px
2.in inch 1in=2.54cm
3.pt lb 1pt=1/72in units for describing text
4.cm cm
5.mm mm
6.em multiplied by multiples (12px*2em=24px) relative to the parent element
7.rem relative to the root element (body)
8.% percent
2. Color units (color values)
1.rgb (R,G,B)
R:red
G:green
B:blue
R,g,b: Take value 0-255
2.rgb (r%,g%,b%)
3.rgba (R,g,b,alpha)
Alpha: A decimal between 0-1 and the greater the opacity of the value.
Ex
RGB (0,0,0,0.3)
4. #rrggbb
Made up of 0-9 and a-f
#ffffff
#000000
#dddddd
5. #rgb是上面的缩写
#ffffff-#fff
#000000-#000
#dddddd-#ddd
6. The color of the English word
Red,green,gray,purple,blue ...
2. Dimensions
2. Use
Change the width and height of an element
2. Syntax
Property:
Widths: Width
Min-width min. width
Max-width Maximum width
Altitude: Height
Min-height min. height
Max-height Maximum Height
3. Note: Which elements in the page can modify the dimensions
1. All block-level elements are allowed to modify the size
DIV,P,H1,H2, structure tag, UL,OL,DL,DT,DD
2. Inline block elements allow setting dimensions
Form control elements (except for radio buttons and check boxes)
3. Elements with the width and Height properties themselves
Img,table
Most of the inline elements cannot be modified in size.
4. Overflow handling
When the content is many, the element area is small, it will produce overflow effect, the default is vertical overflow.
Property:
Overflow,overflow-x,overflow-y
Value:
1.visible visible, default value, overflow visible
2.hidden hidden, overflow content hidden, invisible
3.scroll display scroll bar, overflow, available
4.auto auto, scroll bar appears when overflow and available
Practice:
Finish effect
Border border:1px solid #000;
3. Border
1. Border Shorthand method
Property:
Border:width style color;
Width: Breadth of border (thickness)
Style: Styles for borders
Value: Solid Solid line
Dotted dashed (dot)
Dashed dashed line (lines)
Color: Border color (transparent transparent color)
The above method is to set the style of four borders at the same time.
Cancel border: Border:0/none;
Practice:
Create a DIV element in the Web page, set the aspect each 300px, and set the four border to 1px width, orange solid lines.
2. Single-sided frame definition
Sets a border in a four-bar border.
Property:
Border-top/bottom/left/right:width style color;
3. Single attribute definition
Set a property of a four border
Property:
Border-width/style/color: value;
4. Single-Sided attributes
Set a property of an edge
border-Direction-attribute: value;
Direction: Top/bottom/left/right
Property: Width/style/color
Ex
border-top-color:red;
Practice:
1. Set the border style in four directions to a dashed line
2. Set the color of the lower border to yellow
4. Border Chamfer
Turn the element's right angle to rounded corners.
Property: Border-radius
Value:
1. Numbers in PX units
2. Percent X (set circle 50%)
Single Angle settings:
Border-top-left-radius: Upper left corner
Border-bottom-left-radius: Lower left corner
Border-top-right-radius: Upper right corner
Border-bottom-right-raidus: Lower right corner
5. Border Shadow
Property: Box-shadow
Value: H-shadow v-shadow blur spread color inset
H-shadow: Horizontal offset distance of shadow, must value
The value is positive and the shadow is shifted to the right
Negative value, shadow left offset
V-SHAODW: Vertical offset distance of shadow, must value
The value is positive and the shadow is shifted downward
Negative value, shadow up offset
Blur: Shadow blur distance (optional value)
Spread: Shadow size (optional value)
Color: Shadow colors (optional values)
Inset: Changes the default outer shadow to an inner shadow (optional value)
Practice:
1. Set the outer glow effect of the circle.
2. On the basis of overflow practice, to set 5px fillet for each picture, and hover over the picture, set the shadow effect to the lower right 5px, the shadow color #ddd.
6. Contour
Outline the border of the border, drawn on the perimeter of the border.
Property:
Outline:width style color;
Outline:0/none; Remove outline
Practice:
Create a text box in the page, try to remove the outline, and then look at the effect.
3. Box model
1. What is a box model
The elements of the page are both boxes
Frame model: Box models A box model that defines the content of element frame processing elements, padding, margins, and a way to calculate the bounding rectangle.
padding: The space between the element border and the content area
Margin: white space between elements
Box model is calculated by default:
The actual occupied width of the element = left and right margin + left and right Border + left and right margins +width
The actual height of the element = upper and lower margins + upper and lower borders + upper and lower margins +height
2. Margin
1. What is margin
White space around the outside of the border
2. Syntax
Properties: Margin defines margins in four directions
Margin-top/bottom/left/right Unilateral definition
Value:
1. Numbers in PX units
2. The value is negative
Margin-left
The value is positive and the element moves to the right
The value is negative, the element moves to the left
Margin-top
The value is positive and the element moves down
The value is negative, the element moves upwards
3. Percent%
The value of the margin, which is the ratio of the parent element's height or width
4. Take the value Auto
Automatically calculates the value of the margin
The control block-level elements are aligned horizontally in the horizontal direction.
Practice:
The page sets two div dimensions to 200*200, the spacing between the two Div is 50px, and then sets the second div to be centered horizontally.

3. Introduction
1.margin:value; Margin in four directions
2.MARGIN:V1 v2;
V1: Up and down margins
V2: Left and right margin
3.MARGIN:V1 v2 v3;
V1: Up
V2: About
V3: Next
4.MARGIN:V1 v2 v3 v4;
Upper right Down left
4. Elements with an outer margin
H1~h6,p,ul,ol,dl,pre,body
Reset elements with margin with CSS Reset (CSS rewrite)
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,dt,pre{margin:0;}
5. Special effects of margin
1. Margin Consolidation
When two vertical margins meet, they merge into one, and the final distance is determined by the larger distance between the two margins.
2. Upper Margin Overflow
Under certain special conditions, when you set the upper margin for a child element, it is possible to act on the parent element.
1. Parent element has no top border
2. When the top margin is set for the first child element
Solution:
1. Add a top border to the parent element
Cons: Has an impact on the height of the parent element
2. Replace the top margin of the child element with the top padding of the parent element
Cons: Has an impact on the height of the parent element
3. Add an empty <table></table> tag at the first child element of the parent element
3. Margins for inline elements and inline block elements
1. Inline element vertical margin is invalid (except IMG), and the left and right margins are added when they meet
2. Inline block elements, when setting vertical margins, the entire line elements are followed by changes

Practice:
1. Create two div elements, D1 and D2, set different background colors respectively, the size is 200*200;
2. In D2, add a child element Div,id to D3, set the D3 size to 100*100, and set the background color;
3. Set the top margin of the D3 to 50px and observe the results.
3. Inner margin
1. What is an internal margin
White space between the element border and the content
Padding expands the footprint of the element's border
2. Syntax
Property:
Padding:value; Four-way internal margin
Padding-top/bottom/left/right:value; Unilateral settings
Value:
1. Numbers in PX units
2. Numbers in%
3. Concise wording
Padding:value
PADDING:V1 v2
Up or down
PADDING:V1 v2 v3;
Up or down
PADDING:V1 v2 v3 v4;
Upper right Down left (clockwise)
Practice:
Create two div,d1 and D2, size 200*200, and set the border to 2px solid #f00;
Set the padding in four directions for D1 to 30px and observe the two div effects.
4.box-sizing Property
Function: Specifies how the box model is calculated
Value:
1.content-box
Default value, using the default calculation.
Actual floor width = left and right margin + left and right Border + left and right margin +width
Actual land height = upper and lower margins + upper and lower borders + upper and lower margins +height
2.border-box
The dimensions of the element will contain the values of border and padding.
Actual floor width =width (includes border and padding) +margin
Actual floor height =height (includes border and padding) +margin

css-Dimensions and Borders