css_css3新特性

目录

      • css3新增盒子模型
        • 1.默认盒子模型
        • 2.css3新增了一种盒子模型
        • 设置
        • 举例说明
      • 弹性盒子布局
      • css3新增选择器
        • [1]属性选择器
        • [2]结构伪类选择器
          • 1.nth-child
          • 2.nth-of-type
          • 区别
        • [3]伪元素选择器
      • background-size
      • transform转换
      • 动画
        • 过渡动画
          • 语法
          • 特点
        • animation动画
      • 圆角边框
      • 盒子阴影
      • 渐变色
      • 换行
        • white-space
        • text-overflow
        • overflow-hidden
        • 处理文字溢出
        • 处理多行文本溢出

css3新增盒子模型

所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 内容。

1.默认盒子模型

默认盒子模型:盒子的content = width/height+padding+border ; 盒子的填充和边框都会撑大盒子。

2.css3新增了一种盒子模型

css3新增了一种盒子模型: 盒子的content = width/height ; ;盒子的填充和边框不会撑大盒子(前提是盒子的padding+border

设置

通过 box-sizing 来指定盒模型

  • box-sizing:content-box; 是默认盒子模型
  • box-sizing:border-box; 是新型盒子模型

举例说明

<body>
    <div class="box">div>
    <div class="box2">div>
body>
  
  • 上面两个设置除了盒子模型不同,其余样式相同的盒子
  • css_css3新特性_第1张图片
  • 可以看到 设置旧的盒子模型 content = width/height + padding + border;若是我们想设置200px的盒子,当设置padding或border时要在width将padding与border减去(手动计算)
  • 而新盒子模型的 content = width 无论设置padding、border 都会在200里面(浏览器自动计算)

弹性盒子布局

弹性盒子布局是css3新的盒子布局方式,具体请看->传送门

css3新增选择器

[1]属性选择器

属性选择器是根据元素属性来选择元素,使用[]来包裹
css_css3新特性_第2张图片

input[type=text]{
 // 上述选择的是input元素并且具有type属性且属性值为text的元素
}

举例说明
在所有input框中选择type属性为text的输入框,将问本颜色设置为红色;

<body>
  <input type="text" />
  <input type="number" />
  <input type="password" />
body>

[2]结构伪类选择器

结构伪类选择器是根据文档结构来选择元素,常用于根据 父级元素来选择子元素。

1.nth-child
  • E:nth-child(n):选择第n个E元素;
  • E:first-child:选择第1个E元素,等同于E:nth-child(1)
  • E:last-child:选择最后一个E元素
  • E:nth-child(odd):选择为奇数的li元素,等同于E:nth-child(2n+1)
  • E:nth-child(even):选择为偶数的li元素,等同于E:nth-child(2n)
2.nth-of-type

nth-of-type的使用方法与nth-child的使用方法相同

  • E:nth-of-type(n)
  • E:first-of-type
  • E:last-of-type
  • E:nth-of-type(odd)
  • E:nth-of-type(even)
区别
  • E:nth-child(n) 是将所有元素进行排序,然后选择第n个元素(如果第n个元素为E则设置有效,不为E则设置无效);
  • E:nth-of-type(n):是将所有为E的元素拉出来进行排序,选择第n个E元素(如果存在第n个E元素则设置有效,否则设置无效)
    1.举例说明
    <div class="box">
      <input type="text" />
      <a href="#">a标签a>
      <input type="number" />
      <div>div标签div>
      <input type="password" />
    div>
    .box input:nth-child(2) {
      background: red;
    }

上述代码发现设置样式不起作用,原因是.box input:nth-child(2)是寻找类名为box的元素里面 第二个元素且该元素为input元素的元素,但是box元素里面第二个元素为a标签,所以设置失败,样式不起作用

    .box input:nth-of-type(2) {
      background: red;
    }

上述代码发现样式设置成功了,原因是.box input:nth-of-type(2)是先将类名为box的元素里面的input标签元素找出来进行排序,发现共有3个,给第二个设置样式就设置成功了。

[3]伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素;所以它不是真正意义上的元素

E::before{
}
E::after{
}

伪元素选择器必须存在content属性,content属性值设置存在一定的限制,具体可以看这篇博客->传送门。

background-size

设置背景图片的大小是css3新增的属性,不能添加作为复合属性,具体请看传送门

transform转换

css_css3新特性_第3张图片

动画

过渡动画

transition 是 css3 新增的⼀个功能,可以实现元素不同状态间的平滑过渡(当元素从⼀个状态进⼊到另⼀个状态时),经常⽤来制作⼀些动画效果。

语法
transition:过渡的属性 完成时间(s) 运动曲线 延迟时间
  • 过渡的属性: 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以;
  • 完成时间:单位是s,必须带单位。
    • 如果想要0.5s内过渡完成 就是 0.5s
  • 运动曲线:过渡的曲线
    • ease:(默认)慢速开始 加速 然后慢速结束的过程。
    • linear:以相同的速度开始至结束。
    • ease-in:以慢速开始的过渡效果
    • ease-out:以慢速结束的过渡效果
    • ease-in-out:以慢速开始、慢速结束
    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值
  • 延迟时间:多⻓时间后再执⾏这个过渡动画,单位为s
特点

transition过渡动画不能自动开始,动画次数固定一次(不能循环)

animation动画

css_css3新特性_第4张图片

圆角边框

border-radius:50%;(宽高相同即为圆)

  • 单位:
    • px
    • 百分比(相对于自身大小)

盒子阴影

box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)]

渐变色

background: linear-gradient(方向, start-color, ..., last-color);

换行

white-space

  • 定义:white-space这个css的样式,用来设置元素对内容中的空格的处理方式
  • 属性值
    • normal(默认)
      • 合并空格,多个相邻空格合并成一个空格;
      • 在源码中的换行作为空格处理,只会根据容器的大小进行自动换行;
    • nowrap
      • 合并空格,多个相邻空格合并成一个空格;
      • 在源码中的换行作为空格处理,容器边界不会换行;
      • 经常与经常和overflow,text-overflow一起使用(作为多余文本显示省略号)
        • white-space:nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
          
    • pre
      • 不合并空格,有几个展示几个空格;
      • 遇到 \n 会换行;
      • 遇到容器边界不会换行;
    • pre-wrap
      • 不合并空格,有几个展示几个空格;
      • 遇到 \n 会换行;
      • 遇到容器边界会换行;
    • pre-line
      • 合并空格,多个相邻空格合并成一个空格;
      • 遇到 \n 会换行;
      • 遇到容器边界会换行;
        css_css3新特性_第5张图片

text-overflow

text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (…) 或显示自定义字符串(不是所有浏览器都支持)。
css_css3新特性_第6张图片

overflow-hidden

  • visible—默认内容不会被修剪,会呈现在元素框之外
  • hidden—内容会被修剪,并且其余内容是不可见的
  • scroll—内容会被修剪,但是会在盒子外面显示滚动条以便查看(注:若是overflow的属性值为scroll,无论内容有没有溢出都会显示滚动条)
  • auto—如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(只有内容超出才会显示滚动条)

处理文字溢出

width:固定宽度;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis; // 处理浏览器兼容问题

处理多行文本溢出

width:固定宽度;
display:-webkit-box;
-webkit-line-clamp:行数;
-webkit-box-orient:vertical;
overflow:hidden;

你可能感兴趣的:(2022_html+css,css,css3,html)