html和css笔记整理

·  阅读 1555
html和css笔记整理

html和css笔记整理:

meta标签

  1. meta标签主要用于设置网页的元数据,元数据不给用户看

    • 常用语法:

      charset指定网页的字符集
      name指定的数据的名称
      content指定的数据的内容
    • name属性的keywords表示网站的关键字,可以同时指定多个关键字,用逗号隔开

    <meta name="keywords" content="网上购物,手机,笔记本">
    复制代码
    • name属性的description用于指定网站的描述
    <meta name="description" content="......">
    复制代码

语义化标签

hgroup用来为标题分组,可以将一组相关的标题同时放入
em斜体
strong加粗体
blockquote长引用
q双引号
br页面换行
nav网页的导航
aside和主题相关的其他内容(侧边栏)
article一个独立的文章
section一个独立的区块,上边的几个标签都不能表示时用这个标签

列表

html列表共有三种:有序、无序、定义列表

  1. 有序列表:

    <ul>
    	<li></li>
    <ul>
    复制代码
  2. 无序列表:

    <ol>
    	<li></li>
    </ol>
    
    复制代码
  3. 定义列表:

    <dl>
    	<dt></li>
    	<dd></dd>
    </dl>
    
    复制代码
  • 列表之间可以互相嵌套

超链接

  1. 使用a标签来定义超链接

    href可以指定跳转的路径
    target指定超链接打开的位置。可选值:1.self 默认值,在当前页面中打开超链接; 2.blank 在一个新的页面中打开
    id同一个页面是唯一不重复的
  2. 可以直接将超链接的herf属性设置成 #,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部位置

  3. 可以使用 JavaScript:; 来作为href的属性,点击后不会跳转到任何界面


图片标签

  • 使用img标签来引入外部图片,img标签是自结束标签,属于替换元素(在块和行内元素之间,具有两种元素的特点)

    • 属性:
    src指定的是外部图片的路径
    alt对图片的描述,默认情况下不会显示,但当浏览器无法加载时显示
    width图片的宽度
    height图片的高度

    例如:

<img src-"./img/..." alt=""}>
复制代码
  • 内联框架,用于向当前页面中引入一个其他页面(iframe)

    属性:

    src指定要引入的网页的路径
    frameborder指定内联框架的边框,一般设置0
<iframe src="" frameborder="0"></iframe>
复制代码

音视频播放

  1. audio标签用于向页面中引入一个外部的音视频文件,引入时默认不允许用户自己控制播放停止

  2. 属性:

    controls是否允许用户控制播放
    autoplay音频文件是否自动播放
    loop音乐是否循环播放
    <audio  controls>
    <source  src="./source/audio.mp3">
    </audio>
    复制代码
  3. video标签用于向网页中引入一个视频,使用方式和audio基本一样

    <video  controls>
    	<source  src="./source/video.mp4">
    </video>
    复制代码

表格

  1. table中使用 tr 表示表格中的一行,在 tr 中使用 td 表示一个单元格

    rowspan表示纵向的合并单元格
    colspan表示横向的合并单元格
    <td  rowspan=“2”></td>
    复制代码
  2. 可以将一个表格分为三部分:

    头部(thead) 主体(tbody) 底部(tfoot)

  3. th表示头部的单元格,td一般用于主体和底部的单元格


表单

使用form标签来创建一个表单,action表示要提交的服务器的地址

<form action="target.html">
         <!-- 文本框,必须为元素指定name属性 -->
        <input type="text" name="username">
        <br>
        <!-- 密码框 -->
        <input type="password">
        <br>
        <!-- 
            单选按钮
                -像这种选择器,必须指定value属性,value属性最终会作为用户填写的值传递给服务器,name属性必须相同,若不同则不能设置单选
                -checked 可以将单选按钮设置为默认选中
         -->
         <input type="radio" name="hello" value="a">
         <input type="radio" name="hello" value="b" checked>
         <br>
         <!-- 多选框 -->
         <input type="checkbox" name="test" value="1">
         <input type="checkbox" name="test" value="2">
         <input type="checkbox" name="test" value="3">
         <br>
         <!-- 下拉列表  添加selected则为默认选中-->
         <select name="haha">
             <option value="i">选项一</option>
             <option selected value="ii">选项二</option>
             <option value="iii">选项三</option>
         </select>
        <!-- 提交按钮 -->
        <input type="submit" value="注册">
    </form>
复制代码
  • 属性补充:
