-
style标签:双标签中设置当前文件样式查看全部
-
水平垂直居中:
上一节是通过margin来设置子标签与父标签边框的距离来达到水平垂直居中,但前提是子标签已经定了宽度。如果没有定义宽度只能用transform:translate(-50%,-50%)通过子标签进行位移来达到子标签水平居中的效果
查看全部 -
注意:如果没在父元素里面添加position:relative属性,那么子元素设置的position:absolute 是相对于body而言的,或者相对于再上层的标签而言的,都没设置,那么就相对于body即游览器页面而言
查看全部 -
块元素:
1.如果没有定固定宽度,可以直接在父标签设置text-align:center来设置水平居中
2.如果设置了固定宽度,那只能使用margin:auto来达到水平居中的效果
查看全部 -
给行内元素设置水平居中时,只需要在父类标签中设置text-align:center就可以了
查看全部 -
flex属性是设置在父类标签中,但是意思是将父标签下面的子标签设置为弹性盒子模型。而且子元素可以通过flex:数值来表示子元素相对于父元素的占比。值得注意的是设置了占比之后,width属性会失效
查看全部 -
在display:flex基础上使用align-items属性来设置盒子纵轴的对齐方式
align-items:
1、flex-start:交叉轴的起点对齐,即纵轴的最上方
2、flex-end:右对齐,即纵轴的最下方
3、center:居中对齐,即纵轴的中间
4、baseline:项目的第一行文字的基线对齐(基线就是文字底部在一条水平线上)
5、stretch:默认值,如果wei设置高度或设为auto,将占满整个容器的高度
查看全部 -
在display:flex基础上使用justify-content属性来设置盒子横列的对齐方式
justify-content:
1、flex-start:交叉轴的起点对齐
2、flex-end:右对齐
3、center:居中对齐
4、space-between:两端对齐,项目之间的间隔都相等
5、space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
查看全部 -
弹性盒模型:
flex属性:
1.将块元素在一排显示
2.flex需要添加在父元素上,改变子元素的排列顺序
3.默认为从左往右依次排列,且和父元素左边没有间隙
查看全部 -
如果在父标签中设置position:relative,意味着会将父标签移动到相对父标签原位置的其他位置,如果本标签设置为position:absolute,注意这时设置的属性值是相对于父标签的位置,位置原点是父标签的左上角
查看全部 -
固定定位:
与absolute决定定位类似,但不同的是固定定位的左表是整个视图(屏幕呢内的网页窗口)本身。因为视图本身是固定的,它不会随游览器窗口的滚动条滚动而变化,除非你在屏幕中移动游览器窗口的屏幕位置,或改变游览器窗口的显示大小,因此固定定位的元素会始终位于游览器窗口内视图的某个位置,不会受文档流影响。
查看全部 -
相对定位:
相对定位意思是相对于自身标签元素之前的位置进行移动,但是不影响其它标签元素位置,即不会占用其它元素的位置。简单理解为设置相对定位的标签就和其它标签不在一个图层了
查看全部 -
绝对定位:
如果将本标签设置为绝对定位,那么意味着将元素从文档流中拖出来。设置的位置属性就相对于父级元素,如果不存在父级元素,那么就相对于body,即相对于游览器窗口
查看全部 -
层模型(positioning):
1.绝对定位(position:absolute)
2.相对定位(position:relative)
3.固定定位(positon:fixed)
查看全部 -
浮动模型:为了将块元素并排显示
1、float:left
2、float:right
查看全部 -
流动布局特征:
1.块状元素都会在所处的包含元素内子上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
2.内联元素都会在所处的包含元素内从左到右水平分布显示
查看全部 -
元素三种布局模型:
1、流动模型(Flow)
2、浮动模型(Float)
3、层模型(Layer)
查看全部 -
margin:块元素与块元素之间的间距
四个参数:上、右、下、左
三个参数:上、左右、下
两个参数:上下、左右
一个参数:上下左右
查看全部 -
padding:内边距(块元素中内容与边框之间的间距):
四个参数:上、右、下、左
三个参数:上、左右、下
两个参数:上下、左右
一个参数:上下左右
查看全部 -
border-radius:总共分四个方向:左上、右上、右下、左下
查看全部 -
border:
border-top: 上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
查看全部 -
border:
border-width:边框宽度
border-style:边框样式 dashed(虚线)| dotted(点线)| solid(实线)
border-color:边框颜色
查看全部 -
块元素:如果未设置宽度,那么宽度默认为父容器的100%
查看全部
举报