CSS day06学习笔记 2021-4-7

最新推荐文章于 2024-08-03 16:11:42 发布

ZivChen971206

最新推荐文章于 2024-08-03 16:11:42 发布

阅读量81

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_44390531/article/details/119674730

版权

前端基础专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1.margin负值的应用

让每个盒子margin往左侧移动-1px正好压住相邻盒子的边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）

4.CSS三角强化

div {
  width: 0;
  height: 0;
  border-color: transparent red transparent transparent;
  border-style: solid;
  border-width: 22px 8px 0px 8px;
}

CSS初始化

HTML5 的新特性

1.1 HTML5新增的语义化标签

header 头部标签
nav 导航标签
article 内容标签
section 定义文档某个区域
aside 侧边栏标签
footer 尾部标签

1.2 HTML5新增的多媒体标签

音频audio
视频video

autoplay 视频就绪自动播放
muted 静音播放
controls 控制器
loop 循环播放
poster 未加载视频显示图片

HTML新增input类型

<form action="">
  <ul>
    <li>邮箱：<input type="email"></li>
    <li>网址：<input type="url"></li>
    <li>日期：<input type="date"></li>
    <li>日期：<input type="time"></li>
    <li>数量：<input type="number"></li>
    <li>手机号码<input type="tel"></li>
    <li>搜索：<input type="search"></li>
    <li>颜色<input type="color"></li>
    <li><input type="submit" value="提交"></li>
  </ul>
</form>

HTML新增的表单属性

required 内容不能为空，必填

placeholder 表单的提示信息，存在默认值将不显示

autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单

autocomplete 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项

multiple 多选文件提交

CSS选择器

新增属性选择器

<!--1.利用属性选择器就可以不用借助于类或者id选择器-->
<input type="text" value="请输入用户名">
<input type="text">
<!--2.属性选择器还可以选择属性=值的某些元素 （重点）-->
<input type="text">
<input type="password">
<!--3.属性选择器可以选择属性值开头的某些元素-->
<div class="icon1">小图标</div>
<div class="icon2">小图标</div>
<div class="icon3">小图标</div>
<div class="icon4">小图标</div>
<!--4.属性选择器可以选择属性值结尾的某些元素-->
<section class="icon-data">111</section>
<section class="icon-data">222</section>
<section class="icon-ice">333</section>
<div>小图标</div>
</body>
<style>
  input[value] {
    color: pink;
  }
  input[type="text"]{
    color: #ff8500;
  }
  div[class^="icon"]{
    color: red;
  }
  section[$="data"]{
    color: blue;
  }

构造伪类选择器

ul :first-child{
  background-color: pink;
}
ul :last-child{
  background-color: pink;
}
ul :nth-child(3){
  background-color: pink;
}

结构伪类选择器

section div:nth-child(1){
  background-color: red;
}
section div:nth-of-type(1){
  background-color: blue;
}

区别：

1.nth-child对父元素里面所有孩子排序选择（顺序是固定的）先找到第n个孩子，然后看看是否和E匹配

伪元素选择器（重点）

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element::before{}
beforeh和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="tudou">
  <img src="img/pic.png" alt="">
</div>
</body>
<style>
  .tudou{
    width: 400px;
    height: 200px;
    position: relative;
  }
  div :first-child{
    width: 400px;
    height: 200px;
  }
  .tudou::before{
    content:'';
    background: url("img/img.png") no-repeat rgba(0,0,0,.3) center;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .tudou:hover::before{
    display: block;
  }
</style>
</html>

伪元素清除浮动

CSS3盒子模型

（box-sizing:content-box）

（box-sizing:border-box） padding、border不会撑大盒子

CSS3滤镜filter

<style>
  img{
    /*blur是一个函数 小括号里面数值越大，图片月模糊，注意数值要加px单位*/
    filter:blur(15px);
  }
  img:hover{
    filter: blur(0px);
  }
</style>

CSS3过渡（重要）

transition:要过渡的属性花费时间运动曲线何时开始

ZivChen971206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS day06学习笔记 2021-4-7

1.margin负值的应用让每个盒子margin往左侧移动-1px正好压住相邻盒子的边框鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index）4.CSS三角强化div { width: 0; height: 0; border-color: transparent red transparent transparent; border-style: solid; border-width: 22px 8px 0px 8px
复制链接

扫一扫