css标准流/非标准流盒子模型

流：网页设计中就是指元素（标签）排列的方式

标准流：元素在网页中就像流水，排在前面的先出现，排在后面的后出现,默认布局方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="background: gray;">我的div</div><span>span1</span><span>span2</span><div>北京你好</div></body>
</html>

View Code

非标准流：在世纪网页布局中，可能需要使用非标准流方式布局（让某个元素脱离本身的位置）

盒子模型Box：

两个元素之间的距离margin

元素里面的距离padding（填充:上下左右）

填充物为content（内容）

元素边框 border

坐标体系的话与坦克大战一样的，

在html元素都可以看做是盒子，参照物不一样，使用的属性也不一样

paddinng margin都可以实现，但是padding可以撑大盒子，有弹性

box1.css

body{border: 1px solid red;/*顺序无关 边框的宽度 样式 颜色*/width: 800px;height: 1000px;/*使其居中*/margin: 0 auto;/*上下边距为0 居中*/
}
.s1{width: 50px;height: 52px;border: 1px solid blue;margin-top:10px ;margin-left: 10px;/*padding-top:5px ;padding-left: 5px;/*可能会将盒子撑大*/*/
}
/*父子选择器*/
.s1 img{width: 40px;margin-left: 5px;margin-top: 5px;
}

View Code

box1.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/box1.css" /></head><body><div class="s1"><img src="img/qq2.jpg"/></div></body>
</html>

View Code

box2.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/box2.css" /></head><body><div class="div1"><ul class="faceul"><li><img src="img/qq2.jpg"/><a href="#">小龙女</a></li><li><img src="img/qq2.jpg"/><a href="#">小龙女</a></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li></ul></div></body>
</html>

View Code

box2.css

body{margin: 0px;padding: 0px;
}
/*用于控制现实的位置*/
.div1{width: 500px;height: 400px;
border: 1px solid #b4b4b4;
margin-left:100px ;
margin-top: 10px;
}/*用于控制显示图片区域的内容*/
.faceul{width: 400px;height: 300px;border: 1px solid red;list-style-type: none;/*去掉点*//*margin: 0px;*/padding: 0px;
}
/*用于控制单个图片大小*/
.faceul li{width: 50px;height: 80px;border: 1px solid blue;float: left;/*左浮动*/margin-left:5px ;margin: 5px;}
/*控制图片自己的显示*/
.faceul img{width: 40px;margin-left:5px;margin-top:5px ;margin-bottom:4px ;
}
.faceul a{font-size: 12px;margin-left: 5px;margin-top: 2px;
}
a:link{text-decoration: none;color: black;
}
a:hover{text-decoration: underline;color: blue;
}

View Code

box3.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/box3.css"/></head><body><div class="div1"><div><span class="span1"><font class="font1">QQ达人</font><a href="#">更多达人</a></span><ul class="faceul"><li><img src="img/qq2.jpg"/><br/><a href="#">张珊</a></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/><br/><a href="#">张珊</a></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/><br/><a href="#">张珊</a></li><li><img src="img/qq2.jpg"/></li><li><img src="img/qq2.jpg"/></li></ul></div></div></body>
</html>

View Code

box3.css

body{
margin: 0 auto;
width: 1000px;
height: 1000px;
border: 1px solid blue;
}
.div1{
width: 350px;
height: 370px;
border: 1px solid red;}
/*定义几个常用的字体*/
.font1{
font-weight:bold ;
font-size:20px ;
margin: 2px 0px 0px 2px;
}
/*创建几种超链接样式*/
a:link{
text-decoration: none;
}.span1{
/*background: pink;*/
display: block;/*块状显示*/
}
.span1 a{
margin-left:200px ;
}
.faceul{
width: 350px;
height: 100px;
/*background: sienna;*/
list-style-type: none;/*去掉标记点*/
padding: 0px;/*外部左对齐*/
}
.faceul li{
float: left;
width: 107px;
height: 100px;
/*background: pink;*/
margin-left:5px ;
text-align: center;/*图片居中*/
}
.faceul img{
margin: 2px ;
width: 80px;
padding-bottom: 0px;
}

View Code

转载于:https://www.cnblogs.com/helloworld2019/p/10905309.html

css标准流/非标准流盒子模型相关推荐

poe交换机标准与非标准的区别介绍
POE指的是在现有的以太网Cat.5布线基础架构不作任何改动的情况下,在为一些基于IP的终端(如IP电话机.无线局域网接入点AP.网络摄像机等)传输数据信号的同时,还能为此类设备提供直流电的技术,就是 ...
css知多少（7）——盒子模型
原文:css知多少(7)--盒子模型 1. 引言从这一节开始,我们就进入本系列的第三部分--css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类--文字.这部分相 ...
一个简单的css网页换色例子（盒子模型）
原始的代码来自北京林业大学的MOOC课程:web前端开发,我自己把这个例子又写了一遍,主要是对css部分做了修改(盒子模型杀我),js和HTML部分与课程的源代码基本相同.现在记录一下,首先是代码: ...
HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录行内块级元素文档流 font属性文本段落文字属性盒子模型概念和属性常见问题块元素和行元素的相互转换 display属性 overflow属性边框.宽度与高度浮动float 练习 ...
css知识笔记（二）——盒子模型
盒子模型类比月饼:礼盒是最外层,里面的月饼(伍仁)是页面元素,比如一个div:"伍仁"本身是盒子的内容(可以是文字.图片.另一个标签元素),月饼和月饼盒之间的距离称为盒子模型的内 ...
【CSS】尺寸和边框、盒子模型、外边距_02
目录一.CSS3概述二.CSS的语法规范三.基础选择器四.尺寸和边框 1.尺寸属性 2.页面中允许设置尺寸的元素 3.溢出 4.边框 (1) 边框的简写形式 (2) 单边的设置 (3) 单属性 ...
CSS代码中的属性，盒子模型
CSS中的属性是由属性名以及属性值来构成的. 字体大小:font-size:16px; 设置的是字体的高字体粗细:font-weight:?; ?包括lighter,normal,bold 字体样 ...
html盒子边框内部线条,详解CSS从条纹边框的实现盒子模型的方法
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS属性,赶紧去补习一下吧. 2.类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 p: 定义 ...
css第十二课：盒子模型
学盒子模型的目的是:让盒子与盒子之间有一段距离,页面布局更好看, 看下面这个百度上的文本,最外面是背景盒子,盒子里面有内容,内容和盒子之间有空隙,我们接下来学习认识盒子模型,并学会怎么去设置这个空隙 ...

css标准流/非标准流盒子模型

css标准流/非标准流盒子模型相关推荐

最新文章

热门文章

css标准流/非标准流 盒子模型

css标准流/非标准流 盒子模型相关推荐

最新文章

热门文章

css标准流/非标准流盒子模型

css标准流/非标准流盒子模型相关推荐