css folding style (4) - div+css layout-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

css folding style (4) - div+css layout

黄舟

Dec 28, 2016 pm 04:11 PM

cssdiv+css layout

Summary of content:

css folding style (4) - div+css layout

##1. div and span

(1) Block-level tag: div
(2) Inline tag: span
As shown in the picture:

css folding style (4) - div+css layout

2. Box model (important)

Note: You can view the box using the browser’s debugging tool

(1) margin: box outer margin

css folding style (4) - div+css layout

(2) padding: box inner margin (will change the size of the block)

css folding style (4) - div+css layout

(3) border: box border width

(4) width: box width
(5) height: box height

Example:

①: The difference between outer margin and inner margin:

css folding style (4) - div+css layout

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(div+span以及盒模型)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
          
            body{  
                margin:0;  
                padding:0;  
                background:#C5C1AA;  
            }  
            div{  
                height:500px;  
                margin:60px;  
                padding:o;  
                border:solid 2px black;  
                background-color:rgba(255,0,0,0.7);  
                }  
            div.div1{  
                height:400px;  
                margin:0 audio;  
                border:solid 3px black;  
                background-color:rgba(0,0,255,0.7);  
            }  
              
          
                  
                  
              
        </style>  
    </head>  
    <body>  
        <div>  
            <div class="div1">  
                <h1 id="欢迎登录系统">欢迎登录系统</h1>  
                <h4 id="账号-input-nbsp-style-text">账号:<input style="text"></h4>  
                <h4 id="密码-input-nbsp-style-text">密码:<input style="text"></h4>  
            </div>  
        </div>  
    </body>  
</html>

②: Box model div placement Example:

css folding style (4) - div+css layout

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(div+span以及盒模型)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
        body{  
            margin:0;  
            padding:0;  
            background-color:rgba(0,0,255,0.3);  
        }  
        div{  
            width:500px;  
            height:500px;  
            background-color:rgba(250,128,10,0.8);  
            margin:0 auto;   /* 使div居中*/  
  
            border:solid black;  
        }  
        div.div1{  
            float:left;   /* 向左排列/*  
            background-color:rgba(255,0,0,0.4);  
            border:solid blue;  
            height:244px;  
            width:244px;      
            margin:0;  
            padding:0;  
        }  
          
        </style>  
    </head>  
    <body>  
        <div>  
        <div class="div1"></div>  
        <div class="div1"></div>  
          
        </div>  
    </body>  
</html>

3. Layout-related attributes (important)

(1) position Positioning method ①. Normal positioning: relative ②. Positioning according to the parent element: absolute ③. Positioning according to the browser window: fixed ④. No positioning: static ⑤. Inherit: inherit (2) Positioning ①.left:XXpx (left) away from the page vertex Distance ②.right: The distance of XXpx (right) from the page vertex ③.top: The distance of XXpx (top) from the page vertex ④.bottom: The distance of XXpx (bottom) from the page vertex (3) z-index layer coverage sequence (Priority) ①.-1,0,1,2,3; when it is -1, the layer is the lowest layer
(4) display display attribute (switching between block-level labels and inline labels )
①.display: none layer is not displayed
②.display: block block display, wrap after the element, display the next block element
③.display: inline inline display, multiple blocks can be Displayed in one line

(5) float floating attribute
①.left: left floating
②.right: right floating

[b] (6) clear clear float[ /b]
①.clear: both

[b] (7) overflow overflow processing[/b]
①.hidden hides content that exceeds the layer size

②. scrollAdd scroll bars regardless of whether the content exceeds the layer size
③.auto Automatically add scroll bars when exceeding the limit

[b]Example:[/b]

①: Fixed position and layout demo

css folding style (4) - div+css layout

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(布局相关的属性)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{  
            padding:0;  
            margin:0;  
            }  
              
            div.diva{  
                position:relative;   /* 一定要添加，如没添加其子元素则不生效*/  
                margin:50px;  
                width:500px;  
                height:500px;  
                background-color:rgba(255,0,0,0.4);   
                  
            }  
            .spanb{  
          
                position:absolute;  
                background-color:blue;  
                color:black;  
                top:-10px;  
                right:0;  
              
                }  
              
            .fixed{  
                padding:20px;  
                background:green;  
                position:fixed;  
                left:0;  
                top:40px;  
                z-index:1;   /* z-index的value值可为-1,0,1,2;当为-1时，该图层为最底层 */  
            }  
              
  
        </style>  
    </head>  
    <body>  
          
        <div class="fixed">  
            <p>联系人：翁孟铠</p>  
            <p>联系电话：XXXxxxx</p>  
            <p>地址：XXXXXXXXXXX</p>  
        </div>  
          
        <div class="diva">  
            <span class="spanb">浏览次数：222</spn>  
        </div>  
              
          
          
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
    </body>  
</html>

②: Floating and overflow effects demo

css folding style (4) - div+css layout

<!doctype html>  
<html>  
   <head>  
      <title>Div+Css布局(浮动以及溢出处理)</title>  
      <meta charset="utf-8">  
      <style type="text/css">  
         body{  
         padding:0;  
         margin:0;  
         }  
         .div{  
            width:auto;  
            height:auto;  
            background:#f1f1f1;  
            margin:0 auto;  
            color: black;  
         }  
  
         .left{  
            width: 300px;  
            height: 400px;  
            position: inherit;  
            top: 60px;  
            background:yellow;  
            float: left;  
            color: black;  
         }  
         .right{  
            float: left;  
            width: 1049px;  
            height: 400px;  
            position: inherit;  
            top: 60px;  
            background:lavenderblush;  
            color: black;  
         }  
  
         .top{  
            width: auto;  
            height: 60px;  
            background: royalblue;  
            position: inherit;  
            top:0;  
         }  
         .bottom{  
            clear: both;  
            margin-top:20px;  
            width: 960px;  
            height: 20px;  
            background: red;  
         }  
  
         .jianjie{  
            height: 80px;  
            width: 200px;  
            background: brown;  
            overflow: auto;  
  
         }  
  
      </style>  
   </head>  
   <body>  
      <div class="div">  
         <div class="top">logo</div>  
         <div class="left">左边</div>  
         <div class="right">  
            简介:<br>  
            <div class="jianjie">  
               1、这是简介<br>  
               2、我们在做溢出测试<br>  
               3、hidden 隐藏超出层大小的内容<br>  
               4、scroll无论内容是否超出层大小都添加滚动条<br>  
               5、auto 超出时自动添加滚动条  
            </div>  
  
         </div>  
         <div class="bottom"></div>  
      </div>  
   </body>  
</html>

The above is the css folding style (4)—— The content of div+css layout, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties