Article Directory
The page layout needs to learn three cores, the box model, floating and positioning. Learning the box model can help us layout the page very well.
1. See through the nature of web page layout
Web page layout process:
- First prepare the relevant web page elements, which are basically boxes.
- Use CSS to set the style of the box, and then place it in the appropriate position.
- Load content into the box.
The core essence of web page layout: is to use CSS to place the box.
2. Composition of Box Model
The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: borders, outer margins, inner margins, and actual content
3. Border
Border will affect the actual size of the box
border will additional increase the actual size of the box. So we have two solutions:
- When measuring the size of the box, do not measure the border.
- If you include the border when measuring, you need to subtract the width/height from the width of the border
3.1 Ordinary border
border can set the border of the element. The border consists of three parts: border width (thickness) border style border color
The common values of boder-style attribute are:
- none: If there is no border, the width of all borders is ignored (default value)
- solid: the border is a single solid line (the most commonly used)
- dashed: the border is a dashed line
- dotted: The border is shorthand for dotted
border:
border: 1px solid red; 没有顺序
The border is written separately:
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
for example:
<style>
div {
width: 200px;
height: 200px;
border: 5px solid black;
}
</style>
<body>
<div></div>
</body>
3.2 Thin borders of tables
border-collapse: collapseIndicates that adjacent borders are merged together
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
<style>
table {
/*把这个table看成一个盒子 设置这个盒子的长宽*/
width: 500px;
height: 249px;
}
th {
height: 35px;
}
table,
td, th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
effect:
4. Padding
4.1 Introduction
It will also affect the size of the box. The processing method is the same as the simple way of writing the border
:
4.2 Application-Sina Navigation Bar
Like this Sina navigation bar, we used to directly specify the length and width of the box before, but because the number of words in each box is different, it would be ugly if they were all the same. You can use this padding
effect: place the
mouse before
the link and after the first link.
Code: (The analysis is written in the code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将这个导航看成一个盒子：设置它的高度，背景颜色，上边框，下边框 */
.nav {
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 导航中的链接首先要转化成行内块元素才能调整宽度，并且链接都在一行中
然后设置字体颜色，取消下划线，行高，padding */
.nav a{
color: #4c4c4c;
text-decoration: none;
line-height: 41px;
display: inline-block;
padding: 0 20px;
}
/* 鼠标悬浮在链接上时 */
.nav a:hover{
background-color: #eee;
color:#ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
</div>
</body>
</html>
Some parameters:
5. Margin
The margin property is used to set the outer margin, that is, the distance between the control box and the box.
For example:
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.one{
margin-bottom: 5px;
}
</style>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
5.1 Use margins to center
The outer margin can make the block-level box horizontally centered , but two conditions must be met:
① The box must be specified with a width (width).
② Set the left and right margins of the box to auto.
Common ways of writing can be any of the following three types:
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
Note: The above method is to center the block-level element horizontally, and add text-align:center
to its parent element. Note that it is the parent element.
5.2 Merging of the vertical margins of adjacent block elements
When two adjacent block elements (sibling relationship) meet, if the upper element has a lower margin-bottom and the lower element has a upper margin-top, then the vertical spacing between them is not margin-bottom The sum of margin-top. The phenomenon of taking the larger of the two values is called the merger of the vertical margins of adjacent block elements.
Solution:
Try to add margin values to only one box.
5.3 Collapse of the vertical margins of nested block elements
For two nested block elements (parent-child relationship), the parent element has a top margin and the child element also has a top margin. At this time, the parent element will collapse a larger margin value.
Look at the effect of this piece of code:
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
margin-top: 50px;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
If you want the child element (that is, the red part) to appear a little below the pink block, according to the normal idea, you should add margin-top:100px: to the .son,
but the final effect is all down together:
Solution:
- You can define a top border for the parent element.
- You can define the top padding for the parent element.
- You can add overflow: hidden for the parent element.
There are other methods, such as floating, fixing, absolutely positioned boxes will not have the problem of collapse, we will summarize later.
5.4 Clear the inner and outer margins
Many web page elements have default inner and outer margins, and the defaults of different browsers are not consistent. Therefore, before we lay out, we must first clear the inner and outer margins of the web page elements.
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
In order to take care of compatibility, try to set only the left and right inner and outer margins, not the upper and lower inner and outer margins. But converting to block-level and inline block elements is fine