margin常见的bug
margin的重叠问题
上下排列的两个盒子之间,都设置margin,上下的margin会重叠,谁的外边距大设置谁
解决办法:设置一个margin就行
margin-top的传递问题
当大盒子的第一个子元素设置margin-top的时候,margin-top会错误的传递给父元素设置
解决方法:
设置父元素
border:
padding:1px
overflow:hidden (设置元素超出隐藏)
设置子元素
float(不推荐专门解决专递问题)
相对定位(相对定位/绝对定位/固定定位/粘性定位)position:relative; (占位,在自己原位置上下左右移动)
定位的元素会触发五个隐藏元素
4个位置方向元素left、right、top、bottom
1个层级关系 z-index,z-index值越大,层级越高,可以设置负数,但是必须是整数
普通元素的 0 第一个 定位元素的 0.1 第二个 定位元素的 0.2
绝对定位(不占位,脱离文档流)position:absolute;
位置移动先找最近的有定位的父元素,如果没有这一元素,再找浏览器窗口为位置移动的参照物(绝对定位的参照物也称为包含块)
固定定位 position:fixed;(不占位,脱离文档流)
固定定位位置移动的参照物,永远是浏览器窗口的可视区
设置盒子水平垂直居中的两种方法
1 position:fixed;
left:50%;
top:50%;
margin-left:-(盒子宽度一半的px)
margin-top:-(盒子高度的一半的px)
2 position:fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
margin:auto;(这种方法绝对定也适用)
粘性定位position:sticky;
类似于相对定位和绝对定位的结合体,如果滚动条没有划过内容,他就是一个占位的盒子;划过内容,类似于固定定位的效果,参照物是浏览器窗口的可视区。
注意:1.需要设置位置方向 2.父元素不能设置overflow:hidden;
取消定位position:static;
继承 position:inherit;
注意:定位产生的高度塌陷只能用固定高
设置内容在浏览器窗口水平垂直居中(登录或者广告会使用)
第一种
盒子:
position:fixed;
left:50%;
top:50%;
margin-left:-(盒子宽度的一半)
margin-top:-(盒子高度的一半)
第二种
position:fixed;
left:0px
right:0px
top:0px
bottom:0px
margin:auto;
元素类型分为两类
块元素 和 内联元素(内联元素包含可变元素,行内块元素)
块元素的特性
1、块元素以块状内容内容显示,可以设置宽高
2、独占一行,可以自动换行,上下排列
3、块元素可以嵌套块和内联元素(p,h1~h6,dt)
4、块元素可以设置4个方向的内外边距
5、块元素没有设置宽度,块元素的宽度是自适应(占满父元素的宽度),如果设置浮动后,块元素的宽度有内容撑开
内联元素
1、内联元素的宽高有内容撑开,不能设置宽高
2、水平显示,不会自动换行
3、内联元素只能嵌套内联元素
4、内联元素可以识别盒模型的属性,但是只支持左右的margin和padding,
5、内联元素设置浮动后,元素类型会受影响
a、可以设置宽高
b、可以设置4个方向的margin和padding
c、空格的间隙也取消
行内块元素:img,input,select、textarear
1、可以设置宽高
2、水平显示,不会自动换行
3、行内块元素可以嵌套内联
4、行内块元素可以设置4个方向的内外边距
5、换行产生的一个空格间隙会取消
常见的块元素
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
常见的内联元素
a –超链接(锚点)
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器,定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
常见的行内块元素
img,input,select、textarear
元素类型直接可以相互转换
转换成块元素display: block
转换成内联、行内display:inline
行内块元素 display:inline-block
设置元素隐藏
display: none;
(不占位,内容完全消失)
visibility:hidden
(占位隐藏)
opacity: 0;
透明度也可以设置占位隐藏的效果
li的display的值是
list-items
设置单行文本溢出隐藏设置省略号
1、定义范围 width
2、强制内容不换行 white-space
pre 不换行,多个空格可以识别
nowrap 不换行,只能识别一个空格
3、超出的内容隐藏 overflow:hidden
4、隐藏的内容变成省略号 text-overflow:ellipsis
设置文本超出
overflow
visible 默认值,没有效果
hidden 超出隐藏
scroll 不管内容是否超出,都以滚动条的形式显示
auto 只有超出才以滚动条的形式显示
overflow-x 默认值auto
overflow-y
text-overflow:
ellipsis 隐藏的内容转换成省略号
clip 隐藏的内容裁剪掉
设置内容垂直居中
1、设置内容垂直居中
vertical-align:
top
bottom
middle
使用的特性:1、挑元素类型(内联元素或者行内块元素)
2、需要设置参照物
宽度自适应:
1、 块元素不设置宽度 (一般情况,元素正常占位,没有设置浮动)
2、块元素设置width:100%(设置浮动,元素类型受影响,元素不占位)
calc函数
可以动态计算数值
可以直接设置运算
+、-、 *、/
calc( )
width:calc(100% * 2) ;
清除浮动
clear:
left 清除左浮动
right 清除有浮动
both 清除两边浮动
副作用:margin-top的距离是从浮动盒子开始算(margin-top=间距+浮动盒子的高度)
高度自适应
父元素的高度由内容撑开
1:盒子不设置height
2:盒子的height:auto;
最小高度
如果内容的高度小于最小高度,以最小高度为准,如果内容高大于最小高度,以内容的高度为准
min-height:600px;
IE6或者以下版本浏览器是不识别min-height,在IE6或者以下浏览器,height就是最小高度的功能
IE6 以下版本浏览器 height
其他浏览器,IE6以上浏览器 min-height
过滤器:
下划线过滤器(只在IE6或6以下浏览器识别)
_属性:属性值
_height:600px
min-height:600px
关键字过滤器(提升某一句css声明的权重,比内联样式表的权重还要高,IE6,5不识别)
属性:属性值 !important
min-height:600px;
height:auto !important
height:600px
高度塌陷
父元素的高度由内容撑开,一旦内容浮动后,内容不占位,父元素识别不了内容的高度,就会出现高度塌陷的情况
解决
1、给塌陷的父元素设置overflow:hidden
overflow:hidden属性可以触发BFC(独立的渲染区域,浮动元素也参与高度计算)
2、在所有浮动元素的最下方,设置一个空盒子,给空盒子清除浮动,把父元素的高度撑开
.clear{
height: 0px;
clear: both;
}
3、万能清除法
.clear-fix::after{
content: "";
display: block;
clear: both;
}
.clear-fix {
zoom: 1;
IE的私有属性,解决IE7的兼容问题
}
4、设置固定高
子元素的高度由父元素决定
1、父元素有高度
2、子元素设置height:100%
元素的高度等于当前屏幕的高度
html,body{height:100%}
div{height:100%}
伪对象选择器
::after 和::before,必须配合content属性一起使用
::first-letter 设置文本内容第一个字的样式
::first-line 设置文本内容第一行的样式
多行文本溢出隐藏
display: -webkit-box;
/* 转换成弹性盒 */
-webkit-box-orient: vertical;
/* 设置排列方式,垂直排列 */
-webkit-line-clamp:3;
/* 设置显示的行数 */
overflow: hidden;
/* 超出隐藏 */
对pc端的兼容性比较差,灵活度不太好,灵活度也不太好,显示几行内容需要自己设置
https://www.html.cn/archives/5206/