css基础学习笔记

cellpadding单元格边框与文字的距离  cellspacing单元格与单元格的距离
width: 高度  height: 宽度  align:对齐方式 border:边框

HTML：
表格结构标签 thead头部  tbody主体
rowspan 跨行合并单元格   colspan跨列合并单元格  
checked input属性默认选择

lable标签
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

CSS样式

ID选择器  只能使用一次
字体属性
font-family   设置字体系列
font-size    设置字号 字的大小
font-weight   设置字体粗细  bold 700加粗  normal  400默认
font-style   字体样式    normal 不倾斜   italic 倾斜
font  连写 格式｛font-style  font-weight  font-size  font-family｝

文本属性
color    文本颜色
text-align    文本对齐方式
text-indet     文本首行缩进用 2em
text-decoration    文本修饰 none 取消下划线  underline 添加下划线   line-through 删除线
line-height   行与行之间的距离

内部样式表
    head标签里写style标签，style标签里写css样式
行内样式表
    给元素添加style属性，属性里写样式，不需要选择器
外部样式表 
    新建.css文件，通过link标签引入，开发中推荐

复合选择器
链接伪类选择器    按顺序 lvha
a:lik   未被访问的链接
a:visited   已被访问的连接
a:hover     鼠标放上时时
a:active   鼠标按下未弹起时
 
focus 伪类选择器    input表单存在焦点时获取
    input:focus 

样式
        字体样式
            font:style weight size/line-height family
        文本样式
            text-align text-decoration text-indent color line-height

块级元素特点
1比较霸道，自己独占一行
2高度宽度外边距以及内边距都可以控制
3宽度默认是容器（父级宽度）的100%
4是一个容器及盒子，里面可以放行内或块级元素

行内元素
1：相邻行内元素在一行上，一行可以显示多个。
2：高宽直接设置是无效的。
3：默认宽度就是他本身内容的宽度。
4：行内元素只能容纳文本或其他行内元素。

行内块元素
1和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙。一行可以显示多个（行内块元素特点）。
2默认宽度就是他本身内容的宽度
3可以设置宽高以及内外边距。

元素转换
display:block   转换为块级元素
display:inline   转换为行内元素
display:inline-block   转换为行内块元素
            
line-height:       行高

background-image: url(bg.jpg)  图片地址
background-repeat: no-repeat;   图片不铺满

 background-position: X Y    背景图片位置
background-attachment：scroll/ fixed   默认scroll滚动

复合写法 ： background: red url(bg.jpg) no-repeat fixed center 40px; （顺序随意）

background-color：rgba(0,0,0,0.3) 背景颜色透明度（最后一个为透明度）

css3大特性：
    层叠性
    继承性（继承的是文字相关的9个样式，继承的权重是0，干不过浏览器默认的样式）
    优先级
复合选择器会有权重叠加的问题，权重虽然会叠加，但永远不会进位；

 border-width  边框粗细
 boeder-style ：solid 实线边框   dashed 虚线边框    dotted 点线边框   hidden 隐藏
border-color : 边框颜色
边框简写  ： px  solid  red （没有顺序）

border-collapse：collapse      合并边框

块级元素，本身不写宽度的时候，padding不会撑开大盒子

css新的样式
    圆角边框
        border-radius:10px;

清楚浮动的本质是清除浮动元素造成的影响
清除浮动策略：
清除浮动的方法：
1额外标签法
   clear：both,清除左右两侧浮动的影响

2：父元素添加 overflow  属性   值hidden或auto或scroll

定位=定位模式+边偏移

静态定位static 就是标准流
相对定位 ： 参考位置是它本身的位置  不脱标，继续占有原位置  
绝对定位 absolute ：  如果没有祖先元素或者祖先元素没有定位 则以浏览器为准定位
    如果祖先元素有定位(相对，绝对，固定定位),则以最近一级有定位的祖先元素为准定位
     脱标
子绝父相 ：父元素需要占有位置，因此是相对定位。子盒子不需要占有位置，则用绝对定位

固定定位 fixed：以浏览器可视窗口为参照点移动元素。
    跟父元素没有任何关系
    不随滚动条滚动
    脱标，不占有原先位置
z-index： 定位的盒子，控制先后顺序数字越大越靠上

显示隐藏元素
display：black 显示，  none 隐藏 ，不占有原来位置
visibility：visible 显示，  hidden  隐藏，继续占有原来位置
overflow：  visible 默认显示，hidden超出部分隐藏，scroll显示滚动条，auto超出时显示滚动条

精灵图：
为什么需要精灵图？
减少服务器接受和发送

icomoon.io   字库
iconfont.cn  阿里字库

鼠标样式：
cursor： 
defaule 默认白色箭头样式
pointer  白色手样式
move    移动样式
text    文本样式
not-allowed   禁止样式

outline :   none    文本框去轮廓线
resize :   none    防止摇曳

图片与文字垂直居中对齐：行内块元素
vertical-align：middle；

    单行文本溢出文字显示省略号：  
    /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
               white-space: nowrap;

                /* 2.溢出的部分隐藏起来 */
               overflow: hidden;

                /* 3. 文字溢出的时候用省略号来显示 */
               text-overflow: ellipsis;

inpu的属性
    palcehoder 提示信息
css3盒子模型
    box-sizing：border-box
        border和padding不会撑大盒子

二弟转换（都不会影响别的盒子）
    移动
    transform:translate(x,y);
    沿着X轴和Y轴
    移动不影响别的盒子
    可以用百分比，为自身的长度
    旋转
    transform: rotate(  deg);
    括号里写度数，单位是deg

    缩放     
     transform: scale(X,Y);
    括号里为倍数，缩放时不影响别的盒子
    没有单位 按中心点缩放  中心点可以设置 
   
二弟综合转换：
    transform：位移写到最前面,中间用空格隔开
    transform：translate(x,y) rotate( deg) scale(X,Y) ;
三弟动画：
     1定义动画  随意名称 
        @keyframes move {
             动画序列  开始状态 
            0% {
             ｝
    结束动画 
            100% {
            }
        }

          2.调用动画 动画名称
            animation-name: move;
            动画持续时间 
            animation-duration: 5s;

弹性布局(写到父盒子)：
    display: flex;
            
父盒子设置flex后子元素的 float，clear 等都失效

3.flex布局常见父项常见属性
以下由6个属性是对父元素设置的
    flex-direction :设置主轴的方向
    justify-content :设置主轴上的子元素排列方式
    flex-wrap:设置子元素是否换行
    align-content:设置侧轴上的子元素的排列方式(多行)
    align-items :设置侧轴上的子元素排列方式(单行)
    flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap