文章目录

- **::before和::after清除浮动的固定格式（前后格式互不影响）**
- Div内图片填充
- **a标签的应用及样式：**
- 图片热点：map必须和img一起使用
- **背景颜色渐变：**
- Padding和margin内外边距：
- Flex 弹性盒子：
- Column--列的应用：
- 文本强制在一行显示
- 行内块元素在行内垂直方向的微调：
- nth-child() :子框内的第一个开始 nth-of-type() ：子框内的同一类的第一个开始
变换 transform属性：
- 过渡transition 属性：
- animation动画：
- Position定位：
- 添加音频标签
- Table表格
- input表单控件的参数：
- input增强的表单控件：
- frameset框架集：
- CSS 外部引入方式：
- 选择器优先级：
- 光标悬浮上去的样式（cursor属性）：
- 图标字体的使用
- 小图标定位用到的网址
- 隐藏元素的几种方式：

::before和::after清除浮动的固定格式（前后格式互不影响）

.clearfix::before {content: " ";display: table;clear: both;
}.clearfix::after {content: "";display: block;width: 0;height: 0;clear: both;
}

Div内图片填充

div img {width: 100%;height: 360px;border-radius: 20px;
}

a标签的应用及样式：

//锚点：使用a标签，需要转跳的地方设置id，锚点<a href=”#(id)”></a>
//a标签的状态
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择（点击）的链接 */text-decoration:none; //去掉a标签的下划线

图片热点：map必须和img一起使用

<img src="images/map.jpg" usemap="#Map" />
<map id="Map"><area shape="热区形状" coords="热区坐标" href="链接地址" /><area shape="热区形状" coords="热区坐标" href="链接地址" /><area shape="热区形状" coords="热区坐标" href="链接地址" />
</map>

shape：热区的形状，取值：rect（矩形）、circle（圆形）、polygon（多边形）
coords：热区的坐标（位置）

背景颜色渐变：


