CSS基础笔记整理

Css3

• Css选择器

1. border-radius:       边框的角度
2. Contenteditable     文字是否允许被编辑
3. ：：selection        改变文字被选中时的背景和字体颜色
4. ：out-of-range     匹配值不符合条件的input样式
5. :in-range           匹配值符合条件的input样式
6. :read-write         可以读也可以写
7. ：read-only        只能写
8. ：required         必填写
9. ：valid            选择合法的
10. ：invalid          选择非法的

• 边框

• Border-radius ：边框的角度

• Border-image:参数（url、）

1. Border-image-souce:图片的来源   
2. Border-image-slice:   图像边界向内偏移(用来剪裁原始图片)
3. Border-image-width:  图片应以多大的的尺寸显示
4. Border-image-outset：图片的边框向外扩展的距离

                       

• Box-shadow: 盒子阴影  inset  0  0  20px  10px  red

                     Inset （阴影内）、0 0 表示xy方向的偏移值

                     20px  阴影的模糊距离

                    10px  阴影的大小调整 

                     Red   颜色

• 背景

• Background-size ：背景的尺寸  

1. Contain  在保持比例、不超出元素的前提下 、 保持最大
2. Cover   在保持比例、完整覆盖元素的前提下、保持最小

• Background-clip :   定义背景的可视区域

• Background-origin：定义背景图片的定位参照区域

• 渐变

1. Circle  圆形 ellipse 椭圆
2. Closest-side     近边  （closest  近  farthest远side边corner角）
3. Farthest-side    远边
4. Closest-corner   近角
5. Farthest-corner  远角
6. linear-gradient
7. radial-gradient
8. repeating-linear-gradient
9. repeating-radial-gradient

• 文本效果

• Text-shadow 文本阴影 （水平垂直的偏移距离，模糊的距离，阴影的颜色）

1. Text-align-last  最后一行的对齐方式
2. 必须有两个条件   必须单行有溢出的文字、必须有overflow 并且值不能是默认值 

                                 例如：work-break :keep-all；

                                       OverFlow :hidden；

                                       Text-overflow：ellipsis；

    3. Word-wrop     强制换行

   4. Word-break    单词的强制换行keep-all（ 只能在半角空格或连字符处换行。） 、break-all（允许在单词内换行）

• 字体

1. 首先定义字体（名称，字体路径）、
2. 使用（哪里使用哪里定义）
3. 例如：@font-face{

Font-family:’x’;

Src:url(‘’)}

                   P{

font-family:’x’

}

• 过渡效果

1. Transaction   
2. Transaction- property   需要应用过渡效果css属性名称（all代表所有）
3. Transaction-duration    过渡需要的时间
4. Transaction-timing-function:ease-in-out    过渡效果的时间曲线
5. Transaction-dealy      过渡效果开始之前的等待时间（默认是0s）(延迟)

• 动画

1. @keyfromes  名称{百分比（10%{margeft：0；}）    }  规定动画  
2. animation-name：（名称）      规定动画的名称
3. animation-duration：时间（1s） 规定动画执行的时间
4. animation-timing-function:ease   动画的时间曲线
5. animation-fill-mode:  

                    none：     动画执行前与动画执行后的元素状态不受动画影响   

                     forwards ： 动画执行后 ，元素保持最后一帧状态     

                      backwards：动画执行前元素已经是第一帧状态

                      Both：forwards+ backwards

   6. animation-delay: 动画开始前的延迟

  7.animation-iteration-count：动画播放的次数

  8.animation-direction：动画执行的顺序

        normal           正常

        reverse           反向

        alternate          奇数次正向

        alternate-reverse   奇数次反向

  9.animation-play-state：running  动画播放的状态（paused 暂停）

• 2d转换

• Transform:转换

1. 平移：transform:translate(x坐标，y坐标)

2. 旋转：transform:rotate(360deg) 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

3. 缩放：transform:scale(x,y)

4. 改变动画的中心点：transform-origin

5. 拉伸：transform：skew(deg,deg)

