html5

最新推荐文章于 2022-11-20 20:44:39 发布

maozhuofan

最新推荐文章于 2022-11-20 20:44:39 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/maozhuofan/article/details/87166341

版权

34集（z-index）
relative,absulute,fixed可以使用z-index,static不可以使用
opacity:0。透明
display常见属性值：
1.none：隐藏对象，完全消失于文档流。
2.inline：指定对象为内联元素。
3.block：指定对象为块元素
4.inline-block：指定对象为内联块元素（行内块元素）
5.table-cell：指定对象作为表格单元格
div{display: table-cell;vertical-align: middle;}指定为单元格，居中，避免改变行高的麻烦（line-height）
CSS选择器优先级
style=1000
id=100
class=10
element=1
ID>CLASS>*
important>内联>id>类>标签|伪类|属性选择器>伪元素>继承>通配符

35集-盒子模型
盒子模型主要定义了四个区域：
内容（content）
内边距（padding）
边框（border）
外边距（margin）。

这是一个盒子模型

h2{width: 300px;height:40px;padding: 30px;margin: 30px;border: solid 2px cornflowerblue}

更标准的盒子模型

书写内边距和外边距的规范（TRBL永远是这个规范）
如果有四个参数，上右下左（TRBL）
如果有三个参数，表示缺少的是左，与右（第二个相等）
如果有两个参数，表示缺少的是下左。与上右相等。（第一个是上下，第二个是左右。）
如果只有一个参数，表示上右下左为统一参数

背景会占据padding。
给行内元素加顶部和底部的内边距是不起作用的。加display:block
只对块元素起作用。

37集
border边框
border属性设置一个元素的边框
border：1px solid red;
边框可以设置的样式：
点状dotted
实线solid
双线double
虚线dashed
无边框none
常见灰色：#818181/#ddd

38集
块元素垂直相邻外边距会合并，以数值大的为准
行内元素实际上不占用上下边距。行内元素的左右外边距不合并
浮动元素的外边距也不会合并
允许指定负的外边距值，使用时要小心

四十集
outline: none避免搜索框变色

四十二集
伸缩盒模型最老版本 display:box
伸缩盒过渡版本 display:flexbox;
伸缩盒最新版本：display：flex;

根据浏览器内核的不同，css的前缀也会有不同
Gecko内核前缀为-moz- 火狐浏览器
Webkit内核前缀为-webkit-，也叫谷歌内核，360浏览器，世界之窗，猎豹
Trident内核前缀为-ms- 也叫IE内核
Presto内核 -o- 目前只有Opera使用

三种清除浮动的方式
使用伪元素进行清除
.clear::after{content: “”;display: block;clear: both}
使用overflow:hidden进行清除
使用空div
.clear{clear: both}

css中的继承
能继承的常用属性
color,
cursor,(鼠标变成手的形状)
font-family,font-size,font-style,font-weight,font,
letter-spacing（字间距）,line-height,list-style,text-align,text-indent

44.CSS3圆角，阴影，字体
border-radius:10px 10px 5px 0px;
box-shadow:10px 10px 20px black(水平垂直模糊颜色)
text-shadow:
文本效果
字体下载：字体大宝库

transition 过渡。
允许CSS的属性值在一定时间内平滑地过渡
transition：属性名时间速度曲线(等待) 何时开始
transition：width 2s ease-in 2s;

Transform 2D最常用到的函数是rotate()
transform:rotate(30deg) 通过rotate方法，元素顺时针旋转给定的角度。允许赋值，元素将逆时针旋转。deg为度数。配合transition:2s;一起使用

Transform3D常用的函数有：rotateX()、rotateY()、translate3d()
rotateX()、元素绕其X轴以给定的度数进行翻转
rotateY()、元素绕其Y轴以给定的度数进行翻转
translate3d(x,y,z)此函数用来规定指定元素在三维空间中的位移

overflow：hidden

动画Animation
keyframs定义动画
animation引用动画

百分比对应着时间段，可以定义多段
或者from{}
to{}
animation:3s linear infinite CDturn (一次的时间匀速无限循环动画名称 )

特殊图形
三角形
通过Border定义，宽度和高度设置为0，另外两面的颜色要设置为透明
梯形
通过border定义，要设置宽度
圆形
宽度高度一致，border-radius设置为一半。

56切图
.wzgg .phone{float:right;}
.wzgg p:not(.phone){float:left}
浮动说明：class=.phone浮动向右。p标签下除了.phone以外的元素向左浮动。

background：linear-gradient(to bottom:#fefefe,#dedeef,#gwdcef) 线性渐变
background：radial-gradient()

overflow-y scroll;添加y轴滚动条

58集
box-sizing属性
两个值
content-box（标准盒模型）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型*

border-box（怪异盒模型）
padding和border被包含在定义的width和height内，元素实际大小定义了多宽就是多宽，此为怪异盒模型下的盒模型。

column-count分几列
column-gap 列间距
column-rule 列分割线样式

resize:both;
oerflow:auto;
一起配合使用

Javascript
substring()方法回忽略负数，直接作0来处理，而slice（）方法用字符串长度加上负数计算
var msg=“happy”; //字符串长度为5
var result1 = msg.substring(1,-1); //返回h
var result2 = msg.slice(1,-1); //返回app (1,4) 包括前面的数字，但是不包括后面的数字

八进制以0开头，十六进制以0x开头

isNaN(),当检测的数据无法正确转换成Number类型时返回值为真(ture)，其他类型返回为假（false）

var x1 = “red”
var result1 = isNaN(x1); //返回值为真；

var x2 = “999”
var result2 = isNaN(x2); //返回值为假

59
meta标签的常见属性
http-equiv属性

网页跳转如果只写写时间，不写url，则只刷新本页面。

name属性
提供了名值对中的名称
name的常见值有

author 定义了该页面的作者加content=“”
keywords 定义了html的文档关键字，加content=“”
description，用于描述文档加content=“”

@media screen and (max-width: 1900px){
body{background: red}
}

60，61媒体查询实例

62
字体图标
http://www.iconfont.cn/
引用顺序：demo中寻找字符，样式表在上，class在下。顺序引用，谁在下面引用谁的。

63
雪碧图
{background-position：}
通过整合图片，减少对服务器的请求数量，从而加快页面的加载速度

Sprite
可以减少网页的请求，提高性能。
减少文件大小
解决命名的困扰，只需要对一张图片命名。
cssSprite.exe

display

表格没有ul加载的快

bootstrap

68
Bootstrap
实现内联子标题加small标签或者加.small
引导主题副本（文章摘要）加.lead
对齐 .text-left (左);.text-center(中);text-right(右)
.text-muted 文字以浅灰色显示
.text-warning 警告橙灰色
.text-danger 错误提示红色
.text-info 这只是信息浅蓝色
.text-success 强调正确的信息浅绿色

表格
.table基础样式，padding 水平线
.table-striped 斑马线
.table-border 边框
.table-hover 鼠标滑过样式
.table-condensed 紧凑型表格

label标签

.active 激活效果

图片圆形
图片双线
图片圆角