A new beginning for div+css web page layout design (4)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

A new beginning for div+css web page layout design (4)

黄舟

Dec 29, 2016 pm 02:23 PM

First we define a div with a length and width of 500px. You can think of it as a big box. In order to clearly see its existence, we display its border as a solid line

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
} </style> <head>
<body>
<div class="div"></div>
</body>
</html>

There will be many divs inside. You can understand that a big box contains other small boxes.
Put one first

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
} </style> <head>
<body>
<div class="div">
<div id="a"></div> 
</div>
</body>
</html>

You will see

A new beginning for div+css web page layout design (4)

The picture is not completely cut out, you can see that the inner div is tightly attached to the upper left corner of the big div

Add

margin-top:5px;
margin-left:5px

will

A new beginning for div+css web page layout design (4)

margin is to set the margin. If it is set here

margin-right:5px;
margin-bottom:5px

will not have any effect
because it There is nothing behind and below

Look at the inner margin below

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
margin-top:5px;
margin-left:5px;
padding-top:5px;
padding-left:5px;
} </style> <head>
<body>
<div class="div">
<div id="a">hello</div> </div>
</body>
</html>

The effect can be seen as soon as you try it, it is very simple

I found a problem, in ie6 and 360 Browser can actually adapt to the div under the premise that the length and height are set, that is, no matter how much content there is, it will not burst the div, but the original length and height have changed
In fact, this is not consistent normative. Firefox browser is normal

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
} 
</style> <head>
<body>
<div class="div" >
5555555555555555555555555555555555555555555555555555555555555555555555555
<br/>
<br/>
<br/>
</div>
</body>
</html>

You can try it and see, this is also a browser compatibility issue

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
}
#a{
width:100px;
height:50px;
background:red
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body>
<div class="div" >
<div id="a"></div>
<div id="b"></div>
<br/>
<br/>
<br/>
</div>
</body>
</html>

In Firefox browser Running is A new beginning for div+css web page layout design (4)

correct

In IE6 browser is A new beginning for div+css web page layout design (4)

wrong

The length and height of a div are outer margins (two) + borders (two) + inner margins (two) + content length

Anyway, remember, the length and width of a div definitely does not refer to the content. Long width

The above is the content of the new beginning of div+css web layout design (4). 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

Add Background Colors to SVGs Using the 'rect” ElementApr 11, 2025 am 11:11 AM

The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their

Building an Images Gallery using PixiJS and WebGLApr 11, 2025 am 11:06 AM

Sometimes, we have to go a little further than HTML, CSS, and JavaScript to create the UI we need, and instead use other resources, like SVG, WebGL, canvas,

PHP is A-OK for TemplatingApr 11, 2025 am 11:04 AM

PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic

How to Build Vue Components in a WordPress ThemeApr 11, 2025 am 11:03 AM

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.

Building the Web We WantApr 11, 2025 am 10:55 AM

On the Microsoft Edge team, we’re committed to an open web and helping to drive innovation forward, which is why we’ve kicked off a new initiative in

Understanding Web Accessibility Color Contrast Guidelines and RatiosApr 11, 2025 am 10:51 AM

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read

Do This to Improve Image Loading on Your WebsiteApr 11, 2025 am 10:32 AM

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank

Getting Acquainted With Svelte, the New Framework on the BlockApr 11, 2025 am 10:29 AM

For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks,

See all articles