【CSS】13.页面切图和布局实现
页面切图和布局实现
1. 浮动布局
1.1 页面布局
LOGO 部分
NAV 布局
LEFT - SIDEBAR：左边栏布局
CONTENT：内容布局
RIGHT - SIDEBAR：右边栏布局
1.2 流式布局
块的默认布局叫做流式布局
但流式布局并不能满足对页面的需要，需要左边栏、内容栏、右边栏，因此需要让块浮动
1.3 浮动布局
要想让块浮动起来需要设置块的Float属性
2. 定位布局
position：static、relative、absolute、fixed、sticky
2.1 static 静态定位
position的默认值，css的默认布局方式
2.2 relative 相对定位
确定元素的位置之后，通过 left、top、right、bottom 的属性来设置元素位置的偏移
2.3 absolute 绝对定位
会把元素移出文档流，会被别的元素挤占空间，但是会显示在挤占的元素的上方，通过 left、top、right、bottom 的属性来设置元素位置的偏移，而且 absolute 是以相对于包含它的元素来偏移
2.4 fixed 固定定位
以浏览器的可视窗口为参照点移动元素，当设置好 left、top、right、bottom 的属性偏移后，无论怎么滚动都不会移动
2.5 sticky 粘性定位
通过 left、top、right、bottom 的属性来设置元素位置的偏移，当滚轮滑到设置偏移位置时，就会固定，其他元素不变，随滚轮动
2.6 z-index
相重叠的盒子，设置方向的偏移
若两个相重叠的盒子不同父级盒子，则取决于父级盒子的方向的偏移
3. display&visibility
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>
4. CSS 盒子模型(Box Model)
盒子模型有内容、内边距、边框、外边距
padding-top : 上内边距
padding-right : 右内边距
padding-bottom : 下内边距
padding-left : 左内边距
border-top : 上边框
border-right : 右边框
border-bottom : 下边框
border-left : 左边框
margin-top : 上外边距
margin-right : 右外边距
margin-bottom : 下外边距
margin-left : 上外边距
4.1 两种盒子模型类型
- box-sizing: content-box (默认)
- 元素的 width = content 的宽度
- box-sizing: border-box
- 元素的 width = content的宽度+ padding + border
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没有关系
4.2 行级元素的注意点
行级元素，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>
4.3 盒子模型布局稳定性
建议优先级：width > padding > margin
建议布局顺序
GitHub代码
gitee代码