表单项属性补充解释
readonly将表单项设置为只读
disabled将表单项设置为禁用
utofocus设置表单项自动获取焦点

选择器

常用选择器
  1. 元素选择器
    • 语法:标签名{}
  2. id选择器
    • 语法:#id的属性名{}
  3. 类选择器
    • 语法:.class属性值{}
  4. 通配选择器
    • *{}

复合选择器
  1. 交集选择器

    • 语法:选择器1选择器2选择器3{}
    • 顺序是:标签idclass
    • 注意:中间如果有元素选择器,必须使元素选择器开头
  2. 并集选择器

    • 作用:同时选择多个选择器对应的元素

    • 语法:选择器1,选择器2,选择器3,选择器n{}

    •   h1,span,div.red,p1{
        	color:red;
        }
      复制代码

关系选择器

关系元素包括:父元素、子元素、祖先元素、后代元素、兄弟元素

  1. 子元素选择器:

    • 作用:选中指定父元素的指定子元素

    • 语法:父元素 > 子元素{}

  2. 后代元素选择器:

    • 作用:选中指定元素内的指定后代元素

    • 语法:祖先 后代

  3. 选择相邻的下一个兄弟:

    • 语法:前一个 + 下一个
  4. 选择下边的所有的兄弟:

    • 语法:兄 ~ 弟

属性选择器
  1. [属性名] 选择含有指定属性的元素

    p[title]{
    	color:red;
    }
    复制代码
  2. [属性名=属性值] 选择含有指定属性和属性值的元素

    p[title=abc]{
    	color:red;
    }
    复制代码
  3. [属性名^=属性值] 选择属性值为开头的元素

    p[title^=abc]{
    	color:red;
    }
    复制代码
  4. [属性名$=属性值] 选择属性值为结尾的元素

    p[title$=abc]{
    	color:red;
    }
    复制代码
  5. [属性名*=属性值] 选择属性值中含有某值的元素的元素

    p[title*=abc]{
    	color:red;
    }
    复制代码

伪类选择器

伪类(不存在的类)

  • 伪类用来描述一个子元素的特殊状态,一般使用为开头

    • :first-child 第一个子元素
    u1>li:first-child{ 
        color:red;
    }
    复制代码
    • :last-child 最后一个子元素

    • :nth-child(n) 选中第n个子元素

      • 特殊值:

        n第n个元素
        2n 或 even选中偶数位的元素
        2n+1 或 odd选中奇数位的元素
    • :first-of-type和:last-of-type以及:nth-of-type(),这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序

    • :not() 将符合条件的元素从选择器中去除


伪元素

伪元素,表示页面中的一些特殊的并不真实的存在的元素(特殊的位置),以::开头

::first-letter对第一个字母做样式
::first-line对第一行做样式
::selection对鼠标选中的内容做样式
::before对元素的开始做样式
::after对元素的最后做样式
  • before 和 after 必须和 content 属性结合来使用,他们的内容都是无法选中的
<style>
	p::first-letter{
		font-size:50px;
	}
	p::first-line{
		background-color:yellow;
	}
	p::selection{
		background-color:greenyellow;
	}
	div::before{
		content:‘abc’;
		color:red;
	}
</style>
复制代码