6. *同一个元素效果执行的，顺序的改变会影响其结果

 

• 3d转换

1.   perspective：它表现我们关注的元素是整体还是局部，一般加在整体（舞台）之上。

  2.   transform-style:preserve-3d    它表示子孙节点是否以3d的形式跟随自身变化

  3.   perspective-origin：3d变化的中心参照点设置，设置比较麻烦，因此一般我会将舞台及元素的尺寸设置成一致。

  4.   元素之间的关联我们使用定位属性。

十一、多列

1. 可以用column-count 确定列的数量，也可以column-width 来确定宽度，以此来确定数量，个都存在的时以column-count为准columns可以代替前面的两个属性

2. column-gap：列间隙的宽度

3. column-rule：分割线的样式

    A、column-rule：3px solid red

    B、column-rule-width:3px

    C、column-rule-style:dotted

    D、column-rule-color:red

4. colum-span：为多列内的元素指定显示状态   

1. 默认值，就在当前列内显示 ， all.  跨越所有的列显示

十二、用户界面

1. resize:需要overflow属性且不能是默认值  可以使用max-* min-*来限制拖动范围

2. outline-offset：外边线（轮廓线）向外扩张的距离

3. box-sizing：定义width和height属性的作用范围。

默认值：conten-box，    border-box，padding-box

十三、图片  按钮 滤镜

1. filter:grayscale

十四、多媒体    

1.@medio （not | only）print screen all and（max-width:）{选择多媒体   }

宽度 ，device-width（设备）

十五、弹性盒子

• 弹性盒子display：flex

• 确定弹性盒子是排列顺序:flex-direction: (控制主轴的方向)

1. row默认的向右(起点在左边，结束在右边)
2. Row-reverse    左（起点在右边，结束在左边）
3. Column    下（开始的位置在上面（起点），结束是位置在下面）
4. Column-reverse 上（开始是位置在下面（起点），结束的位置在上面）

• Justify –content：控制子元素在主轴上的排列方式

1. Flex-start: 起点位置
2. Flex-end：终点位置（主轴的方向不发生改变 但是元素是位置居右   ）
3. Center： 居中（元素居中）
4. Space-around：一前一后（在盒子的左右一边一个）其余的等比例对其
5. Space-between：等比例对其

• align-itmes:定义子元素在侧轴方向的排列方式

1. stretch：   拉伸（在同方向上没有超出时）
2. Flex-start： 侧轴起点
3. Flex-end：  侧轴终点
4. Center：   侧轴居中

• Align-self：在子元素内使用align-self可以独立设置当前元素在侧轴上的排列方式， 

          用来覆盖全局的align-items 

• Flew-wrap：定义主轴是否是多条，并且设置换行的方向

1. Nowrap:   主轴单条
2. Wrap: 主轴多条，顺着侧轴换行
3. Wrap-reverse：主轴多条，逆着侧轴换行

• Align-content：定义当主轴处在多条状态下时，主轴在侧轴方向上的排列方式，侧                     

• 轴方向flew-wrap的影响。

1. Stretch：拉伸（在同方向上没有超出时）
2. Flex-start: 起点位置
3. Flex-end：终点位置（主轴的方向不发生改变 但是元素是位置居右   ）
4. Center： 居中（元素居中）
5. Space-around：一前一后（在盒子的左右一边一个）其余的等比例对其
6. Space-between:等比例对其

• Flew-flow：是flew-direction与flew-wrap的简写     

定义主轴方向及是否换行

• Order：定义子元素的属性出场顺序

• 弹性盒子子元素： 

1. Align-self：子元素在侧轴的排列方式
2. order：   子元素的出场顺序
3. flex:      当子元素在主轴方向上没有尺寸的时候，定义所占比例（比例关系）
4. 移动端设计感。宽度尺寸标准 640 或者750，
5. 在移动端布局以外不能用排序，可以使用rem或者%
6. 字体大小参照body的大小  字体大小为12
7. 1Vw是可视区域宽度的1%，
8. Vh: 可视区域高度的1%，