说一下css盒模型
有俩种盒子模型:常用的标准盒子模型,少用的IE盒子模型
标准盒子模型的包含了content(width ,height),padding,margin,border
IE盒子模型,content {width(padding,border);height;}margin。在ie盒子模型中的width包含了他的padding和boredr。
在css3中引入了box-sizing属性,值为conent-box的时候是标准模型。值为border-box是ie盒子模型
画一条0.5px的线
第一种使用屏幕缩放
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
这中方式之在移动端生效,viewport之咋移动端生效,其原理就是让屏幕缩小一半 1px就变成了0.5px
第二种方法:
使用css的缩放功能:
transform: scale(0.5,0.5);
link标签和import标签的区别
加载资源问题
link不仅可以加载css还可以定义rss和rel连接属性。@import的只能加载css
兼容问题
link是html标签无兼容问题。@import2.1提出的IE5一下的无法兼容
加载顺序问题
link在页面时一起加载,@import会在页面加载完成以后在家
js控制问题
link引入的样式可以使用js去修改,@import的不行
transition和animation的区别
相同点都可以随着时间的变化去变化属性值,
区别在于transition需要主动的出发属性的变化以后再回有类似动画一样的效果。(过渡)在帧数方面只有俩帧form to
animation 被称为动画,不需要主动出发也可以变化属性值 帧数可以一帧一帧变化
Flex布局
flex是Flexible Box 意为弹性布局。webkit的浏览器需要加上前缀 -webkit
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
布局属性:
flex-direction: 决定了主轴的排列方向
flex-wrap:决定了换行的方向,或是否换行
flex-flow:是上面俩个的简写 flex-direction || flex-wrap 默认 row nowrap
justify-content: 决定了在主轴的排列方式 (居中,左对齐 右对齐,俩边对齐,居中分散对齐)
align-items: 属性定义项目在交叉轴上如何对齐。(上对齐,下对齐,居中 ,上下拉伸对齐,取水平线对齐)
align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。(上对齐,下对齐,居中 ,上下拉伸对齐,取水平线对齐)
BFC(块级格式化上下文,用于清楚浮动,防止margin重叠等)
触发条件:
根元素:html
float属性不为none,
overfloat不为visible,
display不为table-cell、table-caption 和inlink-block
position;不为 resolve和fixed
BFC就是一块独立区域,隔离的容器,子元素不会印象到外面元素。
1.可以阻止元素被浮动袁术给覆盖
2.可以包含浮动元素
3.属于同一个BFC的元素
的margin会重叠,给子元素设置不同的BFC可以结局问题
垂直居中的方法
margin:auto
<style>
.div{
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
right:0;
bottom:0
margin:auto
}
</style>
<div class="div"></div>
margin负值
<style>
.div{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
</style>
<div class="div"></div>
多行元素的文本省略号
display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden
浮动清除
1.增加新空标签设置属性clear:both
在浮动元素的后面加上
<style>
.clear{
clear:both
}
</style>
<div class="clear"></div>
缺点会增加无意义标签
2.使用overflow
给浮动元素的父元素添加不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果
3.给父元素设置高度
撑起父元素
4.给父元素设置伪类元素:after
.div:afert{
content:'';
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both
}
给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
calc属性
是css的计算属性;任何长度值都可以计算,需要注意的是运算符前后要有空格
.div{
width: calc(100% - 10px);
}
css选择器的优先级
- !import的优先级最高
- 行内样式 style
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或者继承
对应的权值
style样式为 1000
id为100
类选择为 10
标签选择为1