超链接的伪类

  1. :link 用来表示没有访问的链接(正常的链接)

    a:link{
    	color:red;
    }
    复制代码
  2. :hover用来表示鼠标移入的状态

    a:hover{
    	color:aqua;
    }
    复制代码
  3. :active用来表示鼠标点击的状态(点击但没松手

  4. 去除超链接的下划线:

    a{text-decoration:none};
    复制代码

盒模型

CSS将页面中的所有元素都设置为了一个矩形的盒子,每个盒子由以下几个部分组成:

  • 内容区(content) 边框(border) 内边距(padding) 外边距(margin)

一、边框:

  1. 边框宽度:

    • border-width可以用来指定四个方向的边框的宽度

      • 值的情况:

        四个值上 右 下 左
        三个值上 左右 下
        两个值上下 左右
        一个值上下左右
  2. 边框颜色:

    • border-color的用法和border-width一样,如果不想让某一边施加颜色,可以使用none

二、内边距的规则和边框一样

三、外边距的规则和边框一样

  1. 外边距不会影响盒子可见框的大小,但会影响盒子的位置,会影响到盒子实际占用空间

  2. margin也可以设置负值

四、水平布局:

  1. 元素在父元素中水平方向的位置有如下等式:

    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度

    • 七个值中有三个值width、margin-leift、margin-right的情况

      某个值为auto自动调整auto那个值
      将一个宽度和一个外边距设置成auto宽度会调整到最大
      将三个值都设置为auto外边距都是0,宽度最大
      将两个外边距设置为auto,宽度固定值两个外边距取平均值

五、垂直布局

  1. 如果子元素的大小超过了父元素,则子元素会从父元素中溢出,使用overflow属性来设置父元素如何处理

    • 可选值:

      visible 默认值子元素会从父元素中溢出,在父元素外部显示
      hidden溢出的内容将会被裁剪
      scrool生成两个滚动条,通过滚动条查看内容
      auto根据需要生成滚动条

六、display用来设置元素显示的类型

inline设置为行内元素
block设置为块元素
inline-block行内块元素既可以设置宽度和高度有不会独占一行
table设置为一个表格
none元素不在页面中显示
flex设置弹性盒子

visibility 用来设置元素的显示状态

hidden元素在页面中隐藏不显示,但依然占据页面的位置
visible默认值,元素在页面中正常显示

轮廓、阴影、圆角

  1. 轮廓

    outline用来设置元素的轮廓线,用法和border一样

    轮廓和边框类似,但不同点是,轮廓不会影响可见框的大小

    .box1{
    	outline:10px red solid;
    }
    复制代码
  2. 阴影(box-shadow)

    .box1{
    	box-shadow:20px 20px 20px red;
    }
    复制代码
    第一个值水平偏移量,正值向右偏移
    第二个值垂直偏移量,正值向下偏移
    第三个值阴影的模糊半径
    第四个值阴影的颜色
  3. 圆角(border-radius,单位:px)

    四个值左上 右上 右下 左下
    三个值左上 右上左下 右下
    两个值左上右下 右上左下

浮动(float)

  1. 通过浮动可以使一个元素向其父元素的左侧或右侧移动

    • 可选值:

      none默认值,元素不浮动
      left元素向左浮动
      right元素向右浮动
    • 元素浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动

  2. 脱离文档流的特点:

    块元素不再独占页面一行,宽度和高度都默认被内容撑开
    行内元素变成块元素,特点和块元素一样

高度塌陷问题以及解决方法

利用clearfix样式可以同时解决高度塌陷问题和外边距重叠问题:

.clearfix::before,
.clearfix::after{
	content:'';
	display:table;
	clear:both;
}
复制代码

定位(position)

可选值:

static默认值,元素是静止的没有开启定位
relative开启元素的相对定位
absolute开启元素的绝对定位
fixed开启元素的固定定位
sticky开启元素的粘滞定位
  1. 相对定位参照物是相对于没开启定位的自身):

    • 特点:

      • 相对定位是参照元素在文档流中的位置进行定位的
      • 相对定位会提升元素的层次
      • 相对定位不会使元素脱离文档流
      • 相对定位不会改变元素的性质(块还是块,行内还是行内)
      • 其他没有设置定位的元素不会随设置定位的元素位置的改变而改变
    • 设置偏移量

      • 元素开启相对定位后必须设置偏移量(元素开始位置设置为(0,0),向右向下为正):

        top定位元素和定位位置上边的距离
        bottom定位元素和定位位置下边的距离
        left定位元素和定位位置左侧的距离
        right定位元素和定位位置右侧的距离
    •   .box1{
            position:relative;
            left:200px;
            top:-200px;
        }               //向右向下方向为正
      复制代码
  2. 绝对定位

    • 特点:

      • 开启后,元素会从文档流中脱离,这样就不会占用页面内容
      • 绝对定位会改变元素的性质(行内变成块,块的宽高被内容撑开)
      • 使元素提升一个层次
      • 它是相对于其包含块定位的
    • 包含块的理解:

      • 通常情况下,包含块就是离当前元素最近的祖先块元素
      • 开启以后,如果设置 left:0 top:0 则定位元素默认在包含块左上角处
      • 如果所有祖先元素都没有开启定位,则 html(根元素)就是它的包含块(即浏览器页面的左上角)
    • 当开启以后,

      • 水平方向的布局等式就需要添加left和right两个值,此时规则和之前内容只是多添加了left和right
      • 当发生过度约束时,如果9个值中没有auto则自动调整right值以使等式满足
      • 可设置auto的值: margin width left right
      • 垂直方向的布局的等式也必须满足
  3. 固定定位

    • 固定定位的大部分特点和绝对定位一样
    • 唯一不同的是固定定位永远参照语浏览器的视口(可视区域)来定位,即固定定位的元素不会随着网页的滚动条的滚动而变化
  4. 粘滞定位

    • 粘滞定位和相对定位的特点基本一样
    • 不同的是粘滞定位可以在元素到达某个位置时将其固定
  5. 元素的层级

    • 对于开启了定位元素,可以通过z-index属性来指定元素的层级
      • z-index需要一个整数作为参数,值越大元素的层级越高
      • 如果元素的层级一样,则优先显示靠下的元素
      • 祖先元素的层级再高也不会盖住后代元素

