CSS学习笔记三

CSS学习笔记三

三角形

1.设置高度为0 - - -height:0px;
2.设置宽度为0 - - -width:0px;
3.边框全透明 - - -border：num solid transparent
4.给需要的方向加颜色 - - -border-[top | right | bottom | left]-color:颜色值

transparent - - -完全透明

ie盒子模型

宽=w(内容content+margin+padding)
box-sizing:border-box;

弹性盒模型

弹性盒模型：主轴 侧轴
主轴：默认水平左---->右
侧轴：默认垂直方向
弹性盒模型子项目默认在主轴排列，左---->右
如果主轴为水平，侧轴为垂直

子项目默认一行排列，排不下，会被压缩

1.dispiay:flex-----把父元素设置为弹性盒模型

2. flex-direction-----设置主轴方向
row----------水平从 左---->右
row-reverse–水平从 右---->左
column-----------垂直 上—>下
column-reverse—垂直 下—>下

3. justify-content-----设置项目主轴对齐方式
flex-start-----主轴起点对齐
flex-end------主轴末端对齐
center--------居中对齐
space-betwwen-----两端对齐，多余分到项目之间
space-around-------自动对齐，多余分到项目两侧

4. align-items--------侧轴只有一行，侧轴对齐方式
flex-start-----侧轴起点对齐
flex-end------侧轴末端对齐
center--------侧轴居中对齐

5.align-content-------侧轴有多行，侧轴对齐方式
flex-start-----侧轴起点对齐
flex-end------侧轴末端对齐
center--------侧轴居中对齐
space-betwwen-----两端对齐，多余分到项目之间
space-around-------自动对齐，多余分到项目两侧

6. flex-wrap--------子项目是否换行
nowrap-----不换行，默认值
wrap--------换行
wrap-reverse-----反转换行

给子元素设置的属性
1. align-self----给子元素侧轴对齐方式
auto--------默认值，如果父元素align-items,auto值为父元素 align-items属性值；如果父元素没有align-items值，auto值为：
stretch-------拉伸，把子项目宽高拉伸至父元素宽高
flex-start-----侧轴起点对齐
flex-end------侧轴末端对齐
center--------侧轴居中对齐

注意：
1.子项目在主轴方向上的值（宽或高）一定要设置

2.order:num-----设置子元素排序，num越大越往后

3.flex-grow-----设置子元素放大比例( 剩 余 空间 )
flex-----------设置子元素所占弹性容器比例

4.flex-shrink----设置子元素压缩比例，默认1(等比压缩);0(不压缩)

5.flex-basis-----设置子元素主轴方向宽度 或 高度，原来的宽高被覆盖

边框阴影
box-shadow：x距离 y距离 模糊度 边框 颜色 inset(内阴影- - 不写默认外阴影)

边框圆角
border-radius: 四个值：左上 右上 右下 左下
两个值：左上右下 右上左下
eg:border-top|bottom-left|right-radius:单独添加圆角
border-radius：x1 x2 x3 x4 / y1 y2 y3 y4

文字阴影：text-shadow: x y 模糊度 颜色

文字描边：-webkit-text-stroke：描边宽度 颜色

文字排版：direction: rtl / ltr

背景图片:background-size:
1.百分比
2.数值+px
3.auto:默认值
4.cover:等比缩放，直到一边完全覆盖
5.contain：包裹

背景图片位置
放置区域：
background-origin-----设置背景图放置位置
取值：border-box—边框位置
padding-box—padding位置，默认
content-box—内容位置
最终显示区域：
background-clip-----最终显示区域
取值：border-box—边框位置，默认
padding-box—padding位置
content-box—内容位置

媒体查询

通过获取设备特性，为其设置相应CSS样式

语法：
@media all and (条件表达式）{ }
@media all and (条件1）and (条件2）{ }

注意：条件表达式一般使用最小宽度 最大宽度来表示
1. 如果使用最小宽度，值越小越在前面
2. 如果使用最大宽度，值越大越在前面

移动端布局;
移动端布局：逻辑像素=物理像素 / 像素比dpr
设计图为640px -750px --dpr 为 2 | 1080px–dpr 为 3

自定义字体

             @font-face{
                        font-family:" 自定义昵称"
                        src:url(字体存放路径);
             }
    添加字体：font-family:" 自定义昵称"

字体图标步骤：
使用@font-family 定义字体名称 和 引入路径

    @font-face {
              font-family: '自定义昵称';
			  src:url('路径 / 引入字体名称.eot?#iefix') format('embedded-opentype'),
				  url('路径 / 引入字体名称.svg#icomoon') format('svg'),
				  url('路径 / 引入字体名称.woff') format('woff'),
				  url('路径 / 引入字体名称.ttf') format('truetype');	
     } 
     2.给想要添加字体图标添加
            span{font-family:'自定义昵称'}
     3.给标签添加字体的编码
            <span>&#xe631</span>