LOGO 部分
NAV 布局
LEFT - SIDEBAR:左边栏布局
CONTENT:内容布局
RIGHT - SIDEBAR:右边栏布局
块的默认布局叫做流式布局
但流式布局并不能满足对页面的需要,需要左边栏、内容栏、右边栏,因此需要让块浮动
要想让块浮动起来需要设置块的Float属性
position:static、relative、absolute、fixed、sticky
position的默认值,css的默认布局方式
确定元素的位置之后,通过 left、top、right、bottom 的属性来设置元素位置的偏移
会把元素移出文档流,会被别的元素挤占空间,但是会显示在挤占的元素的上方,通过 left、top、right、bottom 的属性来设置元素位置的偏移,而且 absolute 是以相对于包含它的元素来偏移
以浏览器的可视窗口为参照点移动元素,当设置好 left、top、right、bottom 的属性偏移后,无论怎么滚动都不会移动
通过 left、top、right、bottom 的属性来设置元素位置的偏移,当滚轮滑到设置偏移位置时,就会固定,其他元素不变,随滚轮动
相重叠的盒子,设置方向的偏移
若两个相重叠的盒子不同父级盒子,则取决于父级盒子的方向的偏移
display: none; 隐藏(空间释放)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>displaytitle>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: khaki;
display: none;
}
style>
head>
<body>
<div class="div1">div>
body>
html>
display: inlline;
行级元素
1 多个元素占一行
2 不可以设置宽高
span a strong
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>displaytitle>
<style>
.div2 {
width: 100px;
height: 100px;
background-color: khaki;
display: inline;
}
style>
head>
<body>
<div class="divs">
<div class="div2">222div>
<div class="div2">333div>
<div class="div2">444div>
div>
body>
html>
display: block;
块级元素
1 自己占一行
2 可以设置宽高
div h1-h6 ul li table
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>displaytitle>
<style>
span {
width: 100px;
height: 100px;
background-color: khaki;
display: block;
}
style>
head>
<body>
<div class="divs">
<span>111span>
<span>222span>
<span>333span>
div>
body>
html>
display: inline-block;
行级块元素
1 多个元素占一行
2 可以设置宽高
img input button 既可以跟其他元素共占一行,又可以设置宽高
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>displaytitle>
<style>
input {
width: 100px;
height: 30px;
}
button {
width: 100px;
height: 50px;
}
style>
head>
<body>
<div class="divs">
<img src="../img/1.png" alt=""><img src="../img/2.png" alt=""><br><br>
<input type="text" name="" id=""><input type="password" name="" id=""><br><br>
<button>提交button><button>注册button>
div>
body>
html>
visibility: hidden;
元素不可以见(但空间占着)
visibility: visible;
元素可见
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>displaytitle>
<style>
.div3 {
width: 100px;
height: 100px;
background-color: khaki;
visibility: hidden;
}
.div4 {
width: 100px;
height: 100px;
background-color: khaki;
visibility: visible;
}
style>
head>
<body>
<div class="divs">
<div class="div3">3434div>
<div class="div4">3434div>
div>
body>
html>
盒子模型有内容、内边距、边框、外边距
padding-top : 上内边距
padding-right : 右内边距
padding-bottom : 下内边距
padding-left : 左内边距
border-top : 上边框
border-right : 右边框
border-bottom : 下边框
border-left : 左边框
margin-top : 上外边距
margin-right : 右外边距
margin-bottom : 下外边距
margin-left : 上外边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-sizingtitle>
<style>
div {
width: 200px;
height: 200px;
background-color: khaki;
border: 5px solid red;
margin: 10px;
padding: 10px;
}
.div1 {
/* 盒子默认值 */
box-sizing: content-box;
}
.div2 {
box-sizing: border-box;
}
style>
head>
<body>
<div class="div1">div>
<br>
<div class="div2">div>
body>
html>
注意:这一切跟margin没有关系
行级元素,margin-top和margin-bottom无效
于行级元素,padding-top和padding-bottom显示上有效果,但是对周围元素没有影响
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行级元素title>
<style>
span {
margin-top: 100px;
margin-bottom: 100px;
}
a {
padding-top: 100px;
padding-bottom: 100px;
}
div {
width: 100px;
height: 100px;
background-color: khaki;
}
style>
head>
<body>
<span>spanspan>
<a href="www.baidu.com">百度a>
<div>123div>
body>
html>
建议优先级:width > padding > margin
建议布局顺序
GitHub代码
gitee代码