简述css盒模型概念_css盒模型和ie盒模型

大家好，又见面了，我是你们的朋友全栈君。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>html基础复习</title>
</head>
<body>
 <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
 <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
 <!-- 编辑器: webstrom | sublime | atom | pycharm -->

 <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾) <abc> | <num1> | <nav-title> -->
 <!-- 指令: <!doctype html> 注释 -->
 <!-- 转移字符: &gl; &nbsp; -->

 <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->

 <!-- 分类: 单双 | dispaly -->
 <!-- inline: span | b | i | a -->
 <!-- inline-block: img | input -->
 <!-- block: div | hn | p | ul | hr | br -->
</body>
</html>


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css复习</title>
</head>
<body>
 <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
 <!-- 选择器 作用域 样式块 -->


 <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in -->

 <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->

 <!-- 4.文本样式 -->
 <style>
 span { 
 font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2';
 text-align: center;
 color: red;
 text-decoration: underline;
 letter-spacing: 3px;
 word-spacing: 10px;
 text-indent: 2em;
 }
 </style>

 <!-- 5.选择器 -->
 <style type="text/css">
 /*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/
 /*标签 类 id*/
 /*组合选择器*/
 /*伪类选择器*/

 /*优先级：*/
 /*基础选择器： !important > id > 类[属性] > 标签 > 通配*/
 /*组合选择器: 权重(同类型个数比较)*/
 .b > .s {}
 .b .s {}
 .b + .s {}
 .b.s {}
 .b[class] {}

 #ss { font-size: 50px; }
 span.s2 { font-size: 40px; }
 [class] { font-size: 35px; }
 .s1 { font-size: 30px; }
 span { font-size: 20px!important; }

 /* 标签名 | . | # */
 /*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
 /* [属性名="属性值"] */

 </style>

 <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>

 <style type="text/css">
 /* 伪类选择器 */
 /* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
 /* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
 /* :not() */
 /* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
 p:nth-child(3) { font-size: 100px }
 p:nth-of-type(2n) { font-size: 50px }
 </style>
 <div class="box">
 <span>span</span>
 <p>pp1</p>
 <p>pp2</p>
 </div>

 <!-- 6.精灵图 -->
 <style type="text/css">
 .pg { 
 width: 200px;
 height: 200px;
 border: 1px solid black;
 position: absolute;
 top: 10px;
 left: calc(50vw - 100px);
 }
 .pg { 
 background: url('img/bg.png') no-repeat;
 /*将背景图片的具体位置移至显示区域*/
 background-position: -300px -350px;
 }
 </style>
 <div class="pg"></div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>盒模型复习</title>
 <style type="text/css">
 abc { 
 display: inline-block;
 }

 .box { 
 background: orange;

 /*文本类型的样式具有继承关系*/
 font-size: 30px;
 font-weight: 900;
 /*inline-block不会继承*/
 text-decoration: underline;
 text-indent: 2em;
 line-height: 60px;
 }
 </style>
</head>
<body>
 <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) -->

 <div class="box">
 <span>inline</span>
 <div>block</div>
 <abc>inline-block</abc>
 </div>

 <!-- 1.盒子的四个组成部分 -->
 <!-- content | padding | border | margin -->
 <!-- display: inline | inline-block | block -->

 <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 -->

 <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
 <!-- 注: padding-top可以将自身与自身第一个子级分离 -->
 <style type="text/css">
 .p { 
 width: 20px;
 height: 20px;
 background: red;
 }
 .b { 
 width: 100px;
 padding-bottom: 100px;
 border-bottom: 1px solid black;
 }
 .c { 
 background: pink;
 /*border: 1px solid black;*/
 border-style: solid;
 padding-left: 32px;
 padding-bottom: 32px;
 margin-left: 32px;
 /*text-indent: 2em;*/
 }
 </style>
 <div class="b">
 <div class="p"></div>
 </div>
 <div class="c">123</div>

 <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 -->

 <!-- margin: 控制盒子位置 => 盒模型布局 -->

 <!-- 2.边界圆角 -->
 <style type="text/css">
 .bj { 
 width: 100px;
 height: 100px;
 background: pink;
 }
 .bj { 
 /*border-radius: 20px;*/
 /*border-radius: 40%;*/
 /*border-radius: 10px 30px 50px;*/
 border-radius: 10px / 50px;
 }
 </style>
 <div class="bj"></div>

 <!-- 3.display -->

 <!-- 4.margin布局 -->
 <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
 <style type="text/css">
 .hh { 
 width: 30px;
 height: 30px;
 background: black;
 /*display: inline-block;*/
 float: left;
 /*自身动,控制自身布局*/
 /*margin-top: 30px;*/
 /*margin-left: 30px;*/

 /*右兄弟动,辅助兄弟布局*/
 margin-right: 100px;
 /*下兄弟动,辅助兄弟布局*/
 /*margin-bottom: 30px;*/
 }
 .xx { 
 width: 30px;
 height: 30px;
 background: red;
 /*display: inline-block;*/
 float: left;
 }
 </style>
 <div class="hh"></div>
 <div class="xx"></div>

 <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
 <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
 <style type="text/css">
 .x, .z { 
 width: 50px;
 height: 50px;
 background: blue;
 }
 .x { 
 /*margin-bottom: 40px;*/
 }
 .z { 
 margin-top: 10px;
 background: yellow;
 }
 .y { 
 width: 10px;
 height: 10px;
 background: red;
 /*margin-top: 10px;*/
 }
 /*坑1解决方案*/
 .y { 
 /*方案1*/
 /*float: left;
 margin-top: 10px;*/

 /*方案2*/
 /*position: relative;*/
 position: absolute;
 /*top: auto;*/
 /*top: 20px;*/
 margin-top: 20px;
 }
 .z { 
 /*position: relative;*/
 }
 </style>
 <div class="x"></div>
 <div class="z">
 <div class="y"></div>
 </div>
</body>
</html>