day7内容溢出 透明度 怪异盒模型 浮动
作者：互联网
元素内容溢出
属性：overflow:;
取值：
overflow: hidden; 溢出部分隐藏
overflow: auto; 自动 有溢出 就显示滚动条 没有溢出 则不显示滚动条
overflow: scroll; 不管溢不溢出 都显示滚动条
2.一行文字溢出省略号显示
white-space: nowrap; 文字在同一行显示（不换行）
overflow: hidden; 溢出部分隐藏
text-overflow: ellipsis; 文字溢出部分省略号显示
opacity
设置整个元素的透明度
取值：0-1
0：完全透明
1：不透明
eg:.box>div:hover {
opacity: .5;
}
margin-top问题
当第一个块级子元素设置，margin-top时，父元素跟着一起下来
解决办法：
1）父元素加overflow:hidden;(找到原位置)
2)父元素或者子元素浮动
3)父元素加border:1px solod transparent; (一般不用)
4)父元素加padding-top:1px;
1.标准盒模型 w3c盒模型
1）组成部分
content+padding+border+margin
2)实际宽度
width+padding+border+margin
内容的宽高就是width width表示内容的宽度
2.怪异盒模型 IE盒模型
1）组成部分
content+padding+border+margin
2)实际宽度
width+margin
因为怪异盒模型的width不只是内容的宽度还包含了border和padding
内容的宽高+padding+border=width
3.盒模型相互转换
box-sizing:content-box; 默认值 标准盒模型
box-sizing:border-box; 怪异盒模型
伪对象选择器
伪对象选择器也叫伪元素选择器
伪类：一般反应无法在css中轻松或者可靠检测到的某个元素的状态或属性；
伪元素：表示DOM外部的某种文档结构
常用伪元素：
1. E:before/E::before
2. E:after/E::after
1. E:before/E::before
before选择器在被选元素的"内容"前面插入内容，用来和content属性一起使用。
虽然E:before可转化为E::before,但你写伪元素时要规范，用两个冒号。
2. E:after/E::after
after选择器在被选元素的"内容"后面插入内容，用来和content属性一起使用
eg :插入文字.box::before {
content: "这是一个";
}
插入图片.box::before {
content: url("../images/2.jpg");
}
浮动
Float属性定义元素在哪个方向上浮动，浮动元素会产生一个块级框，
而不论它本身是何种元素
CSS中的float(浮动)使元素脱离文档流，按照指定的方向（左或者右发生移动），
直到它的外边缘碰到边框（父元素的边框或者前面的不浮动的元素的边框或者
前面的浮动元素的边框）为止
文档流：文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流
就是在页面中不占位置了。
1.原理
浮动后脱离文档流(排除到普通流之外)
浮动后在页面不占据位置（原位置不保留）
浮动碰到边框（父元素的边框或者前面的不浮动的元素的边框或者前面的浮动元素的边框）
就会停止
注意：不浮动的元素独占一行 那么浮动的元素会浮动到前面不浮动元素的下一行
浮动不会层叠
浮动只有左右浮动
浮动后所有元素转换为块级元素
注意：one不浮动 two浮动的话 two并不会把one盖住 因为two会碰到one的边框
会停止
2.语法
float:left/right/none;
3.清除浮动的影响
子元素浮动，父元素高度坍塌，对后面的元素产生影响
1）受影响的元素（一般是高度坍塌的父元素后面的元素）加clear:left/right/both;
--浮动元素的父元素的高度没有找回 还是坍塌
2）浮动元素的父元素加高--高度已知
3）浮动元素的父元素加overflow；hidden/auto;(自动找高)
4)空div法
浮动元素后面加一个空div
空div{clear:both;}
5)伪对象法
浮动元素的父元素::after{
content: "";
display: block;
clear: both;
}
display属性：
display属性规定元素应该产生的框的类型
1.定义
每一个元素都自带display属性
2.属性
display:;
3.属性值
取值 描述
none 此元素不会被显示 隐藏 不占据位置
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素 既在同一行显示，也可以设置宽高
注意：行内块会识别代码之间的空白块 常见的行内块元素：img，video，audio，input button
table-cell 此元素会作为一个表格单元格显示（类似<td>和<th>）
Flex 弹性盒模型
table 表格
table-cell 单元格
4.display:none;和visibility:hidden;和opacity:0;和overflow:hidden;的区别
display:none; 隐藏自己 看不见了 隐藏后不占据位置
visibility:hidden; 隐藏自己 看不见了 隐藏后占据位置 原来位置保留
opacity:0; 透明度为0 隐藏自己 看不见了 隐藏后占据位置 原位置保留
overflow:hidden; 不能隐藏自己 对自己没有影响 溢出部分隐藏
标签：浮动,day7,元素,边框,溢出,overflow,hidden,怪异,before 来源： https://blog.csdn.net/weixin_44650190/article/details/120198705