当前位置：网站首页>Basic layout of the page

Basic layout of the page

2022-07-27 05:42:00 【Real code slag】

The page layout （layout）

1、box model

css Set all elements in the page as a rectangular box , The layout is to put the boxes in different positions .

  • content （ Content ）： from weight and height Control the size of the content area .
  • border （ Frame ）： Three styles need to be set ,border-width（ Have default values ）、border-color、border-style.
  • padding（ padding ）
  • margin （ Margin ）

Box size refers to content+border+padding

box model

2、 Horizontal layout

The position of an element in the horizontal direction of its parent element is determined by the following elements ：

  • margin-left ： The default is 0, It can be set to auto
  • border-left ： The default is 0
  • padding-left ： The default is 0
  • width ： It can be set to auto
  • padding-right ： The default is 0
  • border-right ： The default is 0
  • margin-right ： The default is 0, It can be set to auto

The horizontal layout must satisfy the following equation ：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = Width of parent element content area
When the above equation does not hold , Will automatically adjust , Make the equation hold .
Adjust the situation ：

  • None of the above values auto Situation , Will automatically adjust margin-right Value .
  • If a value is set to auto, Then automatically adjust the settings auto To make the equation true .
  • If you set all three values to auto, Then the outer margin is 0,width Is the maximum .
  • If the outer margins are set to auto, Then the width is a fixed value , Set the outer margin to the same value .

3、 Box size

The default size is the width of the content area 、 padding 、 The border is jointly determined .
box-sizing Used to set the way to calculate the size of the box

  • content-box： The default value is , Width and height are used to set the size of the content area .
  • border-box： Width and height are used to set the size of the visible box of the box ,width、height It's the content area + padding + Total border size .

4、 Shadows and fillets

box-shadow Used to set the shadow effect of an element , Shadows don't affect page layout

  • The first value is , Horizontal offset , Set the horizontal position of the shadow , Positive value to the right , Negative to the left
  • Second value , Vertical offset , Set the vertical position of the shadow , A positive value goes down , Negative value up
  • Third values , The blur radius of the shadow
  • Fourth values , Color of shadow

box-radius Used to set the fillet

  • The four values ： Top left The upper right The lower right The lower left
  • Three values ： Top left The upper right / The lower left The lower right
  • Two values ： Top left / The lower right The upper right / The lower left
  • A value ： Four corners
    To set a circle ,border-radius：50%;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Shadow settings </title>
    <style> .box1 {
       width: 100px; height: 100px; background-color: #bfa; /*  Used to set shadows  */ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /*  Used to set the fillet  */ border-radius: 20px; } </style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

5、 float （float）

adopt float You can set the floating of elements , Make an element float to the left or right of its parent element .
float The default is none,left or right.
The characteristics of floating ：

  1. Floating elements will completely lift the document flow , No longer occupies a place in the document stream
  2. After floating is set, the element will move to the left or right of the parent element ,
  3. Floating elements are not removed from the parent element by default
  4. When floating elements move left or right , No more than the other floating elements in front of it
  5. If above the floating element is a block element without floating , The floating element cannot be moved up
  6. Floating elements will not exceed the sibling elements floating above


Solve height collapse and outer margin overlap ：

.clearfix::before, .clearfix::after{
    
    content: '';
    display: table;
    clear: both;
}
原网站

版权声明
本文为[Real code slag]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207270502289039.html

边栏推荐

猜你喜欢

随机推荐