爆肝！css复习笔记（有目录！）

最新推荐文章于 2024-04-13 12:25:50 发布

前端corner

最新推荐文章于 2024-04-13 12:25:50 发布

阅读量478

点赞数 1

分类专栏： css 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/laplacepoisson/article/details/120811921

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

爆肝！css复习笔记

学习完html和css，感觉内容很多很杂，于是肝下了这份复习笔记，可能会有错误的地方，欢迎指正！也欢迎交流。
写的时候尽量把属性都写到目录上了，方便查找。

1、基础选择器：标签选择器、类选择器、id 选择器和通配符选择器

这些比较简单没有写出来。
注意 类选择器和 id选择器 权重为 10 就好
标签选择器权重为 1

2、css字体属性

font-family

body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

font-size字体大小

谷歌浏览器默认的文字大小为16px

font-weight字体的粗细

normal: 等同于400

bold：等同于700

font-style文字风格

normal：默认值

italic：斜体

字体复合属性写法

必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用！！！

这种写法要按照顺序

body { font: font-style font-weight font-size/line-height font-family; }

3、css文本属性

color 文本颜色

属性值：

red / green…
#FF000… 常用
rgb(255,0,0)或rgb(100%,0%,0%)

text-align对齐文本

属性值：left / right / center

text-decoration装饰文本

属性值： none(默认) / underline / overline / line-through

text-indent文本缩进

如：

p { 
 	text-indent: 2em; 
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

line-height行高

4、css的三种样式表

行内式：内联样式表

嵌入式：内部样式表

链接式：外部样式表

<link rel="stylesheet" href="css文件路径">

在这里插入图片描述

5、css复合选择器

后代选择器

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

子选择器

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

并集选择器

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

css3属性选择器（权重为10）

以下例子的结构html

<body>
    <!-- 1.利用属性选择器可以不用借助类或id选择器 -->
    <!-- <input type="text" name="" id="" placeholder="请输入用户名">
    <input type="text"> -->
    <!-- 2.属性选择器还可以选择属性=值的某些元素 重点!!务必掌握-->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div>dajiangyou</div>
    <!-- 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">a</section>
    <section class="icon2-data">b</section>
    <section class="icon3-ico">c</section>
</body>

1、E[att]

选择具有att属性的E元素

input[placeholder] {
	color: pink;
}

2、E[att=“val”]

选择具有att属性且值全等于val的E元素

input[type=text] {
     color: pink;
}

3、E[att^=“val”]

选择具有att属性且值以val开头的E元素

div[class^="icon"] {
      color: red;
}

E可以省略，只写E前面的祖先元素，如：

/*结构
<li>
	     <a href="javascript:;" title="景点玩乐">
	         <span class="local-nav-icon-icon3"></span>
	         <span>景点玩乐</span>
	     </a>
 </li>*/
.local-nav li [class^="local-nav-icon"]

4、E[att$=“val”]

选择具有att属性且值以val结尾的E元素

section[class$="data"] {
	color: blue;
}

5、E[att*=“val”]

选择具有att属性且值中包含val的E元素

6、伪类选择器（权重为10）

也属于复合选择器，伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

1、链接伪类选择器

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active

/* link visited hover active要按顺序写LVHA */
/* 链接要单独指定样式 */
a {
	text-decoration: none;
	color: black;
}

/* 未访问链接a:link */
a:link {
	color: #333;
	text-decoration: none;
}

/*访问过的链接*/
a:visited {
	color: blue;
} 

a:hover {
	color: #369;
	text-decoration: underline;
}

/* 鼠标按下不放 */
a:avtive {
	color: black;
}

2、focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus { 
 	background-color:yellow;
}

3、结构伪类选择器（简单说就是选择第几个的选择器）

（1）E:first-child

匹配父元素中的第一个子元素E

（2）E:last-child

匹配父元素中最后一个E元素

（3）E:first-of-type

指定类型E的第一个

（4）E:last-of-type

指定类型E的最后一个

（5）E:nth-child(n)

匹配父元素中的第n个子元素E

n可以是关键字（odd / even）、数字、公式(从0开始算，但是第0个元素或者超出了元素的个数会被忽略)

n+5: 从第5个开始（包括5）到最后

-n+5: 前5个（包括5）

（6）E:nth-of-type(n)

指定类型E的第n个

6、伪元素选择器（权重为1）

1、::before

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

2、::after

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

注意

before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1

3、应用：制作伪元素字体图标

/*结构
<body>
    <div class="box">
    </div>
</body>
*/
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?g5zb12');
    src: url('fonts/icomoon.eot?g5zb12#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?g5zb12') format('truetype'),
        url('fonts/icomoon.woff?g5zb12') format('woff'),
        url('fonts/icomoon.svg?g5zb12#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.box {
    position: relative;
    width: 200px;
    height: 35px;
    border: 1px solid red;
}

.box::after {
    position: absolute;
    top: 5px;
    right: 10px;
    /* 加反斜杠 */
    content: '\ea50';
    font-family: 'icomoon';
    font-size: 18px;
    color: red;
}

在这里插入图片描述

7、css元素显示模式

块元素

常见的块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等（标题段落列表div）

特点：

霸道，独占一行
宽高，内外边距可以控制
宽度默认是父级宽度的100% ，高度受内容影响
是一个容器及盒子，里面可以放行内或块级元素

注意

文字类的元素内不能使用块级元素

行内元素

常见的行内元素

有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

注意：

特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

<!-- 这样写中间会有一个空格 -->
<span>111111</span>
<span>222222</span> 
<!-- 这样写中间没有空格 -->
<span>111111</span><span>222222</span> 
<!-- 原因：浏览器解析时换行和多个空格解析为一个空格 -->

行内元素水平居中

给父元素添加 text-align: center

行内块元素

常见：

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

<!-- 这样写中间会有一个空格 -->
<span>111111</span>
<span>222222</span> 
<!-- 这样写中间没有空格 -->
<input type="text"><input type="text">
<!-- 原因：浏览器解析时换行和多个空格解析为一个空格 -->

② 默认宽度就是它本身内容的宽度（行内元素特点）

③ 宽高，内外边距可以控制.

8、css元素显示模式

`display:block`

`display:inline`

`display: inline-block`

9、单行文字水平垂直居中

方法

line-height设置行高等于盒子高度，使垂直居中
text-align: center使水平居中

10、css的背景

background-color背景颜色

默认：background-color: transparent;

background-image背景图片

background-image : none | url (url)

background-repeat背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

background-position背景图片位置

background-position: x y;参数代表的意思是：x 坐标和 y 坐标。可以使用 方位名词 或者 精确单位

注意：

参数是精确单位，如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

background-attachment 背景图像固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

background-attachment : scroll | fixed

background背景复合写法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明

background: rgba(0, 0, 0, 0.3);

CSS3 新增属性，是 IE9+ 版本浏览器才支持的 ,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用.

11、css盒子模型

边框（border）

border : border-width || border-style || border-color

border-style: none || solid || dashed || dotted

简写：

border: 1px solid red;没有顺序

border-collapse表格的细线边框

border-collapse: collapse; //相邻边框合并在一起

内边距（padding）

padding内边距可以撑开盒子

如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小！！！

padding: 5px 10px;   //上下  左右
padding: 5px 10px 20px //上 左右 下
padding: 1px 2px 3px 4px //上 右 下

外边距（margin）

应用：让块级盒子水平居中

条件：① 盒子必须指定了宽度（width）。② 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}
//
margin-left: auto; margin-right: auto;
//
margin: auto;
//
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