字体、行高

  1. 字体相关的样式:
  • font-family 字体族(字体的格式)

    可选值:

    serif衬线字体
    sans-serif非衬线字体
    monospace等宽字体
  • font-face 可以指定字体的名字

    @font-face {
      font-family:'myfont';
      src: url('路径');
     }
    复制代码
  • font-weight 字重,字体的加粗

    可选值:

    normal默认值 不加粗的字符
    bold加粗的字符
    bolder更粗的字符
    lighter更细的字符
  1. 引入图标字体的几个方法:

    • 第一种:使用图标,我们可以通过 font-face 的形式来对字体进行引入
    <i class="fab/fas 图标样式" style="…"></i>
    复制代码
    • 第二种:利用伪类:
    li::before{
        content:'\f1b0';
        font-family:(在css中找到字体的格式)
    }
    复制代码
    • 第三种:通过实体: &#x图标编码
      • 例如: class = "fas">&#xfof3;
      • 如果是从阿里云里面找的图标,则将 fas 替换成 iconfont
  2. 水平和垂直对齐:

    • text-align 文本的水平对齐

      left左对齐
      right右对齐
      center居中
      justify两端对齐
    • vertical-align 文本的垂直对齐

      baseline默认值 基线对齐
      top顶部对齐
      bottom底部对齐
      middle居中对齐
  3. 其他文本样式:

    • text-decoration 设置文本修饰

      可选值:

      none默认值,无
      underline下划线
      line-through删除线
      overline删除线
    • white-space 设置网页如何处理空白

      normal正常
      mowrap不换行
      pre保留空白
  4. 行高:指的是文字占有的实际高度 (line-height

    • 行高可以直接指定一个大小(px em)

      也可以直接为行高设置一个整数(行高是字体的指定的倍数)

      行间距 = 行高 - 字体大小

    • 设置行高是为了使字体居中


图片闪烁问题(雪碧图)

解决图片闪烁问题:

  • 可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示
  • 这个技术被称为CSS-Sprite,我们称之为雪碧图

雪碧图的使用步骤:

1. 先确定使用的图标
2. 测量图标的大小
3. 根据测量的结果创建一个元素
4. 将雪碧图设置为元素背景图片
5. 设置一个偏移量(background-position)来显示正确的图片
复制代码

背景、渐变

  1. background-image 设置背景图片
  • 如果背景图片小于元素,则背景图片会自动在元素中铺满

  • 如果背景图片大于元素,则一部分图片无法显示

    background-image : url(“./img/1.png”);
    复制代码
  1. background-repeat 用来设置背景的重复方式
  • 可选值:

    repeat默认值,背景沿x轴,y轴双向重复
    repeat-x只沿x轴方向重复
    repeat-y只沿y轴方向重复
    no-repeat不重复
  1. background-position 用来设置背景图片的位置
  • 设置方式:

    • 通过top left right bottom center来设置
    • 使用时必须同时设置两个值,如果只写一个值则表示第二个值默认是center
  • 也可以通过偏移量来设置位置

    background-position:50px 50px;   //分别表示水平和垂直方向的偏移量(向右、向下为正)
    复制代码
  1. 设置背景范围
  • backround-clip

    可选值:

    border-box默认值,背景会出现在边框的下边
    padding-box背景不会出现在边框,只会出现在内容区和内边距
    content-box背景只会出现在内容区
  • background-origin 背景图片的偏移量计算的原点

    可选值:

    • padding-box 默认值,background-position 从内边距处开始计算

    • content-box 背景图片的偏移量从内容区处计算

    • border-box 背景图片的变量从边框处开始计算

      padding-box默认值,background-position 从内边距处开始计算
      content-box背景图片的偏移量从内容区处计算
      border-box背景图片的变量从边框处开始计算
  1. background-size 设置背景图片的大小
  • 第一个值表示宽度,第二个值表示高度,如果只写第一个,则第二个值默认为auto

    cover图片的比例不变,将元素铺满
    contain图片比例不变,将图片在元素中完整显示
  1. background-attachment
  • 背景图片是否跟随元素移动

    scroll默认值,背景图片会跟随元素移动
    fixed景会固定在页面中,不会随元素移动
  1. background背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,并且该样式没有顺序要求,也没有必须写的属性

    • 注意:
      • background-size 必须写在background-position的后边,并且使用 / 隔开
      • background-origin background-clip 两个样式,orgin要在clip的前
  2. 线性渐变

  • 通过线性渐变可以设置一些复杂的背景颜色

  • inear-gradient(red yellow)红色在开头,黄色结尾,中间是过渡,也可以指定方向

    45deg表示45度角渐变
    to ……(例:左)向...渐变(例:左)
  • 重复渐变: repeating-linear-gradient


过渡(transition)

transition-property所有属性都过渡,则用all,没有属性过渡用none
transition-duration指定过渡效果的持续时间(单位: s 和 ms)
transition-timing-function过渡的时序函数,指定过渡的3、执行方式
transition-delay过渡效果的延迟,等待一段时间后再执行过渡
transiotion可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟
  • transition-timing-function的可选值:

    ease默认值,慢速开始,先加速,再减速
    linear匀速运动
    ease-in加速运动
    ease-out减速运动
    ease-in-out先加速,后减速
    cubic-bezier()指定时序函数
    steps分步执行过渡效果,参数end 在时间结束时执行过渡(默认值),参数start 在时间开始时执行过渡

动画

动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发

设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤

@keyframes test{
     from{
		margin-left:0;
	}
     to{
		margin-left:700px;
       }
}

复制代码

设置动画:

animation-name当前元素生效的关键帧的名字
animation-duration动画执行时间
animation-delay动画的延时
animation-timing-function动画的时序函数,用法和过渡一样
animation-iteration-count动画执行的次数。可选值:1.次数;2. infinite 无限执行
animation-direction指定动画运行的方向
animatio-play-state设置动画的执行状态。可选值:1.running 默认值,动画执行; 2.paused 动画暂停
animation-fill-mode动画的填充模式
  • animation-fill-mode 的可选值:

    none默认值,动画执行完毕元素回到原来位置
    forwards动画执行完毕元素会停止在动画结束的位置
    backwards动画延时等待时,元素就会处于开始位置
    both结合了forwards和backwards
  • animation-direction 的可选值:

    normal默认值,从 from 向 to 运行
    reverse从 to 向 from 运行
    alternate从 from 向 to 运行,重复执行时反向
    alternate-reserve从 to 向 from 运行,重复执行时反向

变形、平移、旋转

  1. 变形不会影响到页面的布局

    • transform: 用来设置元素的变形效果

      • 平移:

        translateX()沿着x轴平移
        translateY()沿着y轴平移
        translateZ()沿着z轴平移
  2. Z轴平移:

    • 正常情况就是调整元素和人眼的距离,距离越大,距离人越近

    • Z轴平移属于立体效果,默认情况网页不支持透视,如果需要看到效果必须设置网页(html)的视距

      html{
      	perspective:××px;
      }
      .box1{
      	transform:translateZ(××px);
      }
      复制代码
  3. 旋转:通过旋转可以使元素沿着x y或z旋转指定的角度

    rotateX()沿x轴旋转指定的角度
    rotateY()沿y轴旋转指定的角度
    rotateZ()沿z轴旋转指定的角度
    • 例如:沿y轴旋转180度
    transform:rotateY(180deg);
    backface-visibility:hidden;      //设置是否显示元素的背面
    复制代码
  4. 缩放:

    • 对元素进行缩放的函数:

      scaleX()水平方向缩放
      scaleY()垂直方向缩放
      scaleZ()双方向的缩放

less用法

  1. less是一门css的预处理语言

    • 它是css的增强版,通过less可以编写更少的代码实现更强大的样式
    • 在less中添加了许多新特性,像对变量的支持,对mixin的支持……
    • less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须先将less转换为css,然后由浏览器执行
  2. 例如:

    html{
    	--color:#bfa;
    }
    .box1{
    	color:var(--color);
    }         //设置一个关于颜色的函数,方便使用
    
    calc(100px/2)     //设置一个计算函数
    
    div{
    	width:200px;
    	height:$width;
    }        		 //使height和width的值相同
    复制代码
  3. less中的单行注释 // 不会被解析到css中

  4. 变量:

    • 在变量中可以存储任意的值,并且我们可以在需要时,任意修改变量中的值
    • 语法: @变量名
    • 例如: @a:200px;
    • 若变量是类名,或者一部分值使用时必须以@{变量名}的形式使用
    • 变量发生重名时,会优先使用比较近的变量(就近原则)
  5. 常用的变量使用:

    • & 表示外层的父元素
    .box1{
    	&:hover{}
    }                 //表示box1的hover属性
    复制代码
    • extend() 对当前的选择器扩展指定选择器的样式(选择器分组)
    p2:extend(.p1){
    	color:red;
    }                 //表示p2不仅有p1的所有样式,而且还有color属性
    复制代码
    • 复制样式:
    .p3{
    	.p1();
    }                     //表示p3复制了p1的所有样式
                          // mixin 混合
    复制代码
    • 使用类选择器是可以在选择器后边添加一个括号,这是我们实际上就创建了一个mixins
    .p4(){
         width:100px;
         height:100px;
    }
    .p5{
    	.p4;
    }
    复制代码
    • average函数可以将两个color参数取平均值:
    span{
    	color:average(red,blue);
    }
    复制代码
    • darken可以将已有颜色加深
    background-color:darken(#bfa,10%);
    复制代码
    • 在less中所有的数据可以直接进行运算:
    width:100px + 100px;
    复制代码
    • 可以通过 @import来 将其他的less文件引入到当前的less文件中:
    @import“××.less”;
    复制代码

弹性盒

  1. flex(弹性盒)

    • 是css中的有一种布局手段,它主要用来代替浮动来完成页面的布局
  • flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变
  1. 弹性容器:

    • 要使用弹性盒,必须先将一个元素设置为弹性容器

    • 我们通过 display 来设置弹性容器

      display:flex设置为块级弹性容器
      display:inline-flex设置为行内的弹性容器
  2. 弹性元素:

    • 弹性容器的子元素是弹性元素

    • 一个元素可以同时是弹性容器和弹性元素

  3. flex-direction 指定容器中弹性元素的排列方式

    • 可选值:

      row默认值,弹性元素在容器中水平排列
      row-reverse弹性元素在容器中反向水平排列
      column弹性元素纵向排列
      column-reverse弹性元素反向纵向排列
  4. 主轴:弹性元素的排列方向称为主轴

    侧轴:与主轴垂直方向的称为侧轴

  5. 弹性元素的属性:

    flex-grow指定弹性元素伸展系数,父元素的剩余空间会按照比例进行分配
    flex-shrink指定弹性元素的收缩系数,当父元素中的空间不足以容纳所有的子元素时,会对子元素进行收缩

    例如:

    flex-grow:1;
    flex-shrink:0;
    复制代码
  6. flex-wrap:

    设置弹性元素是否在子元素溢出时弹性容器自动换行

    • 可选值:

      nowrap默认值,元素不会自动换行
      wrap元素沿着辅轴方向自动换行
      wrap-reverse元素沿着辅轴反向换行
  7. justify-content 设置主轴上的元素如何排列(如何分配主轴上的空白空间)

    • 可选值:

      flex-start元素沿着主轴起边排列
      flex-end元素沿着主轴终边排列
      center元素居中排列
      space-around空白分布到元素两侧
      space-between空白均匀分布到元素间
      space-evenly空白分布到元素的单侧
  8. align-items 元素在辅轴上如何对齐

    • 可选值:

      stretch默认值,将元素的长度设置为相同的值
      flex-start元素不会拉伸,沿着辅轴起边对齐
      flex-end沿着辅轴的终边对齐
      center居中对齐
      baseline基线对齐
  9. align-self 用来覆盖当前弹性元素上的align-items

    align-self:stretch;
    复制代码
  10. flex 可以设置弹性元素所有的三个样式:增长 缩减 基础

    • 可选值:

      initial增长
      auto缩减
      none基础
  11. order 样式可以设置几个相同的元素的排列顺序

    li:nth-child(1){
    	order:2;
    }
    li:nth-child(2){
    	order:1;
    }
    li:nth-child(3){
    	order:3;
    }                   // 则顺序为第二个、第一个、第三个
    复制代码


最后

如果有帮助到你,请给这篇文章点个赞和收藏吧,让更多的人看到 ~ ("▔□▔)/

如果有异议的地方,欢迎在评论区留言,我都会逐一回复 ~

如果感兴趣的话,欢迎访问 眼里要有光的博客

分类:
前端
标签: