day7内容溢出透明度怪异盒模型浮动

2023-12-27 12:58:33

元素内容溢出

属性：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;   不能隐藏自己对自己没有影响溢出部分隐藏

码农公寓