cssday4
来源：互联网 发布：义乌淘宝代运营 编辑：程序博客网 时间：2024/06/09 09:22
cssday4
1、浮动定位
定位 - 浮动定位
1、浮动定位特点
将元素设置为浮动定位，将具备以下特征
1、会排除在文档流之外即"脱离文档流"，不再占据页面空间，后续元素则上前补位
2、浮动元素只在当前行内浮动
3、浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动元素依然位于父元素之内
5、解决问题-多个块级元素在一行内的显示问题
2、语法
属性：float
取值：
1、none
默认值，即无任何浮动
2、left
元素左浮动
停靠在父元素的左边 或 其他已浮动元素的右边上
3、right
元素右浮动
停靠在父元素的右边 或 其他已浮动元素的左边上
3、浮动引发的特殊效果
1、当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住)
2、元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下)
3、元素一旦浮动起来后，都将变成块级元素
块级：允许修改尺寸，允许设置上下margin
行内元素：不能改尺寸，不能设置上下margin
4、行内元素，行内块元素，文本 采用的是环绕的排列方式，无法被浮动元素压在底下
/*浮动不能上下也不会重叠，加了浮动后，行内元素会变成块元素*/
1、清除浮动
1、什么是清除浮动
清除当前元素前面的元素浮动所带来的影响
清除浮动影响后，当前元素不会上前占位
2、属性
属性：clear
取值：
1、none
默认值，无清除效果
2、left
清除当前元素前面元素左浮动带来的影响
3、right
清除当前元素前面元素右浮动带来的影响
4、both
清除当前元素前面元素任何一种浮动方向所带来的影响
3、浮动元素为父元素高度带来的影响
父元素的高度是以未浮动的子元素高度为准
如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0
解决父元素的高度问题方案：
1、直接设置父元素高度
弊端：必须知道父元素的高度
2、让父元素也浮动
弊端：对后续元素会产生影响
3、为父元素增加溢出处理属性
属性：overflow
取值：hidden 或 auto
弊端：要溢出显示的内容，也一同被隐藏
4、在父元素中，增加空子元素到最后一个位置处,并且设置其clear属性为both
弊端：多一个子元素在页面上
5、... ...
/*溢出隐藏-自适应高度：overflow：hidden；
列表
1.取消列表样式:list-style:none；
2.列表打横:float:left；
改text的集中颜色：border-color:;outline:none；
*/
2、显示
1、显示方式
属性：display
取值：
1、none
让指定的元素不显示 并且 不占据页面空间
(脱离文档流)
2、block
将指定的元素显示为块级
3、inline
将指定的元素显示为行内
4、inline-block
将指定的元素显示为行内块
行内块特点：
1、多个元素能够在一行内显示
2、允许修改尺寸
5、table
将指定的元素显示为 table
2、显示效果
1、visibility 属性
作用：规范元素可见性
取值：
1、visible
默认值，元素可见
2、hidden
元素不可见，但是占据页面空间
3、collapse
用在表格元素上，删除一行或一列时，不影响表格整体布局
面试：
display:none 和 visibility:hidden 区别
1、display:none; 脱离文档流，所以不占据页面空间
2、visibility:hidden; 只是改变可见性，并不脱离文档流，空间依然占据
2、opacity 属性
作用：改变元素的透明度
取值：从0.0(完全透明) ~ 1.0(完全不透明) 之间的数字
3、vertical-align 属性
1、在 td 中，设置文本的垂直对齐方式
2、设置行内块元素两边文本的垂直对齐方式
3、设置图片两端文本垂直对齐方式
语法：
属性：vertical-align
取值：
1、top
2、middle
3、bottom
4、baseline
基线对齐
3、光标
改变鼠标在页面(元素)中的状态
属性：cursor
取值：
1、default默认
2、pointer
小手
3、crosshair
+
4、text
文本状态 I
5、wait
等待
6、help
帮助
7、n-resize（北箭头）
3、列表
1、列表项标识
属性：list-style-type
取值：（无序） （有序）
1、none none
2、disk ：实心圆，默认decimal数字（1，2，3）
3、circle:圆 lower-roman小写罗马(i,ii)
4、square:方 upper-roman大写罗马（I,II）
... ...
2、列表项图像
属性：list-style-image
取值：url()
3、列表项标识位置
列表项标识的默认位置是在内容区域之外
属性：list-style-position
取值：
1、outside
默认值
2、inside
将列表项标识的位置改为内容区域之内
4、列表属性
属性：list-style
取值：type url position;
常用方式：list-style:none;
5、总：list-style：type url position
5、CSS重写
CSS Reset，修改元素的默认样式
body,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
4、定位(相对，绝对，固定)
1、定位属性
1、定位属性
属性：position
作用：改变元素定位方式
取值：
1、static
静态的，默认值
*常用2、relative
相对的
*常用3、absolute
绝对的（从普通流中完全移除，不占据空间
1、有定义元素以元素位置为主
2、都没定位，以body为主）
4、fixed
固定定位（固定在浏览器某个位置，是以body来定位，在普通流定位下，元素的上
下层顺序由代码书写顺序决定，已定位元素层跑到最后）
注意：relative，absolute，fixed被称之为 "已定位元素"
2、偏移属性
作用：改变元素在页面中的位置
属性：
1、top
2、bottom
3、left
4、right
取值：偏移距离(px)
3、堆叠顺序
作用：在已定位元素中调整堆叠顺序
属性：z-index
取值：无单位的数字
/*z-index生效前提要元素已定位，z-index：10/20，20在网页最前，10在网页后面*/
2、定位 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素原来所占的空间会被保留
2、语法
position:relative;
配合 top/right/bottom/left 偏移属性实现位置的微调
3、使用场合
1、元素位置微调
3、定位 - 绝对定位
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流即不占据页面空间
2、绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位
3、如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如body或html
2、语法
position:absolute;
配合着 top/right/bottom/left 实现位置定位
3、特点
1、绝对定位元素会变成块级元素
2、绝对定位元素的margin可以使用，默认情况下，auto会失效
<div id="d1">(无定位)
<div id="d2">(无定位)
<p id="p1">(无定位)
<span>这是一个span</span>
</p>
</div>
</div>
4、堆叠顺序
属性：z-index
取值：无单位的数值
数值越大，越靠前，默认是0
可以取负值，当前元素在页面所有内容之下
注意：
1、只有已定位元素才能设置z-index
2、默认的堆叠顺序是 后来者居上
3、父子元素中，永远都是子压在父上,是不受z-index影响的
1、浮动定位
定位 - 浮动定位
1、浮动定位特点
将元素设置为浮动定位，将具备以下特征
1、会排除在文档流之外即"脱离文档流"，不再占据页面空间，后续元素则上前补位
2、浮动元素只在当前行内浮动
3、浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动元素依然位于父元素之内
5、解决问题-多个块级元素在一行内的显示问题
2、语法
属性：float
取值：
1、none
默认值，即无任何浮动
2、left
元素左浮动
停靠在父元素的左边 或 其他已浮动元素的右边上
3、right
元素右浮动
停靠在父元素的右边 或 其他已浮动元素的左边上
3、浮动引发的特殊效果
1、当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住)
2、元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下)
3、元素一旦浮动起来后，都将变成块级元素
块级：允许修改尺寸，允许设置上下margin
行内元素：不能改尺寸，不能设置上下margin
4、行内元素，行内块元素，文本 采用的是环绕的排列方式，无法被浮动元素压在底下
/*浮动不能上下也不会重叠，加了浮动后，行内元素会变成块元素*/
1、清除浮动
1、什么是清除浮动
清除当前元素前面的元素浮动所带来的影响
清除浮动影响后，当前元素不会上前占位
2、属性
属性：clear
取值：
1、none
默认值，无清除效果
2、left
清除当前元素前面元素左浮动带来的影响
3、right
清除当前元素前面元素右浮动带来的影响
4、both
清除当前元素前面元素任何一种浮动方向所带来的影响
3、浮动元素为父元素高度带来的影响
父元素的高度是以未浮动的子元素高度为准
如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0
解决父元素的高度问题方案：
1、直接设置父元素高度
弊端：必须知道父元素的高度
2、让父元素也浮动
弊端：对后续元素会产生影响
3、为父元素增加溢出处理属性
属性：overflow
取值：hidden 或 auto
弊端：要溢出显示的内容，也一同被隐藏
4、在父元素中，增加空子元素到最后一个位置处,并且设置其clear属性为both
弊端：多一个子元素在页面上
5、... ...
/*溢出隐藏-自适应高度：overflow：hidden；
列表
1.取消列表样式:list-style:none；
2.列表打横:float:left；
改text的集中颜色：border-color:;outline:none；
*/
2、显示
1、显示方式
属性：display
取值：
1、none
让指定的元素不显示 并且 不占据页面空间
(脱离文档流)
2、block
将指定的元素显示为块级
3、inline
将指定的元素显示为行内
4、inline-block
将指定的元素显示为行内块
行内块特点：
1、多个元素能够在一行内显示
2、允许修改尺寸
5、table
将指定的元素显示为 table
2、显示效果
1、visibility 属性
作用：规范元素可见性
取值：
1、visible
默认值，元素可见
2、hidden
元素不可见，但是占据页面空间
3、collapse
用在表格元素上，删除一行或一列时，不影响表格整体布局
面试：
display:none 和 visibility:hidden 区别
1、display:none; 脱离文档流，所以不占据页面空间
2、visibility:hidden; 只是改变可见性，并不脱离文档流，空间依然占据
2、opacity 属性
作用：改变元素的透明度
取值：从0.0(完全透明) ~ 1.0(完全不透明) 之间的数字
3、vertical-align 属性
1、在 td 中，设置文本的垂直对齐方式
2、设置行内块元素两边文本的垂直对齐方式
3、设置图片两端文本垂直对齐方式
语法：
属性：vertical-align
取值：
1、top
2、middle
3、bottom
4、baseline
基线对齐
3、光标
改变鼠标在页面(元素)中的状态
属性：cursor
取值：
1、default默认
2、pointer
小手
3、crosshair
+
4、text
文本状态 I
5、wait
等待
6、help
帮助
7、n-resize（北箭头）
3、列表
1、列表项标识
属性：list-style-type
取值：（无序） （有序）
1、none none
2、disk ：实心圆，默认decimal数字（1，2，3）
3、circle:圆 lower-roman小写罗马(i,ii)
4、square:方 upper-roman大写罗马（I,II）
... ...
2、列表项图像
属性：list-style-image
取值：url()
3、列表项标识位置
列表项标识的默认位置是在内容区域之外
属性：list-style-position
取值：
1、outside
默认值
2、inside
将列表项标识的位置改为内容区域之内
4、列表属性
属性：list-style
取值：type url position;
常用方式：list-style:none;
5、总：list-style：type url position
5、CSS重写
CSS Reset，修改元素的默认样式
body,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
4、定位(相对，绝对，固定)
1、定位属性
1、定位属性
属性：position
作用：改变元素定位方式
取值：
1、static
静态的，默认值
*常用2、relative
相对的
*常用3、absolute
绝对的（从普通流中完全移除，不占据空间
1、有定义元素以元素位置为主
2、都没定位，以body为主）
4、fixed
固定定位（固定在浏览器某个位置，是以body来定位，在普通流定位下，元素的上
下层顺序由代码书写顺序决定，已定位元素层跑到最后）
注意：relative，absolute，fixed被称之为 "已定位元素"
2、偏移属性
作用：改变元素在页面中的位置
属性：
1、top
2、bottom
3、left
4、right
取值：偏移距离(px)
3、堆叠顺序
作用：在已定位元素中调整堆叠顺序
属性：z-index
取值：无单位的数字
/*z-index生效前提要元素已定位，z-index：10/20，20在网页最前，10在网页后面*/
2、定位 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素原来所占的空间会被保留
2、语法
position:relative;
配合 top/right/bottom/left 偏移属性实现位置的微调
3、使用场合
1、元素位置微调
3、定位 - 绝对定位
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流即不占据页面空间
2、绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位
3、如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如body或html
2、语法
position:absolute;
配合着 top/right/bottom/left 实现位置定位
3、特点
1、绝对定位元素会变成块级元素
2、绝对定位元素的margin可以使用，默认情况下，auto会失效
<div id="d1">(无定位)
<div id="d2">(无定位)
<p id="p1">(无定位)
<span>这是一个span</span>
</p>
</div>
</div>
4、堆叠顺序
属性：z-index
取值：无单位的数值
数值越大，越靠前，默认是0
可以取负值，当前元素在页面所有内容之下
注意：
1、只有已定位元素才能设置z-index
2、默认的堆叠顺序是 后来者居上
3、父子元素中，永远都是子压在父上,是不受z-index影响的
