JAVA front end -- CSS -- box model -- floating -- positioning

Keywords: Attribute Java

Box model

  • constitute
    1. Box thickness border - border
    1. Filling thickness padding - inner margin
    1. Distance from other boxes margin - outer margin

Border border

  • Border width: border width
  • Border color: border color
  • Border style: the border style parameters are as follows

none: no border
Solid: the border is single solid line -- most commonly used
Dashed: dashed border
Dotted: dotted border
Double: double solid border

  • Merge: border: width color style
  <style>
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            border-width: 10px;
            border-color: darkgrey;
            border-style: double;
        }
        .hao{
            border: 2px blue solid;
        }
        .mi{
            border-top: 2px red dashed;
            border-bottom:2px green dashed ;
        }
    </style>
</head>
<body>
    <div>I'm a box</div>
    <hr>
    //Account number:<input type="text" class="hao"> <br>
    //Password:<input type="password" class="mi"> <br>
Fillet border
  • Format: the border radius parameter is as follows

50% - circle
20px - General
10px 40px -- upper left corner and lower right corner
10px 40px 80px -- upper left corner, upper right corner and lower right corner
10px 40px 80px 100px -- top left, top right, bottom right, bottom left

 <style>
    div{
        width: 200px;
        height: 100px;
        border-width: 2px;
        border-color: #01800b;
        border-style: dashed;
    }
    .he1{
        border-radius: 100px;
    }
    .he2{
        border-radius: 20px 40px;
    }
    .he3{
        border-radius: 20px 40px 60px;
    }
    .he4{
        border-radius: 20px 40px 60px 80px;
    }
</style>
</head>
<body>
<div class="he1"></div> <br>
<div class="he2"></div><br>
<div class="he3"></div><br>
<div class="he4"></div>

padding

  • Definition: the distance from content to border is as follows

10px -- up, down, left and right
10px 30px -- up 10 down 30
10px 30px 40px -- Top 10, about 30, bottom 40
10px 30px 40px -- upper right lower left (clockwise)

Outer margin

  • Outside margin can realize box centering

condition

  1. Must be a block level element
  2. width must be specified
  3. Left and right outer margins set to auto
div{
            width: 200px;
            height: 100px;
            border: 2px cornflowerblue solid;
            padding: 30px;
            background-color: pink;
            margin: 30px auto;------Set box center
            text-align: center;------Set text on div Middle ranking
            line-height: 80px;  -----Set line height to center text in box
        }
  • margin:0 auto -- center the div in a large container
  • Text align: Center

The problem of outer margin merging

  • Definition: when two adjacent block elements meet, the distance between them is not the sum of two distances, but the larger distance when the upper block element has the lower margin margin margin margin bottom and the lower block element has the upper margin margin margin margin top
Space size = width + border + padding + margin
Inner box size = width + border + padding
  • Note: if a box has no width specified, the box width will not be affected
<style>
        #l1{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            margin: 30px;
            border: 2px red solid;

        }
        #l2{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 30px;

        }
    </style>
</head>
<body>
<div id="l1">
<div id="l2"></div>
</div>

Box shadow

  • Format: box shadow: horizontal shadow vertical shadow blur distance shadow size color inside and outside shadow
  • Be careful
  • 1. The first two must be followed by the following can be omitted
  • 2. Default to outer shadow
 div{
            width: 300px;
            height: 300px;
            border: 2px lightslategrey solid;
            margin: 60px;
            box-shadow: 5px 5px 10px 10px rebeccapurple;
        }

Float

  • There are three CSS positioning mechanisms: standard document flow floating and positioning

Standard document flow:

  • Block level element -- exclusive row
  • In line element -- not exclusive to one line
display -- can be inline in one line
 div{
            width: 200px;
            height: 200px;
            background: pink;
            display:inline-block;
        }
  • Disadvantage: gaps between block elements

Float

  • Definition: the element with floating attribute will move out of the control of standard flow to the position specified in its parent element 
div{)
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }
  • Need to add parent element
  • Note: the child float will not hold down the father's padding and will not exceed the border
  • If there is a floating child box in a parent box, all the child boxes need to be floating to align one row
		.fu1{
            width: 1400px;
            height: 200px;
            background-color: darkgrey;
            margin: 10px;
        }
        .zi1{
            width: 500px;
            height:150px ;
            background-color: greenyellow;
            margin: 30px;
            float: left;
        }

