盒模型:盒模型有四个部分组成,从内向外的话是内容区域的宽高,内边距padding,边框,外边距margin
在W3C标准盒模型中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在怪异模式下,IE的宽度和高度还包含了padding和border
标准模式和怪异模式的区别?
①盒模型:IE下标准模式为:盒模型的宽高一般是content。怪异模式下的宽度是包含了内边距和边框的 。
②怪异模式中IE6/7/8都不识别!important声明
③设置行内元素宽高,标准模式下不生效,怪异模式下生效
④margin:0 auto,在标准模式下会水平居中,怪异模式下不会
1、所占空间上的区别:块级元素会占据一行,垂直方向排列;行内元素不会独占一整行而是在同一行水平方向排列
2、包含前台关系的区别:块级元素可以包含行内元素和块级元素,而行内元素只能包含行内元素,不能包含块级元素
3、边距属性的区别:块级元素的margin上下左右都生效,而行内元素上下设置不能生效,左右可以生效;
行内块元素相当于是以行的形式展示块级元素,和块级元素一样可以设置宽高内外边距,同时内部也可以包含块级和行内元素;
常见的行内元素:
:
用于对文本进行分组,并对其应用样式。
:
用于创建超链接。
: 关联输入框并获取焦点
行内块元素:
:
用于插入图像。
:
用于创建输入控件。
用于创建按钮。
用于创建多行文本输入框。
常见的块级元素:
div、p、h1-h6、ul、li、table等
1、相对定位 postion:relative
相对元素在原文档流中的位置定位,设置相对定位不会脱离文档流,元素位置的变化不会影响其他元素
2、绝对定位position:absolute
,绝对定位参考的是它的包含块,如果这个元素没有脱离文档流那么它的包含块就是父元素;如果脱离了文档流,就会找第一个拥有定位属性的祖先元素,如果没找到就以浏览器的视口为参考,设置了绝对定位后元素会脱离文档流,会对后面的兄弟元素和父元素有影响。
3、固定定位postion:fixed
,相对于浏览器视口定位,会脱离文档流;
4、粘性定位postion:sticky
它基本上是相对位置和固定位置的混合体,它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶部起 10 像素)为止,此后它就变得固定了,不会脱离文档流,参考点是距离它最近的一个拥有滚动机制的祖先元素
css 选择器的优先级是如何计算的,根据选择器的权重
权重如何计算?格式:(a,b,c)
a: id 选择器的个数
b:类、伪类、属性选择器的个数
c:标签、伪元素选择器的个数
每一项逐一比较,如(0,2,1),比(0,2,0)权重更高。
当权重相同时,如何选中? 后来者居上,后写的优先
所以css选择器的优先级排序分别是:
1、行内样式
2、id选择器
3、类、属性、伪类选择器(权重相同)
4、标签、伪元素选择器(权重相同)
一、display: none:把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。也不会响应绑定的监听事件。
二、visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。
三、opacity: 0:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
四、position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。
五、z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。
六、rgba(0,0,0,0):透明,会继续在文档流中占位,所以触发重绘。由于只作用于颜色或背景色,所以子元素不会继承,透明后可以触发点击事件
css3 是css2 的升级版本,在其基础上新增了很多强大的新功能
新特性只是随便列几个:
一:CSS3选择器
伪元素选择器
属性选择器
伪类选择器
二:CSS3边框与圆角
CSS3圆角 border-radius
盒阴影 box-shadow
边框图像 border-image
三:CSS3背景与渐变
CSS3背景
background-image:设置一个元素的背景图像。
background-origin:规定 background-position 属性相对于什么位置来定位。
background-clip:规定背景的绘制区域。
CSS3渐变
定义:可以在两个或者多个指定颜色之间显示平移的过渡
linear-gradient():线性渐变。
radial-gradient():径向渐变。
四:CSS3过渡
定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。
transition:设置元素当过渡效果,四个简写属性为:
transition-property:过渡属性名。
transition-duration:规定完成过渡效果需要花费的时间(以秒或毫秒计)。
transition-timing-function:指定切换效果的速度。
五:CSS3变换
定义:让一个元素在一个坐标系统中变形,这个属性包含一系列的变形函数,可以移动,旋转,缩放元素。
transform:应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
六:动画
定义:使元素从一种样式逐渐变化到另外一种样式的效果。
animation:为元素添加动画,是一个简写属性。
animation-name:为 @keyframes 动画名称。
animation-duration:动画指定需要多少秒或毫秒完成。
animation-timing-function:设置动画将如何完成一个周期。
七:弹性盒子布局
flex布局是css3中新增的特性,弹性盒子布局,让盒模型更加灵活,我们将元素设置display:flex 属性该元素就变成了一个伸缩容器;
同时有六个可以设置在该容器上的属性:
一、flex-direction属性决定即项目的排列方向flex-direction: row | row-reverse | column | column-reverse;
二、flex-wrap默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。flex-wrap: | wrap | wrap-reverse;
三、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。flex-flow: ;
四、justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between 两端对齐,项目之间的间隔都相等。 | space-around; 每个项目两侧的间隔相等。
五、align-items属性定义项目在交叉轴上如何对齐,align-items: flex-start | flex-end | center | baseline | stretch;
六、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用,align-content: flex-start | flex-end | center | space-between | space-around | stretch;
还有六个可以设置在容器内项目上的属性:
一、order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
二、flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
三、flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
四、flex-basis
设置主轴方向的基准长度,会让宽度或高度失效,主轴就是方向轴
作用:浏览器根据这个属性的值,去计算主轴山是否有多余的空间,默认auto
五、flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
六、align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
1、transition 是过渡,是样式值的变化的过程,只有开始和结束;animation 其实也叫关键帧,通过和 keyframe 结合可以设置中间帧的一个状态;
2、animation 配合 @keyframe 可以不触发事件就触发这个过程,而 transition 需要通过 hover 或者 js 事件来配合触发;
3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;
过渡的使用示例:
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, background-color 2s;
}
div:hover {
width: 200px;
background-color: blue;
}
动画使用示例:
/*声明一个动画*/
@keyframes name {
0% {width:200px; height:200px; background: yellow;}
50% {width:400px; height:400px; background: green;}
75% {width:500px; background: black;}
100% {width:600px ; height:600px; background: cornflowerblue;}
}
#div7 {
animation-name: name;
animation-duration: 4s;
animation-iteration-count: infinite;
}
区别1:link是XHTML标签,除了加载CSS文件外,还可以加载图片等资源文件;@import属于CSS范畴,只能加载CSS样式文件
区别2:link引用CSS时,在页面载入时同时加载(并行);@import需要页面网页完全载入以后加载(所有在网速慢的情况下,页面会出现刚开始没有样式闪烁一下才有)
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持,当使用@import引入样式时,样式表与HTML文档是分离的;
重绘就是当元素的外观属性发生改变的时候,浏览器重新绘制渲染出来,但是不影响元素的位置、大小,例如颜色、字体大小
重排也叫回流,每个页面至少回流一次,当渲染树节点发生改变,影响了节点的几何属性(如宽、高、内边距、外边距、或是float、position、display:none;等等),导致节点位置发生变化,此时触发浏览器重排(reflow),需要重新生成渲染树。
重绘不一定引起重排,但重排一定引起重绘.
1、添加或者删除可见的DOM元素;
2、元素位置改变——display、float、position、overflow等等;
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
5、页面渲染初始化;
6、浏览器窗口尺寸改变——resize事件发生时;
1、尽量避免直接操作变更DOM的样式
2、避免逐条改变样式,可通过class类合并处理
3、对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁重排
4、使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发重排
5、减少不必要的动画,使用css动画代替js动画
伪类很像类,但是不是类,是元素特殊状态的一种描述。分为动态伪类和结构伪类两种;
常用的动态伪类
1、link 超链接没有被访问的状态,a标签独有
2、visited 超链接访问过的状态,a标签独有
3、hover 悬浮,其他标签也有该伪类
4、active 激活,被点下去的那一瞬间,其他标签也有该伪类
5、focus 获取焦点的元素,表单类元素才有
常用 的结构伪类:
1、div>p:nth-child(n)所有兄弟元素中的第n个
2、div>p:first-child 所有兄弟元素中的第一个
3、div>p:last-child 所有兄弟元素中的最后一个
4、div>p:nth-child(2n+1):nth-child(odd) 奇数
5、div>p: first-of-type 所有同类型兄弟元素的第一个
6、div>p: last-of-type 所有同类型兄弟元素的第最后一个
伪元素:很像元素,但不是元素(element),是元素中的一些特殊位置,它不存在于 DOM 文档中、是一个虚拟的元素
常见的伪元素:
1、div::first-letter 选中div的第一个字母
2、div::first-line 选中div的第一行
3、div::selection 选中的是div中被选择的文字
4、input::placeholder 选中的是input元素 中的提示文字
5、div::before { content: ‘ ’} 选中的是div元素开始的位置,并创建一个子元素
6、div::after 选中的是div元素最后的位置,并创建一个子元素
总结:伪类是元素特殊状态的一种描述,分为动态伪类和结构伪类两种;伪类是一个冒号,微元素是是元素中的一些特殊位置,它不存在于 DOM 文档中、是一个虚拟的元素两个冒号;
因为元素设置了浮动之后会对父亲和兄弟元素产生影响:
对父亲元素的影响:无法撑起父元素的高度,导致父元素高度塌陷
对兄弟元素的影响:浮动元素后面的兄弟元素的布局会受到影响,因为浮动元素脱离了文档流,后面的元素就会跑到它的位置,但文本的位置却没变
最初浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
浮动之后的特点:
1、元素脱离文档流。
2、不管浮动前是什么元素,浮动后默认的宽与高都是被内容撑开的。可以单独设置。
3、不会独占一行,可以与其他元素共用一行。
4、不会出现margin合并margin塌陷的问题,能够完美的设置四个方向的heading和margin
5、不会像行内块一样被当做文本处理,没有行内块的空白问题
什么是margin 塌陷?
第一个子元素的上margin和最后一个子元素的下margin 会作用到父元素上。
为什么?
历史遗留问题,w3c标准设计如此
怎么办?
方法一、给父元素设置不为0的padding
方法二、给父元素设置不为0的border
方法三、给父元素设置css样式overflow:hidden
什么是margin 合并问题?
是什么?
上面兄弟的下margin 会和下面兄弟的上margin 合并,取一个最大值,而不是相加。
如何解决?
无需解决,布局时,相邻的值设置一个上下边距即可。
如何清除浮动?
1、给父元素指定高度
2、给父元素也设置浮动,但产生其他的问题了
3、给父元素设置overflow:hidden
4、在所有浮动元素的后面,添加一个空元素为块级,并设置clear:both
5、给浮动元素的父元素添加一个伪元素
.parent:after {
content:'',
display:block;
clear:both;
}
块格式化上下文(Block Formatting Context,BFC)可以理解元素的一个特异功能,该功能默认处于关闭的状态,当元素满足了某些条件后,该功能被激活,就开启了BFC
开启BFC 能解决什么问题
1、元素开启后,其子元素不会产生margin塌陷问题
2、开启后,元素不会被浮动元素覆盖
3、开启后,就算子元素浮动,元素自身不会塌陷
怎么开启BFC
1、根元素(html),或包含body的元素
2、设置浮动(float),且值不为none(为left、right),
3、设置定位(position), 不为static或relative(为absolute、fixed)
4、设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption、flow-root
5、设置 overflow,且值不为visible (为auto、scroll、hidden)
常用方式:display:flow-root或overflow: hidden
HTML 部分:
left
right
方案一:左边固定宽度做浮动,右边宽度自适应并设置overflow:hidden ,让它变成一个BFC不会与浮动元素发生重叠;
.outer {
height: 100px;
}
.left {
background-color: rgb(0, 255, 191);
width: 200px;
float: left;
}
.right {
background-color: antiquewhite;
overflow: hidden;
}
方案二、flex布局,左边固定宽度,右边设置flex为1 占满剩余空间
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
方式三、利用子绝父相,左边设置绝对定位让其脱离文档流,右边元素设置margin-left让出位置
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}
HTML 部分:
left
center
right
方式一、使用浮动,左边左浮动、右边右浮动,中间设置 margin-left和
margin-right,但是使用这种方式在HTML部分要把中间放在最后,也就是这样
left
right
center
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
方式二、使用flex布局,左右两栏设置固定大小,中间一栏设置为flex:1
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
方式三、左右两边设置绝对定位,中间元素设置 margin-left和margin-right,右边元素还要设置top和right 为 0
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
方式一、 margin-top margin-left
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
方式二、translate
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方式三、绝对定位
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
方式四、使用flex布局
.father {
display: flex;
justify-content: center;
align-items: center;
}