day39_css_浮动_display
内容回顾：
1.高级选择器
- 后代选择器 ****
选择的是儿子、孙子子、重孙子
div p{}
- 子代选择器
选择的是亲儿子
div>P
- 组合选择器 逗号分隔
div,p,a,span{}
- 交集选择器 点分割，即同时符合选择器的条件
div.active{}
- 属性选择器
input[type='text']{}
- 伪类选择器 a标签
爱恨准则
a:link{}
a:visited{}
a:hover{}
a:active{}
对a来设置字体颜色，一定要选中a
- 伪元素选择器; 对元素的前后进行添加内容
p:first-letter{}
p:before{
content:''
}
//与浮动有关系
p:after{
content:''
}
2.css的继承性和层叠性
在css中，color 、 text-xxx、font-xxx、 line-xxx这些属性是可以被继承下来；即使不能自动继承也可以手动写入继承
层叠性： 权重 ==》谁的权重大就会显示谁的属性
权重大小的对比：
数选择器的个数： id class 标签
权重比较1：
行内 > id > class > 标签
权重比较2：
继承来的属性，它的权重为0，与选中的标签没有可比性
权重比较3：
都是继承来的，他们权重都为0，就近原则（谁描述的近就选谁）
权重比较4：
都是继承来的，他们权重都为0，描述的一样近，再去数权重
权重比较5：
权重一样大，后面的大于前面的属性（即覆盖）
3. 盒模型
标准盒模型
width:内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border: 边框
margin: 外边距 一个盒子的边到另一个盒子边的距离
计算盒模型：
盒子的大小= width+2*padding+2*border
如果保证盒子大小不变，那么加padding,就要减内容的width或height
4.浮动
浮动是实现元素并排，只要盒子浮动（即 float），就脱离标准文档流（不在文档流上占位置）
今日内容：
*{
padding: 0;
margin: 0;
} 清除样式
1.盒模型的属性(重要)
- padding
/*上下左右*/
padding: 10px;
/*上下 左右*/
padding: 20px 30px;
/*上 左右 下*/
padding: 20px 30px 40px;
/*顺时针 上右下左*/
padding: 20px 30px 40px 50px; 这个和我们平常想的不一样
-border
三要素：线性的宽度 线性的样式 颜色
border: 1px solid red;
border-left: 1px solid red;
如下
.box{
width: 200px;
height: 200px;
background-color: red;
/*width style color*/
/*根据方向来设置*/
/*border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed purple;*/
/*单独设置边的宽度，样式，颜色*/
/*border-left-style: solid;
border-left-width: 1px;
border-left-color: green;*/
/*整体设置，但是依然遵循padding逻辑*/
border-width: 5px 10px;
border-color: green yellow;
border-style: solid double;
/*整体设置*/
/*border: 5px solid green*/
}
三角形
div{
/*color: transparent;*/
width: 0px;
height: 0px;
border-bottom: 90px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
transparent 透明颜色
圆角
div{
/*color: transparent;*/
width: 200px;
height: 200px;
background-color: red;
/*制作圆角*/
/*border-radius: 3px;*/
/*border-radius: 100px;*/
border-radius: 50%; #四个角的大小
}
-margin
前提必须是标准文档流下
margin的水平不会出现任何问题;两个盒子互相踢
.s1{
background-color: red;
margin-right: 30px;
margin-left:60px;
}
.s2{
background-color:rgb(0,128,0);
margin-left: 30px;
}
标准文档流下垂直方向上 margin会出现'塌陷问题' 实际上margin只需要在同一个方向设置距离就可以了；
大的长度会覆盖小的长度；水平方向没有这问题
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 100px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 10px;
}
父子盒子的margin的坑
前提标准文档流（即没有float ），如果想调整子盒子内容不要用margin会在垂直方向上出现问题
一浮动就不会出现marging塌陷的问题和父子的margin坑也不会有了
2.display 显示（重要）
前提必须是标准文档流下
属性：
block 块级标签
- 独占一行
- 可以设置宽高，
- 如果不设置宽，默认是父盒子宽度的100%
inline 行内标签
- 在一行内显示
- 不可以设置宽高，根据内容来显示宽高
inline-block 行内块
- 在一行内显示
- 可以设置宽高
none 不显示 隐藏 不在文档上占位置
visibility：hidden;隐藏 在文档上占位置
标准文档流
什么是标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
标准文档流下 有哪些微观现象？
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在同一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐 如input框，图片
百度下是怎么回事
3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
3.浮动 （重要）
float:none;
left;左浮动 靠左
right;右浮动 靠右
浮动：脱离了标准文档流
作用好处：使元素实现并排（布局）
但是却不在页面上占位置会出现另一种问题，即覆盖后面的标签如下
浮动带来的问题：
子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱;所以需要清除浮动
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
-
（1）浮动
-
（2）绝对定位
-
（3）固定定位
清除浮动：两种方式
1.给父盒子设置固定高度（后期不好维护）设置height高度
2.clear:both;
给浮动元素的最后面，加一个空的块级标签如div(标准文档流的块级标签)
给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both
问题：代码冗余 ;
3. 父元素 <div class="father clearfix">
清除浮动；因为标签浮动的时候标签不占空间造成下个元素覆盖浮动的元素，所以需要清除浮动
.clearfix:after{
content: '.';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
第四种防范
4.overflow:hidden; #设置父元素的样式；最简单
字围效果；第一个div浮动，第二个div不浮动为文字则文字不会被第一个div覆盖
|
visible
|
默认值。内容不会被修剪，会呈现在元素框之外。
|
|
hidden
|
内容会被修剪，并且其余内容是不可见的。
|
|
scroll
|
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
|
|
auto
|
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
|
|
inherit
|
规定应该从父元素继承 overflow 属性的值。
|
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域。
要浮动一起浮动，有浮动，清除浮动
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
-
none: 表示不浮动，默认
-
left: 表示左浮动
-
right：表示右浮动
那么浮动如果大家想学好，一定要知道它的四大特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
浮动元素脱标
脱标：就是脱离了标准文档流
清除浮动的方法
-
给父盒子设置高度
-
clear:both
-
伪元素清除法
-
overflow：hidden
问题1 为什么给父标签设置 overflow：hidden会清除浮动
