Web Collection 03 episodes (css box model, common layout)

CSS box model

1. Content size

• Under normal circumstances, set the width/height for the element, and specify the size of the content box

• Content overflow: The content exceeds the size range of the element, which is called overflow. The overflow part is still visible by default, you can use overflow to adjust the display of the overflow part, the values ​​are as follows:

  Value	effect
  visible	The default value, the overflow part is visible
  hidden	Overflow part hidden
  scroll	Force scroll bars to be added horizontally and vertically
  auto	Automatically add available scroll bars in the overflow direction

2. Border

1. Border realization

grammar:

border:width style color;

The border style is required, divided into:

Style value	meaning
solid	Solid border
dotted	Dotted border
dashed	Dotted border
double	Double line border

2. Single border setting

Set the border in a certain direction respectively, value: width style color;

Attributes	effect
border-top	Set top border
border-bottom	Set bottom border
border-left	Set left border
border-right	Set right border

3. Webpage triangle mark making

1. Set the width and height of the element to 0
2. Uniformly set transparent borders in four directions
3. Adjust the visible color of the border in a certain direction

4. Rounded border

1. Attribute: border-radius specifies the corner radius
2. Value: pixel value or percentage
3. Value rule:

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

3. Padding

[1] Attribute: padding
[2] Function: Adjust the distance between the content frame of the element and the border
[3] Value:

20px;					一个值表示统一设置上右下左
20px 30px;				两个值表示分别设置(上下) (左右)
20px 30px 40px;			三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;	表示分别设置上右下左

4. Unidirectional padding can only take one value:

padding-top
padding-right
padding-bottom
padding-left

4. Margin

[1] Attribute: margin

[2] Function: adjust the distance between elements

[3] Special:
1) margin:0; cancel the default margin;
2) margin:0 auto; left and right automatic margins, realize the horizontal centering of the element within the range of the parent element
; 3) margin: -10px; fine-tuning of the element position

[4] Unidirectional outer margin: only take one value

margin-top
margin-right
margin-bottom
margin-left

5. Margin merge:
   1) Vertical direction
   1. The margin-top of the child element acts on the parent element.
   Solution:
   Add a top border to the
   parent element ; or set padding-top: 0.1px for the parent element;
   2. Set the vertical between the elements at the same time The outer margin of the direction, and finally take the larger value.
   2) Horizontal direction.
   Block elements fully support the box model-related attributes (width, height, padding, border, margin);
   inline elements do not fully support the box model-related attributes, and width is not supported /height, does not support top and bottom margins
   . The horizontal margins of the elements in the row will be displayed superimposed.

6. Elements with default margins:

   body,h1,h2,h3,h4,h5,h6,p,ul,ol{
     margin:0;
     padding:0;
     list-style:none;
   }
   

Layout

1. Standard Stream/Static Stream

The default layout is displayed in order from top to bottom and left to right according to the code writing order and label type

2. Floating layout

Mainly used to set the horizontal arrangement of block elements

【1】Properties

float

【2】Value

Can be left or right, set the element to float to the left or to the right

float:left/right;

[3] Features

• The element setting float will escape from the original position, docked to the edge of other elements in turn to the left or right, and no longer occupy a place in the document
• If the element is set to float, it has the characteristics of a block element, and the width and height can be adjusted manually
• "Text Wrap": Floating elements obscure the position of normal elements and cannot obscure the display of normal content. The content is displayed around the floating elements

[4] Frequently Asked Questions

All child elements are set to float, causing the height of the parent element to be 0, affecting the background color and background image display of the parent element, and affecting the page layout

【5】Solve

• For elements with fixed content, if the child elements are all floating, you can give the parent element a fixed height (e.g. navigation bar)
• Add an empty block element at the end of the parent element. Set clear: both; clear float
• Set overflow: hidden for the parent element; the solution height is 0

3. Positioning the layout

Adjust the display position of the element in combination with the offset attribute

【1】Properties

position

【2】Value

Available relative (relative positioning)/absolute (absolute positioning)/fixed (fixed positioning)

postion:relative/absolute/fixed/static

[3] Offset attribute

Set the positioning element can use the offset property to adjust the position of the distance reference object

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

【4】Classification

• relative positioning

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

• absolute absolute positioning

1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

Use absolute positioning:
"Father and son must": Set relative positioning of parent element, absolute positioning of child element, refer to the offset of the positioned parent element.

• fixed

  1. 参照窗口进行定位,不跟随网页滚动而滚动
  2. 脱离文档流

【5】Stacking order

When elements are stacked, you can use the z-index attribute to adjust the display position of the positioned element. The larger the value, the higher the element:

• Attribute: z-index

• Value: a unitless value, the larger the value, the higher

• Stacking:

  1. The positioned element is stacked with the normal element in the document, and the positioned element is always on top
  2. The same as the positioned elements are stacked, according to the writing order of the HTML code, the latecomers are on the top