CSS页面布局方式
css页面布局方式
1.标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标准流: 行内的一排一排摆放. 块级的自动换行*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.box3 {
background-color: black;
}
.box4 {
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
<div class="box2">22222</div>
<span class="box3">3333</span>
<span class="box4">44444</span>
</body>
</html>
2.浮动流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
浮动流是一种半脱离文档流的一种方式:
1. 什么是脱离文档流:
不在受块级or行级的限制. 都可以设置width和height
2. 什么是半脱离:
是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
（1）同一个方向上谁先浮动，谁在前面
（2）不同方向上左浮动找左浮动，右浮动找右浮动
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
/*浮动流不能居中显示*/
margin: 0 auto;
}
.box2 {
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<span class="box1">32113123</span>
<div class="box2"></div>
</body>
</html>
3.浮动流案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: purple;
float: right;
}
.box4 {
width: 400px;
height: 400px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
4.浮动流的贴靠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 50px;
height: 50px;
background-color: red;
}
.box2 {
width: 800px;
height: 800px;
border: 5px dotted black;
}
.son1 {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #2f0099;
float: left;
}
.son3 {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
/*当盒子宽度不够. 会顺着盒子向下贴靠*/
.son4 {
width: 400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
</div>
</body>
</html>
5.浮动流-字围现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">321321
21111
2111121111
21111
21111
21111
21111
21111
</div>
</body>
</html>
字围现象效果1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*让图片浮动靠左. 带有文字的段落会向上挤并实现字围效果*/
img {
width: 100px;
float: left;
}
p {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<img src="img/sg.jpg" title="这是一个帅气的狗子" alt="">
<p>原产于日本，是一种古老的品种，经长期豢养培育，养成忠实、服从、忍耐的天性。 柴犬的警觉性高，平时习惯警觉地站在高处向下观望，个性机敏、独立，身体强健，动作敏捷，色泽如木柴，以前主要是被人类训练用来猎捕小动物，曾是穿梭于深山林间的狩猎好手，故称之为柴犬。 柴犬外观和日本秋田犬比较好像是它的缩小版。</p>
</body>
</html>
字围现象效果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字围现象不仅仅是文字会包围浮动元素. inline-block元素也会包围浮动元素*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 10px;
height: 10px;
background-color: green;
border: 1px dotted black;
display: inline-block;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
6.浮动流-实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉内边距外边距*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #d4d4d4;
}
.header {
height: 10%;
width: 80%;
background-color: red;
padding: 10px;
/*想要设置的边框和内边距的值是包含在width内的.*/
box-sizing: border-box;
/*居中*/
margin: 0 auto;
}
/*这里设置的高度100%需要注意. 是box-sizing综合的结果
1. 先设置内边距10px.
2. 再后面高度的100%是处了内边距之外的. 就自动排好了边距
*/
.logo {
width: 20%;
height: 100%;
background-color: pink;
float: left;
}
.title {
width: 70%;
height: 100%;
background-color: yellow;
float: right;
}
.content {
width: 80%;
height: 78%;
background-color: green;
margin: 0 auto;
margin-bottom: 1%;
margin-top: 1%;
padding: 10px;
box-sizing: border-box;
}
.guide {
width: 20%;
height: 100%;
background-color: purple;
float: left;
}
.article {
width: 70%;
height: 100%;
background-color: deepskyblue;
float: right;
}
.footer {
width: 80%;
height: 10%;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="title"></div>
</div>
<div class="content">
<div class="guide"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>
7.浮动流-实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动流排版练习3</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.header {
height: 100px;
width: 980px;
background-color: #f6c2d2;
margin: 0 auto;
}
.content {
height: 400px;
width: 980px;
background-color: #fefefe;
margin: 0 auto;
margin-top: 10px;
}
.content .aside {
width: 320px;
height: 400px;
background-color: #fcfd00;
float: left;
}
.content .article {
width: 650px;
height: 400px;
background-color: #fefefe;
float: right;
}
.content .articleTop {
width: 650px;
height: 350px;
background-color: #fefefe;
}
.content .articleTopLeft {
width: 400px;
height: 350px;
background-color: #fefefe;
float: left;
}
.content .articleTopLeft .new1 {
width: 400px;
height: 200px;
background-color: #e9289c;
}
.content .articleTopLeft .new2 {
width: 400px;
height: 140px;
background-color: #3dd1fd;
margin-top: 10px;
}
.content .articleTopRight {
width: 240px;
height: 350px;
background-color: #acde3d;
float: right;
}
.content .articleBottom {
width: 650px;
height: 40px;
background-color: #b9950c;
margin-top: 10px;
}
.footer {
height: 40px;
width: 980px;
background-color: #ec6357;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="aside"></div>
<div class="article">
<div class="articleTop">
<div class="articleTopLeft">
<div class="new1"></div>
<div class="new2"></div>
</div>
<div class="articleTopRight"></div>
</div>
<div class="articleBottom"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
示范三
8.父级塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级塌陷</title>
<style>
/*儿子飘了. 父级就垮了*/
.box1 {
border: 1px solid black;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
9.父级塌陷解决方案
父级塌陷解决方案1:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给父级加个高</title>
<style>
.box1 {
border: 1px solid black;
height: 100px
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案2:(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear: both</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
/*clear: both左右没有浮动标签*/
.box3 {
width: 200px;
height: 200px;
background-color: green;
clear: both;
/*是从贴靠开始计算的. 所以需要加上高度*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:外墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*设置外墙来清除浮动. 并隔离出空间*/
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="wall"></div>
<div class="box3"></div>
</body>
</html>
父级塌陷解决方案3:内墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
.wall {
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="wall"></div>
</div>
<div class="box3"></div>
</body>
</html>
父级塌陷-终极方案:(内墙法+伪元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法+伪元素</title>
<style>
.box1 {
border: 1px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
/*在box1后面插入一个标签并清除浮动*/
.box1:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
10.父级塌陷和margin-top问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.father{
width: 200px;
height: 200px;
background-color: green;
}
/*margin-top问题: son因为父级没有边框作为参照物. 直接将父级也拉下来了
1. 将父级加上一层边框
2. 在son前面加一个伪元素. 不占空间. 但是可以作为参照物
*/
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
}
/*标准模板: 防止父级塌陷和margin-top问题
将clearfix加在有需要的父级盒子的属性后面!!!
*/
/*table配合空文本: 有标签. 但是不占空间*/
.clearfix {
*zoom: 1;
}
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
</html>
11.初级博客页面
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix {
*zoom:1
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.left {
/*display: none;*/
width: 20%;
height: 100%;
background-color: rgb(77,77,77);
position: fixed;
top: 0;
left: 0;
color: darkgrey;
}
.left .header-img {
width: 120px;
height: 120px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
}
.left .header-img img {
max-width: 120px;
}
.left .blog-title {
text-align: center;
}
.left .blog-info {
font-size: 12px;
text-align: center;
margin-top: 10px;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.blog-link,.blog-tag {
margin-top: 20px;
text-align: center;
/*width: 100px;*/
/*border: 5px solid #000;*/
/*margin: 0 auto;*/
}
.blog-link a,.blog-tag a{
color: darkgrey;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
font-size: 14px;
}
.right {
width: 80%;
height: 1000px;
background-color: #eee;
float: right;
}
.article-list {
padding-left: 50px;
width: 80%;
}
.article-list .article {
background-color: white;
margin-top: 20px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
.article-list .article *{
padding: 10px;
}
.article-list .article .article-header p {
float: left;
font-size: 24px;
font-weight: bold;
border-left: 5px solid red;
}
.article-list .article .article-header span {
float: right;
margin: 10px 0;
}
.article-list .article .article-info {
border-bottom: 1px solid darkgrey;
}
</style>
</head>
<body>
<div class="left">
<div class="header-img">
<img src="o_tx.jpg" alt="">
</div>
<div class="blog-title">
<p>我的博客</p>
</div>
<div class="blog-info">
<p>这个人很懒，什么都没留下</p>
</div>
<div class="blog-link">
<ul>
<li><a href="#">关于我</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Golang</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-header clearfix">
<p>海燕</p>
<span>2018-07-03</span>
</div>
<div class="article-info">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔</p>
</div>
<div class="article-tag">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
</div>
</div>
</body>
</html>
12.补充: 无序列表居中问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.part {
width: 200px;
height: 200px;
background-color: red;
}
/*无序列表存在边距问题. 如果不去掉会导致不能居中*/
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
text-align: center;
}
</style>
</head>
<body>
<div class="part">
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
</div>
</body>
</html>
13.定位流-相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 10px;
left: 10px;
/*原来的位置加上外边距100px */
margin-top: 100px;
}
input {
height: 30px;
}
img {
height: 50px;
position: relative;
top: 21px;
left: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!-- 加上验证码-->
<input type="text" placeholder="请输入验证码">
<img src="验证码图片url" alt="">
</body>
</html>
14.定位流-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位脱离文档流. 绝对定位参照其父级. 父级必须是定位流才会参照
所以想相对于父级的位置移动: 子绝父相
*/
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
/*设置相对位置*/
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
15.绝对定位-忽略父级的padding属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
padding: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
16.绝对定位的元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
/*绝对定位先相对父级居中. 而后移动半个边框的距离. 居中*/
.box2 {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
.box3 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3">
<div class="box2"></div>
</div>
</body>
</html>
17.绝对定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
ul>li {
float: left;
width: 200px;
height: 50px;
background-color: rgba(155,155,155,0.09);
text-align: center;
line-height: 50px;
border: 1px solid red;
}
/*设置停留效果*/
ul>li:hover {
background-color: pink;
}
/*.bg {*/
/* background-image: url(img/img.png);*/
/* background-repeat: no-repeat;*/
/* background-size: 50px;*/
/* background-position: top right;*/
/*}*/
ul>li:nth-child(3) {
position: relative;
}
img {
position: absolute;
width: 40px;
top: -7px;
left: 78px;
}
</style>
</head>
<body>
<ul>
<li>basketball</li>
<li>football</li>
<li class="bg">
baseball
<img src="img/img.png" alt="">
</li>
<li>tennis</li>
<li>run</li>
</ul>
</body>
</html>
18.固定定位案例-回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
.box2 {
width: 1000px;
height: 200px;
background-color: green;
}
.box3 {
width: 300px;
height: 600px;
background-color: pink;
}
/*将标签改成行内块级. 可以设置宽高
改成固定定位就可以跟着屏幕移动
*/
a {
text-decoration: none;
text-decoration-color: rgba(21,0,10,0.99);
display: inline-block;
width: 100px;
height: 100px;
background: rgba(175, 167, 167, 0.14);
border-radius: 50%;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<a href="#">回到顶部</a>
</body>
</html>
19.z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fathter1 {
width: 300px;
height: 300px;
background-color: red;
position: relative;
z-index: 10;
}
.son1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
bottom: -10px;
right: -50px;
z-index: 3;
}
.fathter2 {
width: 300px;
height: 300px;
background-color: green;
position: relative;
z-index: 1;
}
.son2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: -20px;
right: -10px;
z-index: 4;
}
</style>
</head>
<body>
<div class="fathter1">
<div class="son1"></div>
</div>
<div class="fathter2">
<div class="son2"></div>
</div>
<form action="">
<input type="text" name="xx">
<input type="submit" value="1111">
</form>
</body>
</html>
CSS页面布局方式的更多相关文章
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
- CSS原生布局方式
前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默 ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
- css页面布局之左侧定宽，右侧自适应
二列布局的特征是侧栏固定宽度,主栏自适应宽度.三列布局的特征是两侧两列固定宽度,中间列自适应宽度. 之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲 ...
- CSS页面布局与网格（上）
1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
随机推荐
- 手机设置网络代理后，网络不可用之app-jmeter性能测试
1.检查crt证书是否安装 (手机) 2.Jmeter设置HTTP代理端口和ip与手机设置代理参数一致即可
- react 收集表单数据 react-hook-form
import React from 'react' import ReactDOM from 'react-dom' import { useForm } from 'react-hook-form' ...
- springBoot的全局异常处理
GlobalException.java package com.bank.util; import com.bank.exception.ContentEmpyException; import c ...
- unity更改c#文件名的小tip
今天偶然知道了一个在Unity中更改代码文件名的小技巧--最好先在Unity的project视图里找到文件,改完后再去visual studio等代码编辑器里改里面的类名. 以前都没注意,想起来要改某 ...
- bash中的basename与dirname以及${}
var=/dir1/dir2/file.tar.gz basename $var #获取文件名 file.tar.gz dirname $var #获取目录名称 / ...
- fatal: unable to access 'https://github.com/github-eliviate/papers.git/': Failed to connect to github.com port 443 after 21107 ms: Timed out
fatal: unable to access 'https://github.com/github-eliviate/papers.git/': Failed to connect to githu ...
- 你的梦想家居「GitHub 热点速览」
上周推荐的 ChatGPT 版小爱,不知道有哪些小伙伴回去尝试接入了呢?本周依旧由 2 个不错的 ChatGPT 延伸项目,一个是比 DeepL.Grammarly 更懂你的划词翻译 openai-t ...
- [数据分析与可视化] Python绘制数据地图1-GeoPandas入门指北
本文主要介绍GeoPandas的基本使用方法,以绘制简单的地图.GeoPandas是一个Python开源项目,旨在提供丰富而简单的地理空间数据处理接口.GeoPandas扩展了Pandas的数据类型, ...
- buildroot交叉编译ros过程中遇到的问题
问题:Download error on https://pypi.python.org/simple/python-dateutil/:unknown url type:https --Some p ...
- Why WebRTC丨前世今生
前言 近几年实时音视频通信应用呈现出了大爆发的趋势.在这些实时通信技术的背后,有一项不得不提的技术--WebRTC. 今年 1 月,WebRTC 被 W3C 和 IETF 发布为正式标准.据调研机构 ...