12、外边距合并

相邻块级元素怒垂直外边距合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
其他方法如浮动、固定、绝对定位代补充

13、

list-style: none

去掉li前面的项目符号

border-radius圆角边框

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

14、 box-shadow盒子阴影

box-shadow: h-shadow（水平阴影位置必须） v-shadow（垂直阴影位置必须） blur（模糊距离） spread（阴影尺寸） color（阴影颜色） inset（将外部阴影改为内部阴影）;

盒子阴影不占用空间，不会影响其他盒子排列。

15、 text-shadow文字阴影

text-shadow: h-shadow（必须，水平位置） v-shadow（必需，垂直位置） blur（模糊距离） color（阴影颜色）;

16、浮动float

网页布局第一准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

网页布局第二准侧：

先设置盒子的大小, 之后设置盒子的位置.

选择器 { float: 属性值; }

浮动特性

浮动元素会脱离标准流(脱标)，浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性.
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

17、清除浮动

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

1、clear: both

选择器{clear: both}

2、额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。

要求这个新的空标签必须是块级元素

3、父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

4、:after 伪元素法

.clearfix:after { 
     content: ""; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 	*zoom: 1;
}

5、双伪元素清除浮动

.clearfix:before,.clearfix:after {
     content:"";
     display:table; 
}
.clearfix:after {
 	clear:both; 
}
.clearfix {
 	*zoom:1;
}

/*结构
<body>
    <div class="box clearfix">
        <div class="one">盒子1</div>
        <div class="two">盒子2</div>
        <!-- 第一种方法 必须使用块级元素-->
        <!-- <div class="clear"></div> -->
    </div>
    <div class="out">外部盒子</div>
</body>
*/

18、css属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

.jdc {
     display: block;
     position: relative;
     float: left;
     width: 100px;
     height: 100px;
     margin: 0 10px;
     padding: 20px 0;
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     color: #333;
     background: rgba(0,0,0,.5);
     border-radius: 10px;
}

19、定位

1、static静态定位

静态定位是元素的默认定位方式，无定位的意思。

2、relative相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

3、absolute绝对定位

特点

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的。

4、子绝父相

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

4、fixed固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

fixed特点

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置。是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

固定在版心右侧位置

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）

的一半位置。

让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

6、sticky粘性定位

特点

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE 不支持。

7、绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

left: 50%;：/*让盒子的左侧移动到父级元素的水平中心位置。*/
margin-left: 自身宽度的一半;：/*让盒子向左移动自身宽度的一半。*/

8、定位的特殊性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷

20、元素的显示与隐藏

1、display 属性

display: none ；隐藏对象

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置

2、visibility 可见性

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置

3、overflow 溢出

属性值：

