文章目录
（12） css盒子模型
1.组成及其基本属性
组成： content -> padding -> border -> margin
整个容器 内边距 边框 外边距
（边框与数据距离） （两个盒子之间距离）
content： 设置容器大小，背景颜色，文字颜色
padding: 设置外边距的属性（不可为负数）
方法一 ：
Padding 30px; 上下左右都是30px
Padding 30px 40px 上下是30px 左右是40px
Padding 30px 40px 50px 60px 依次设置上下左右
方法2：
padding-left padding-right padding-top padding-bottom
Border: 设置边框大小颜色（上面讲过）
Margin： 设置外边距：（可为负数）
方法一 ：
margin 30px; 上下左右都是30px
margin 30px 40px 上下是30px 左右是40px
margin 30px 40px 50px 60px 依次设置上下左右
方法2：
margin-left margin-right margin-top margin-bottom
注意：
1.背景颜色会填充到边框上，有的时候只是被边框颜色遮住了
2.文字等数据在content添加
3.内边框不可为负数、外边框可为负数
<style>
#box{
width: 200px;height: 200px;background-color: brown;
border: 10px solid turquoise;
padding: 30px;
margin: 10px;
}
</style>
2.盒子的属性
box-sizing： 盒子尺寸：可以改变盒子模型的展示状态（2种状态可选择）
content-box（默认值）: width、height -->content（宽和高只决定边框大小）
Border-box: width、height-->content,padding,border（决定三个）
选择Border-box：填写文字的区域已经计算好（不需要在用(总-边框-内边距)进行计算）
使用场景：
1.不用再计算一些值
2.解决一些百分比的问题
#box{
width: 200px;height: 200px;background-color: brown;
border: 10px solid turquoise;
padding: 30px;
box-sizing: border-box; //设置为border-box状态
}
3.盒子的margin叠加问题：
1、
这个问题只存在上下有，左右是没有叠加问题的
两个盒子之间的间距不会出现累加问题，只是重叠（比如说：上面盒子外下边距为30px，下面盒子外上边距为20px，实际的体现效果两个盒子之间的间距为30px）
两个盒子同时纯在外边距时，会取较大的一个外边距（不论正负）
2、
不想让其叠加，想让其累加，怎么办？？
两种解决方案：
1：BFC规范
2：只给一个盒子添加边距，不同时给两个盒子添加边距
4.盒子模型之margin传递问题
margin传递问题只会出现在嵌套的结构中，且只有margin-top（上边距）会有传递问题，其他三个方向不会有传递问题：
<style>
#div1{width: 100px;height: 100px;background-color: burlywood;}
#div2{width: 30px;height: 30px;background-color: darkblue;margin-top: 70px;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
结果发现：
给里面嵌套的盒子，会把最外层的盒子位置带下去：
三种解决方案：
1：BFC规范
2：给父类容器加边框
3：给外层容器加padding（内边距）
5.盒子模型的扩展
1.
给margin-left或者margin-right设置值可以左右移动
margin-left:auto margin-right:auto 左右都设为自适应----->会居中
或者
margin: 0 auto 上下边距为0，左右为auto
（上下就算设置auto也不会自适应，css设计的时候考虑到页面会有滑动条，没有对上下自适应设置：---->在新版的css中已经有了解决方法）
2.
当不设置宽度的时候，会自动的根据父类（无父类时整个容器）计算盒子的大小，节省代码
<style>
#div1{width: 100px;height: 200px;background-color: burlywood;}
#div2{height: 100px;background-color: darkblue;}
</style>
<div id="div1">
<div id="div2"></div>
/div>
结果：
（13） 标签的分类
1、按类型划分
Block（块）: div p ul li h1.....
1.独占一行
2.支持所有的样式
3.不写宽的跟父类的宽相同
4.所占区域是一个矩形区域
Inline（内联）: span a em strong img ....
1.挨在一起的
2.一些样式不支持（width、height等等有些标签不支持）
3.不写宽的时候由内容决定
4.所站的区域不一定是矩形
5.内联标签之间会有空隙（应为两个内联标签没写正在一行引起的）
Inline-block(有块和内联的特性）： input select........
1.挨在一起，但支持宽高
2、按内容进行分类：
3、按显示分类：
替换元素：img input......(把地址换为真实的图片)
非替换元素：div h1 p .........
（14）显示框类型
display属性: 设置框架类型
可设置的值有：
Block 块的形式
Inline 内联的形式
Inline-block 块+内联
None 隐藏
…
列1：
<style>
div{width: 100px;height: 100px;background-color: darkturquoise;display: inline;}
</style>
//把div的显示框设为内联式，该div的宽和高就不会显示出来
列2：
<style>
div{width: 100px;height: 100px;background-color: darkturquoise;display: inline-block;}
span{width: 100px;height: 100px;background-color: blue;display: inline-block;}
</style>
<div>123</div>
<div>123</div>
<span>123</span>
<span>123</span>
//结果：
//把div和span两个标签样式都声明为内联+块的模式
所以div会具有一行可多个显示
所以span会具有宽高的属性
（15）标签的嵌套规范
1.快标签可以嵌套内联标签
2.快标签不一定能嵌套快标签（p里面有div）
3.内联标签不能嵌套块标签（a标签是个例外，比如：a标签里面有div）
（16）溢出隐藏
当文本内容超出容器的大小时，会出现文本内容超出容器
overflow属性： 提供了多个可选择项
visible 默认值，直接溢出容器
hidden 根据容器大小剪切文本内容
scroll 在容器上加滚动条
auto 自适应（文本内容较少时不加滚动条，较多加）
overflow-x: 只对x轴设置
overflow-y: 只对y轴设置
（17）透明度
Opacity: 0（通明） ~ 1（不透明） 设置整个容器所有的东西的通明程度
0.5半通明
rgba(红，蓝，绿色，通明程度） 设置当属性颜色的时候设置透明度
（ 比如在设置背景颜色的时候rgba只会改变背景颜色 的透明度）
（18）手势
1.怎么设置手势
当鼠标表移动到该容器上时候的鼠标样式
Cursor ： 设置手势
有多种选项：
default 默认样势（箭头）
pointer 手型
move 移动
help 帮助
自定义鼠标样式
......
2. 怎么实现自定义鼠标手势？？
准备图片： .ico 或者 .cur 格式的图片
格式 cursor： url(图片路径) , auto;
（19）最大最小宽高
容器中的内容不管多少，容器的宽高不会变
最小宽高：内容再小，也会保持该宽高
最大宽高；内容再多，宽高最大为该值
min-width: 最小宽度
min-height: 最小宽度
max-width: 最大高度
max-height: 最大高度
<style>
div{width: 300px;height: auto;border: 2px black solid;}
</style>
宽度一定，高度自适应(就算不写高度自适应--->默认也是)
一个容器怎么适应屏幕的高？？？
html,body{ height:100%}
.div1{height:100%}
（20）css的默认样式
可通过浏览器的调试台，查看默认样式
没有默认样式的： div span
有默认样式的：
body --> margin: 8p
h1 -->margin:上下21.440px
font-weight:bold
p -->margin:上下16px
Ul -->margin:上下16px padding： 左40px
默认点：list-style:disc
a --> text-decoration:underline
（21）常见的css重置样式
（1）*{margin: 0px;padding:0px}
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微影响性能
或者body,p,h1,ul{margin: 0px;padding:0px}只改变一部分标签
（2）ul{list-style:none}
（3）img{display: block;}
问题的现象：图片和底部容器有一定的间隙
产生的原因：内联元素是按照文字的基线对齐，而不是按文字底线对齐
解决方法：img{vertical-align: bottom;}或者img{display: block;}转为块
（22）float浮动
文档流？？
块从上到下，内联从从左到右
float浮动？？
脱离文档流（不会改变容器的大小），只是沿着父容器靠左或者靠右依次进行排列；
（块一定和块挨着，浮动写在块后面和块挨着，否则浮动挨着浮动）
（后面块直接忽略前面块的位置，找到上一个块挨着 ）
float： 设置float浮动
可选值：
left 左移动
right 右移动
<style>
.div{width: 100px;height: 100px;background-color: brown;}
.div1{width: 200px;height: 200px;background-color: black;float: left;}
.div2{width: 300px;height: 300px;background-color: blue;}
.div3{width: 400px;height: 400px;background-color: chartreuse;float: left;}
</style>
<div class="div"></div> //橘色块
<div class="div1"></div> //黑色浮动
<div class="div2"></div> //蓝色块
<div class="div3"></div> //绿色浮动
清除浮动的影响：
（23）position定位
使用方式 Position：选择哪种定位；偏移量的设置
定位的种类：
static（默认）
relative(相对定位)
absolute（绝对定位）
fixed（固定定位）
Sticky（黏性定位）
1.Relative相对定位（相对于自己的初始位置）
如果没使用定位偏移量，对元素本身没有任何影响
不会使元素脱离文档流
不会影响其他元素布局
left、top、right、bottom是相对于当前元素本身进行某个方向的偏移
#div{width: 200px;height: 200px;background-color: chartreuse;
position: relative;left: 100px;top: 200px;}
该容器先往右平移100px 在往下面平移100px
2.absolute绝对定位
使元素完全脱离文档流
使内联元素支持宽高
使块元素默认宽根据内容决定
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（祖先元素为继承的祖先，如果祖先元素设置了定位，则根据祖先元素定位偏移）
3.fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高
使块元素默认宽根据内容决定
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
4.黏性定位
在指定位置进行黏性操作
当滚动条进行滑动的时候，该容器滑动到某一个位置，就固定住了（黏贴）
#div3{background-color: red;position: sticky;top: 100px;height: 2em;}
5.容器重叠问题显示？？
Z-index： 数字 设置定位层级
（两个容器重叠，默认是后写的优先级高（后面的显示），可根据其调重叠谁显示）
默认层级为0
嵌套时候的层级问题？？
嵌套的先一层一层比较
（24）css中添加省略号(单行的)
overflow:hidden
当内容比较多的时候，不想让他完全显示----->添加省略号显示
（不择行、隐藏溢出内容、固定宽的情况下才能使用）
后面在学多行的情况
#div{width: 200px;white-space: nowrap;;overflow: hidden;text-overflow: ellipsis;border: 3px black solid;}
（25）CSS Sprite
css雪碧也叫css精灵，是一种网页图片应用处理的方法。
他允许你讲一个页面涉及到的所有零星图片都包含到一张大图中去加载.
好处：
减少图片的质量，网页的图片加载速度快
减少网页的请求次数，加快打开网页
怎么获取雪碧图的某一张图片？？？？
让一个容器中只显示雪碧图的那一部分（背景的一个定位）
（先用ps获取图片的宽高以及在图片的高度，还有是在雪碧图的左右）
#box{width: 图片宽 ;height: 图片高;background: url(./img/雪碧图.jpg) no-repeat left: 高度;;}
（26）css圆角设置
border-radius: 半径px 该标签添加圆角大小为px
当半径大小为容器的一半或者50%的时候---->形成一个圆
border-radius:值 四个角
border-radius:值1 值2 上面两个和下面两个
border-radius: 值1 值2 值3 值4 顺时针
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
