盒子模型
使用css属性width和height来确定长度和高度。假如不设置width,一些块级元素会自动占一行,也就是100%的屏幕宽度。 行内元素不受width和height属性的影响,只受元素内容的影响,由元素内容将内容部分的矩形撑开。
width和height属性的单位有:px和%,px指的是像素,%指的是占html整体容器的宽度的百分比。
内边距
padding-top 上
padding-left 左
padding-right 右
padding-bottom 下
解决padding影响盒子大小问题
通过设置box-sizing属性为border-box,可以让盒子的宽度和高度包括padding和borderr,这样就不会影响盒子的大小了。
外边距
margin用于设置外边距。 margin就是控制盒子和盒子之间的距离,为给定元素设置所有四个(上下左右)方向的外边距属性。
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
/* 应用于所有边 */
margin: -2px;
/* 上边下边 | 左边右边 */
margin: 6% auto;
/* 上边 | 左边右边 | 下边 */
margin: 3em auto 1em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 5px 2em 0 auto;
外边距塌陷问题
margin塌陷问题,父元素的第一个子元素的margin-top值会被父元素抢走,给父元素添加边框
解决方法
border: 1px solid #fff;
float: left;
position: absolute;
padding: 1px;
display: inline-block;
overflow:hidden;
overflow: auto;
文本溢出
容器宽度:width:value
强制文本在一行内显示:white-space:nowrap;
溢出内容为隐藏:overflow:hidden;
溢出省略号:text-overflow:ellipsis;
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值,内容不会被修剪,会呈现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其它的内容;(超出会显示,不超出不显示,只显示y方向的)
inherit:规定应该从父元素继承overflow属性值。
white-space:normal、nowwrap、pre、pre-wrap、pre-line、inherit该属性用来社遏制如何处理元素内部的空白
normal:默认值,空白会被浏览器忽略
nowwrap:文本不会换行,文本会在同一行上继续,直到遇到标签为止
pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;
pre-wrap:保留空白序列,但是保留换行符
inherit:规定应该从父元素继承white-space属性值;(ie浏览器不支持此属性)
ext-overflow:clip、ellipsis
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象文本溢出时,显示省略标记;
text-overflow属性仅仅是...,当行文本溢出时是否显示省略标记,并不具备其他的样式属性定义,
要实现溢出时产生省略号的效果还需要定义;
样式继承
css样式的继承性不是所有样式都继承,只有改变之后对布局无影响的样式,才会继承a链接最好在自身更改样式。
<style>
a {
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a {
font-size: 40px;
} */
div {
font-size: 50px;
color: #807474;
/* padding: 13px; */
}
flex布局
flex-direction 主轴方向
flex-wrap 主轴一行满了换行
flex-flow 1和2的组合
justify-content 主轴元素对齐方式
align-items 交叉轴元素对齐方式//单行
align-content 交叉轴行对齐方式//多行
order 值越小,排列在越靠前的位置
定位补充
z-index 定位中显示的优先级
浮动
浮动是由CSS中的布局元素之一的float属性引起的。当float属性设置为left或right时,元素会像漂浮在文本流中一样移动,并允许其他元素在其周围进行布局。但是,由于浮动元素的位置不在文本流中,它们可能与其他元素重叠,因此需要使用清除浮动技术来解决这个问题,例如使用clear属性或overflow属性来清除浮动。
渐变
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
background: linear-gradient 线性渐变
linear-gradient 角度渐变
background: radial-gradient 径向渐变
字体图标
<link rel="stylesheet" href="../font_3931265_h8zi8uedfw8/iconfont.css">
<script src="../font_3931265_h8zi8uedfw8/iconfont.js"></script>
媒体查询
使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
@media mediatype and|not|only (media feature){
css-code;
}
2d转换
transform: translate()平移
transform: translate(x,y) 沿着x轴和y轴移动
transform: translateX(x) 沿着x轴移动
transform: translateY(y) 沿着y轴移动
沿着水平方向位移
当为一个值的时候,只沿着水平方向位移
注意:元素位移之后,原来的位置还在
transform: scale() 缩放
transform: scale(x,y) 沿着x轴和y轴缩放
transform: scaleX(x) 沿着x轴缩放
transform: scaleY(y) 沿着y轴缩放
transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍,等比例缩放 */
transform: scale(-1.5);/* 先翻转,然后 沿着水平方向和垂直方向都放大1.5倍 */
取值范围0~1之间表示缩小,1表示正常大小,1以上表示放大,默认值为1 取值为负值表示先翻转后缩放
为一个值的时候,沿着水平方向和垂直方向等比例缩放
元素缩放为0 后,原来的位置还在
x与y之间用逗号隔开
transform: skew() 倾斜
transform: skew(x,y) 沿着x轴和y轴倾斜
transform: skewX(x) 沿着x轴倾斜
transform: skewY(y) 沿着y轴倾斜
单位deg(角度) 正值,向左上角和右下角倾斜;负值,向右上角和左下角倾斜
为一个值的时候,只沿着水平方向倾斜
transform:rotate()
3d
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
transform:rotateX(45deg):沿着x轴正方向旋转 45度
transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
过渡
transition 谁变化给谁加
transition-property:指定要用于过渡的属性名称,如 width, height, background
transition-duration:过渡持续时间 ,单位是秒。
transition-timing-function:过渡的运行曲线,默认是 ease
transition-delay:延迟执行时间,单位是秒。
动画
使用动画之前,需要通过 @keyframe 来定义动画,定义好动画后,通过 animation 属性来指定动画。
动画的名称-- animation-name
持续时间-- animation-duration
动画曲线-- animation-timing-function
延迟时间-- animation-delay
是否可以逆向播放 -- animation-direction:
默认是" normal ",动画执行到最后会直接加载到开始处
alternate 逆播放 ,动画执行到最后会反着播放。
动画执行次数-- animation-iteration-count :
次数可以是整数,也可以是 infinite 表示一直循环
动画的状态-- animation-fill-mode:
有两个值可以指定 :保持forwards,回到起始 backwards
规定动画是否正在运行或暂停 -- animation-play-state:
这个需要单独使用,有两个值 :
- running:运行状态,默认值
- paused: 暂停状态