visible: 不剪切内容也不添加滚动条

hidden: 不显示超出对象的内容，超出部分隐藏

scroll: 不管超出内容否，总是显示滚动条

auto: 超出自动显示滚动条，不超出不显示

21、精灵图

例子：

.box1 {
    width: 60px;
    height: 60px;
    background: url(images/sprites.png) -182px 0 no-repeat;
    margin: 100px auto;
}
/*
<div class="box1"></div>
*/

22、字体图标

1、字体图标下载

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

2、字体图标引入

把下载包里面的 fonts 文件夹放入页面根目录下
在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

@font-face {
     font-family: 'icomoon';
     src: url('fonts/icomoon.eot?7kkyc2');
     src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
}

3.给标签定义字体。如：

span {
 	font-family: "icomoon";
}

3、字体图标追加

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

23、css三角

div {
     width: 0;
     height: 0;
    /* 下面两句为了照顾兼容性 */
     line-height: 0;
     font-size: 0;
     border: 50px solid transparent;
     border-left-color: pink;
}

可以做不对称的三角形：

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;   /*上 右 下 左*/
/*
border-width:左右大小控制三角形的宽，上下大小控制三角形的高，
只要两个边框：上左或右下对角线从左上到右下，上右或下左对角线从右上到左下
*/

24、css用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

1、更改用户的鼠标样式

cursor: poiter;	/*小手*/
cursor: default;	/*白色箭头，默认*/
cursor: move;	/*移动*/
cursor: text;	/*文本*/
cursor: not-allowed;	/*禁止*/

2、outline轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

3、防止拖拽文本域

实际开发中，我们文本域右下角是不可以拖拽的

textarea{ resize: none;}

25、vertical-align属性应用

使用场景: 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline(默认元素放置在父元素基线上) | top（元素顶端与行中最高元素顶端对齐） | middle（把此元素放在父元素的中部） | bottom（底端对齐）

应用1：图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

应用2：解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）
把图片转换为块级元素 display: block;

26、溢出的文字省略号显示

1、单行文本溢出text-overflow: ellipsis

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

2、多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

27、margin负值运用

使相邻盒子的边框重叠

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

28、文字围绕浮动元素

利用文字会围绕浮动元素显示的特点

29、给行内块父级添加text-align: center使行内块居中

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

30、HTML5新增语义化标签

`<header>`：头部标签

`<nav>`：导航标签

`<article>`：内容标签

`<section>`：定义文档某个区域

`<aside>`：侧边栏标签

`<footer>`：尾部标签

31、HTML5新增多媒体标签

视频：`<video>`

<video src="文件地址" controls="controls"></video>

兼容性写法：

<video controls="controls" width="300">
     <source src="move.ogg" type="video/ogg" >
     <source src="move.mp4" type="video/mp4" >
     您的浏览器暂不支持 <video> 标签播放视频
 </ video >

属性：值：

autoplay：autoplay 视频就绪自动播放（谷歌浏览器需要添加muted解决自动播放问题）
controls: controls 向用户显示播放控件
width: 像素设置播放器宽度
height: 像素设置播放器高度
loop: loop 播放完继续循环播放
preload: auto || none 是否预加载视频，有了autoplay属性自动忽略该属性
src: url 视频地址
poster: imgurl 加载等待的图片
muted: muted 静音播放

<!-- 谷歌浏览器阻止了自动播放
解决方案:muted="muted"   静音播放
controls: 显示播放控件-->
<video src="images/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster></video>

音频：`<audio>`

<audio src="文件地址" controls="controls"></audio>

兼容性写法

< audio controls="controls" >
     <source src="happy.mp3" type="audio/mpeg" >
     <source src="happy.ogg" type="audio/ogg" >
     您的浏览器暂不支持 <audio> 标签。
 </ audio>

常见属性

autoplay：autoplay
controls: controls
loop: loop
src: url

32、新增input类型

<!-- 我们验证的时候必须添加form表单域 -->
<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"></li>
    </ul>
</form>

属性：

1、required

值：require 表示内容不能为空

2、placeholder

值：提示文本

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

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
 	color: pink;
 }

3、autofocus

值：autofocus

页面加载自动聚焦到指定表单

4、autocomplete

值： off / on

默认开启

开启则在用户键入时，浏览器基于之前键入值，应该显示出在字段中填写的选项，要放在表单内，同时加上name属性，同时成功提交过

5、multiple

值： multiple

可以多选文件提交

33、filter:blur(px)图片模糊

img {
	filter: blur(2px);
}
img:hover {
	filter: blur(0px);
}

34、calc函数

.son {
    width: calc(100% - 30px);
    height: 30px;
    background-color: skyblue;
}

前端corner

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
爆肝！css复习笔记（有目录！）

爆肝！css复习笔记1、基础选择器：标签选择器、类选择器、id 选择器和通配符选择器2、css字体属性font-familyfont-size字体大小font-weight字体的粗细font-style文字风格字体复合属性写法必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用！！！3、css文本属性color 文本颜色text-align对齐文本text-decoration装饰文本text-indent文本缩进line-height行高4、css的三种样式表行内
复制链接

扫一扫