day 4笔记

盒子模型 
使用css属性width和height来确定长度和高度。假如不设置width，一些块级元素会自动占一行，也就是100%的屏幕宽度。 行内元素不受width和height属性的影响，只受元素内容的影响，由元素内容将内容部分的矩形撑开。

width和height属性的单位有：px和%，px指的是像素

%指的是占html整体容器的宽度的百分比。
 

内边距
padding-top        上
 
padding-left        左
 
padding-right        右
 
padding-bottom        下
使用-隔开而不是下划线_隔开

单位是：px(使用频率最高)和%占比

内边距简写

解决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;
}
 默认外边距
当设置一个div时，并没有给设置padding和margin属性，但是此时此刻就是有外边距，这就是默认边距。

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:延迟执行时间，单位是秒。
如果希望元素的多个属性都具有过渡的效果，把过渡属性设为 all 即可

动画
使用动画之前，需要通过 @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: 暂停状态