```css
线性渐变：
background-image: -webkit-linear-gradient( top, yellow, red, );
径向渐变：
background-image: -webkit-radial-gradient( top, yellow, red, pink);
背景颜色是否平铺：
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 20%);或者
background: linear-gradient(red, blue);
或者
background: gradient(linear, 0% 100%, 0% 0%, from(#d9ff00), to(#ff0000));

Padding和margin内外边距：

Padding：是盒子边框和盒子里面内容的间距
Margin：是盒子边框和盒子外面内容的间距

Flex 弹性盒子：

flex：none | <’ flex-grow ‘> <’ flex-shrink >‘? || <’ flex-basis '>
Flex属性：默认高度占满父框高度；
父框需要定义：display：flex /* flex‐direction: row; 默认横向
flex‐wrap: nowrap; 默认不换行*/

（在弹性盒子内在使用弹性盒子，若需要换行是，需要给定初始值：flex: 1 0 calc(100%/n - 1px); n为每行放n个子盒子，此时父框需要：flex-wrap: wrap;换行）
none关键字的计算值为: 0 0 auto
<’ flex-grow '>：剩余空间是正值时,按比例分配剩余的空间

<’ flex-shrink '>：剩余空间是负值时，basis*grow/父框宽度（复杂）

<’ flex-basis '>：宽度初始值，在「flex」属性中该值如果被省略则默认为「0%」
eg:

<div style="display: flex; width: 200px; height:200px; border: 1px solid green;"><div style="flex: 1 1 150px; height:200px; background: blue;"></div><div style="flex: 1 1 150px; height:200px; background: red;"></div></div><hr><div style="display: flex; width: 200px; height:200px; border: 1px solid green;"><div style="flex: 1 1 50px; height:100px; background: blue;"></div><div style="flex: 1 1 150px; height:100px; background: red;"></div></div><hr><div style="display: flex; width: 200px; height:200px; border: 1px solid green;"><div style="flex: 1 1 0; height:200px; background: blue;"></div><div style="flex: 2 1 0; height:200px; background: red;"></div></div>

flex-flow:row nowrap;（flex-flow是合并flex-direction和flex-wrap）

子项在主轴上的（左右）对齐方式 justify-content
子项在交叉轴上的（上下）对齐方式 align-items
多行(或多列)时，行交叉轴上的对齐方式align-content

Flex：设置子容器沿主轴排列：justify-content

<div style="display: flex; justify-content: space-around;  width: 600px; height: 100px; border: 1px solid green;"><!--    父容器设置justify-content: space-around;（空隙在两端）
表示子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半；父容器设置justify-content: space-between：(顶着两端写)
子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切父容器设置justify-content: flex-end;父容器设置justify-content: center;--><div style="width: 80px; height: 50px; background: blue;"></div><div style="width: 80px; height: 50px; background: red;"></div><div style="width: 80px; height: 50px; background: blue;"></div><div style="width: 80px; height: 50px; background: red;"></div><div style="width: 80px; height: 50px; background: blue;"></div><div style="width: 80px; height: 50px; background: red;"></div>
</div>

Column–列的应用：

下面的参数是加给父及的标签
/ 列宽 /
column-width: 300px;
/ 列数 /
column-count: 3;
/ 列和列之间的缝隙 /
column-gap: 50px;
/ 列和列之间的样式 /
column-rule: 10px dotted gray;

文本强制在一行显示

    /* 强制在一行显示 */
white-space: nowrap;/* 超过最小宽度后，超过部分用省略号显示 */
text-overflow: ellipsis;  /* 超过最小宽度后，自动隐藏 */
overflow: hidden;

normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行。
pre-line：与normal值一致，但是会保留文本输入时的换行。
文本在容器内指定显示几行，多余的隐藏：（启用老弹性盒子）

.box1 {width: 400px;border: 1px solid #f00;/* 标签变成弹性盒子 */display: -webkit-box;     //这个是在谷歌浏览器里面写的/* 按照水平方向排列 */-webkit-box-orient: vertical;/* 保留对应的行数 */-webkit-line-clamp: 3;/* 多余的行数隐藏 */overflow: hidden;}

行内块元素在行内垂直方向的微调：

同一行内有多个行内块元素，当调整某个行内块元素的margin-top时，会影响整个行内元素的上外间距。
解决方法之一：把需要调整上外间距的标签浮动起来。浮动的元素调整上外间距是不影响其他元素。
解决方法之二：利用属性vertical-align对元素在垂直方向上下微调；
解决方法之三：父框浮动起来，设置统一的：line-height，这样也可以上下居中

nth-child() :子框内的第一个开始 nth-of-type() ：子框内的同一类的第一个开始

规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2) { background:#ff0000; }
Class=”footer”中第三个p字体颜色
.footer p:nth-child(3) { color: #9c9c9c; }

verflow 属性：

变换 transform属性：

这里不太详细，

ms-transform:功能;/IE9/
-moz-transform:功能;/Firefox/
-webkit-transform:功能;/Safari和chrome/
-o-transform:功能;/Opera/
（一般先写带有前缀的，后写不带前缀的。）
以火狐为例：-moz-transform:rotate(角度);/Firefox/

/* 旋转45度 /
transform:rotate(45deg);
/ x、y轴各放大2倍 /
transform:scale(2,2);
/ 向x、y轴平移50px像素 */
transform:translate(50px,50px);

过渡transition 属性：

1、transition-property 用于指定应用过渡属性的名称，可以指定多个属性名称，多个属性名称之间用, 分隔。默认值为 all 也就是所有的元素都应用过渡效果。
2、transition-duration 用于指定这个过渡的持续时间（单位：s或者ms）
3、transition-delay 用于指定延迟过渡的时间
4、transition-timing-function 用于指定过渡的类型，可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（ease 默认值，先加速后减速；linear 匀速；ease-in 加速；ease-out 减速；ease-in-out 先加速后减速，效果比 ease 感觉强烈一些；cubic-bezier 贝塞尔曲线）
例子链接：transition例子

transition 过渡
过渡动画transition可以组合简写
{ transition:property duration timing-function delay; }

animation动画：

引用动画：

animation: scale2 4s linear infinite;

创建动画：

  @-webkit-keyframes scale2 {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}

1、animation 所有动画属性的简写属性，除了 animation-play-state 属性
2、animation-name 规定 @keyframes 动画的名称
3、animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
4、animation-timing-function 规定动画的速度曲线。默认是 “ease”
5、animation-delay 规定动画何时开始。默认是 0
6、animation-iteration-count 规定动画被播放的次数。默认是 1（infinite: 无限次）
7、animation-play-state：paused|running规定动画正在运行还是暂停，在播放过程中暂停动画
8、animation-fill-mode : none | forwards | backwards | both; 动画在播放之前或之后，其动画效果是否可见

Position定位：

static：（定位还原）对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：（相对定位）一般用作后代的参照物（相对于原位置的左上角定位）不会让出原先的空间；对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：（绝对定位）对象脱离常规流，此时偏移属性参照的是离自身最近的定位（非static值）祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素和同一个参照物的其他定位元素，其margin不与其他任何margin折叠。
fixed：（固定定位，以浏览器窗口为参照物）与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
sticky：（粘性定位）对象在常态时遵循常规流。它就像是relative和fixed的合体。
父元素不能overflow:hidden或者overflow:auto属性；
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位；
父元素的高度不能低于sticky元素的高度；
sticky元素仅在其父元素内生效；
relative、absolute、fixed都需要加上：z-index:0;

特殊字符–字符实体

添加音频标签

每个标签的支持的视频格式不一样，具体属性，去W3Cschool里面查

 <object data="路径" height="200" width="200"></object> //自动播放<embed src="路径" height="200" width="200"><audio src="路径" controls="controls"></audio> //音频<video src="路径" controls="controls"></video> // 视频和音频
<embed src='路径' height='' width=''></embed>

如果你无法看到该视频,那么可能你的电脑不支持该文件格式

Table表格

（1）在表格内更改样式
cellpadding 表格内边距
eg: <table cellpadding="20"></table>
cellspacing 表格td间的间隙这两个是应用在table标签里面的
valign 垂直方向上的对齐方式：top/middle/bottom
align 水平方向上的对齐方式：left/center/right
bgcolor 单元格的背景颜色
colspan 列合并 eg： colspan=＂２＂合并时放在左边，右边的删掉
rowspan 行合并 rowspan=”2” 合并时放在上边，下边的删掉

<caption align= "" ></caption> //这个放在一个tr前面，描述表格信息

（2）在css中更改样式

table {border-collapse: collapse;/* border-collapse  separate/collapse   是否合并边框  */caption-side: bottom;/* caption-side top/bottom          表格标题位置 */empty-cells: hide;/* empty-cells  show/hide           是否显示空单元格 */table-layout: fixed;/* table-layout     auto            列宽由单元格内容决定fixed           列宽由单元格宽度来决定 */}

input表单控件的参数：

注意：radio单选时：label与input同时用，可以与文字捆绑
性别：

<label for="man">男</label><input type="radio" name="sex" id="man">
<label for="woman">女</label><input type="radio" name="sex" id="woman">

checkbox多选时：name=”数组”，name的值必须时一个数组
爱好：

<input type="checkbox" name="hobby[]" value="backetball">篮球
<input type="checkbox" name="hobby[]" value="song">唱歌
<input type="checkbox" name="hobby[]" value="run">跑步

image:(图像按钮，功能和submit一样，提交表单)

多行文本框：

<textarea name="" id="" cols="30" rows="10"></textarea>

input文本框获取光标事件（改变对应的input文本框，outline:0;是去掉自带的线）

/* 获取光标 */
.header-search input:focus {border: 1px solid orangered;outline: 0;
}

input增强的表单控件：

  <!-- 1. 下拉菜单 由两部分组成第一部分是一个input text文本框第二部分datalist 数据列表先把input (list="myname")和 datalist (id='myname')进行绑定name值必须添加在input中2. required 必填3. 正则匹配pattern='[匹配的内容]{匹配的长度}'pattern='[0-9]{3}'pattern='[A-Z]{匹配的长度}'pattern='[a-z]{匹配的长度}'pattern='[A-Za-z0-9]{匹配的长度}'pattern='[A-Za-z0-9]{5,8}'pattern='[A-Za-z0-9]{5,}'4. email 邮箱地址必须有@符号，并且@符号前后必须又值5.  url 网址必须要有http:6. number 只能输入数字step=间隔 min=最小值 max=最大值 value=默认值7. date 日期value ：必须是两位数的月和日，年份是4位数min  2010-12-16max  2050-12-168. time 时间step="1800" 时间的间隔，单位是秒9. color 颜色value 默认的颜色10. range 滑块组件 parseFloat 获取浮点数parseInt  获取整数默认情况下input框中接收到的都是字符串类型
eg: <form action="a.php" method="get" οninput="result.value = parseInt(a.value) + parseInt(b.value)">0<input type="range" id="a" value="0" min="0" max="100" step="5">100 +<input type="number" name="" value="5" id="b"><output name="result" for="a b"></output><input type="submit"></form>11. 取消表单验证写在form标签中  novalidate写在提交按钮中  formnovalidate12. 点击不同的按钮，在同一个页面跳转到不同位置在提交按钮中添加  formaction="a.php"    -->

frameset框架集：

<frameset rows='20%,*,20%'><frame name="" src="" scrolling="yes" /><frame name="" src="" scrolling="no" /><!-- 这里是把第三个在竖着分割成三个 --><frameset cols='20%,*,20%'><frame name="" src="" scrolling="yes" /><frame name="" src="" scrolling="no" /><frame name="" src="" scrolling="no" /></frameset>
</frameset><frameset rows='20%,*,20%'><frame name="" src="" scrolling="yes" /><frame name="" src="" scrolling="no" /><frame name="" src="" scrolling="no" />
</frameset>

noresize        规定无法调整框架的大小
scrolling        yes/no/auto   规定框架是否出现滚动条
rows   行数
cols    列数
跳转到frame指定板块
给对应的frame定义name名字
<frame   name=“right”   src="left.html"/>
修改跳转方式
<a href=“one.html”  target="right">第一页</a>

CSS 外部引入方式：

选择器优先级：

font: 引入指定字体
@font-face {
font-family: maobi;
src: url(./font/段宁毛笔行书.ttf);
}
.jie {
font-family: maobi;
}

光标悬浮上去的样式（cursor属性）：

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。

图标字体的使用

方法一：
1. 阿里巴巴矢量图找到需要的图标 https://www.iconfont.cn
2. 下载代码
3. 引入iconfont.css文件
4. 使用标签添加图标

方法二：
1. 找到需要的图标
2. 添加到项目
3. 复制项目中的css链接
4. 创建i标签，引入对应的class类名

小图标定位用到的网址

http://www.spritecow.com/

隐藏元素的几种方式：

隐藏一个元素，有哪些方式
1. opacity：0 ：元素消失，但是还会占据空间
2. display:none ：元素消失，不占据空间
3. transform: scale(0); ：元素消失，但是还会占据空间
4. visibility:hidden; ：元素消失，但是还会占据空间
5. width：0；overflow：hidden；：元素消失，不占据空间；一般情况下需要配合定位
6. position：absolute; top:-当前元素的高度；left:-当前元素的宽度；

html中css常用知识点相关推荐

Html中CSS常用属性
Html中CSS常用属性一.注释在style标签中注释的书写使用"/* 注释内容 */",而不是. 二.文字属性用于对文字进行修饰的属性 ...
【华为OD机试真题 JAVA】算法中的常用知识点
为大家准备了算法中常用的一些重要知识点 String 字符串 IndexOf():返回指定字符在字符串中第一次出现处的索引,如果此字符串中没有这 ...
ES6中的常用知识点总结
1.let 和 const ES5 只有全局作用域和函数作用域,没有块级作用域,ES6中新增了let命令和const命令用于声明变量,且类似于C+.Java等语言是块级作用域.const声明一个只读的 ...
PHP中一些常用知识点
1.json字符串转json对象 $data='[{"user_id":"93","price":"52.50"},{& ...
HTML及CSS常用知识点复习
一.常用标签及对应的属性 1.标题标签:<h1 title="我是一个标题标签">标题</h1>[不同级标题h1~h6] <body><h ...
微信小程序中css常用属性
目录 ① flex ② display ③ box ④ position ① flex 容器的属性 flex-direction 决定主轴的方向(即项目的排列方向). flex-wrap 默认情况下, ...
dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层头部:header --用于头部主要内容:mai ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
list python 访问键值对_基础|Python常用知识点汇总(中)
字符串字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串.1.创建字符串 str1 = 'Hello World!' str2 = "Hello W ...

html中css常用知识点