Inline and block level elements have the properties of inline blocks after adding floats

  • Inline block property: multiple elements can be placed in a row. The width and height of the box are determined by the content
    Precondition: width is not given 
 <style>
        div{
            height: 200px;
            background-color: pink;
            float: left;
            margin: 10px;
        }
        span{
            height: 100px;
            background-color: lightskyblue;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<div>Love apartment 1</div>
<div>Love apartment 2</div>
<span>Love apartment 3</span>
<span>Love apartment 5</span>
//Love apartment 5

Clear floating

  • Because floating elements no longer occupy the position of the standard document stream, they have an impact on subsequent element typesetting
    Note: clearing floats is the effect of clearing not really clearing floats
  • Clear floating nature: clear the internal height 0 problem of parent element due to floating of child element
  • It's called closed floating. It's more vivid: circle the floating box inside so that the box is closed and the entrance and exit do not affect other elements

In many cases, the height of nested parent elements is not determined by child elements

————Problem: when the child element floats out of the standard flow and the parent box does not have height, the element under the box will run to the top
————Solution: three are as follows

1. Additional labeling
  • clear -- parameter: left right both (common)
  • How to use clear: after the floating box, add an empty div box css to add clear
<style>
        .box1{
            width: 600px;
            background-color: pink;
        }
        .z1{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .z2{
            width:450px;
            height: 200px;
            background-color: lightseagreen;
            float: left;
        }
        .box2{
            width: 500px;
            height: 300px;
            background-color: lightgreen;
        }
        .kong{
            clear: both;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="kong"></div>
</div>
<div class="box2"></div>
2. Add overflow attribute to parent
  • Usage: add overflow: hidden in the parent css
 .box1{
            width: 600px;
            background-color: pink;
            margin: 0 auto;
            overflow: hidden;
        }
3. after pseudo element
 :after{
            content: '';
            display: block;
            clear: both;
        }

Location

The positioning of elements is mainly divided into two parts: positioning mode and edge offset

  • Positioning mode + edge offset - full positioning

Edge offset

  • Definition: offset parameters in a certain direction are as follows

top - up
bottom - down
Left - left
Right - right

Location mode

  • position: the parameters are as follows
Automatic positioning - static
  • Definition: the default location in the document
  • Generally used for clearing positioning
div {
            width: 300px;
            height: 200px;
            background-color: pink;
            top: 100px;
            left: 200px;
            position: static;
        }
relative positioning
  • Definition: position relative to its document flow
  • Move the position with the upper left corner of the element as the origin through the edge offset

Note: the relative positioning box is still in the standard stream without de labeling!!! Occupancy position

 <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
        #two{
            background-color: lightskyblue;
            left: 150px;
            position: relative;
        }
    </style>
</head>
<body>
<div></div>
<div id="two"></div>
<div></div>
absolute positioning
  • Definition: positioning relative to the first element (parent element) that has been positioned

  • Note: the absolute positioning box is out of standard!!! No occupying position

  • 1. If the parent element is not located, the browser shall prevail
  • 2. If the parent element has a location (any location is allowed), the nearest located parent element shall prevail to move the location within the parent element

Son and father
Absolute positioning of child elements
Relative positioning of parent elements -- to ensure that parent elements do not deviate from the standard flow and still occupy a position

 .father{
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
            position: relative;
        }
        .son{
            width: 150px;
            height: 80px;
            background-color: lightpink;
            position: absolute;
            top: 15px;
            left: 15px;
        }
fixed positioning
  • Definition: positioning relative to browser window
  • 1. Independent of the parent element, only the browser is used for positioning
  • 2. Complete de labeling!!! Non stick position 
<style>
        .father,div{
            width: 500px;
            height: 500px;
            background-color: lightskyblue;
            margin: 100px auto;
        }
        img{
            position: fixed;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<div class="father">
    <img src="TaoBao.jpg" alt="picture" width="200">
</div>
<div></div>
<div></div>

z-index

  • Definition: adjust the stacking order of overlapping elements to integer negative or 0
  • 1. The last element is at the top
  • 2. The larger the value is, the higher the position of this element in the cascade element (the default value is 0)
  • 3. Do not add anything after the number
  • 4. Only relative positioning absolute positioning fixed positioning has this attribute
 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            position: absolute;
            top: 0;
            left: 0;
        }
        div:first-child{
            z-index: 1;
        }
        div:nth-child(2){
            background-color: lightblue;
            top: 60px;
            left: 60px;
            z-index: 2;
        }
        div:nth-child(3){
            background-color: lightgreen;
            top: 120px;
            left: 120px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
Published 46 original articles, won praise 1, visited 620
Private letter follow

Posted by mrobinson83 on Sat, 25 Jan 2020 23:33:45 -0800

Hot Keywords

©2025 Programmer Group