html css笔记zht
第3章
Img标签 路径问题
绝对路径：从盘符（C:\）出发的路径 （C:\Users\......） linux(绝对路径以 / 开头)
相对路径：（ ./ 当前文件所在的目录）（ ../上一级目录）
前端三层：
html 结构层
css 表现层
js 行为层
样式
1.行内样式(不推荐) <div style="">行内样式</div>
2.内部样式（head里的style）
标签选择器：div{ }
id选择器( # ): id值一定要保证唯一性
命名规范：
1. 不能是数字开头
2. 通常只能使用字母，数字，减号的组合
3. 不推荐直接写一个字母
4. 全部小写
5. 有语义化
class选择器( . )：可以重复出现
3.外部样式
第4章
border用法
border:2px solid #f60;
border：大小 状态 颜色
边框状态 ：solid(实线) dashed（虚线）dotted(点线)
例：
/* border-top-width:20px;边框大小*/
/* border-bottom-style:solid;
border-top-style:double;
border-right-style:dashed;
border-left-style:dotted; 边框状态*/
/*border-top-color:green;边框颜色 transparent:透明色*/
/* border-left:none;去掉边框 */
内联和块级
<!--块级标签默认占一行 （跟宽高没有关系）-->
例： div,p,h1………
<!-- 内联标签 不能设置宽高 （宽高无效）-->
例：a, span, img
<!-- 标签嵌套：
注意：
1.内联标签不能嵌套块级标签（a标签除外）
2.块级标签可以嵌套任意标签（p标签不能嵌套块级标签 若p标签里嵌套了块级标签，则p标签会被分成三部分）
-->
第5章
margin
<!--margin 不会撑大盒子 而padding会
垂直方向的margin会重合，水平方向不会重合
margin:10px 10px 10px 10px（上 右 下 左）
margin:10px 10px 10px(上 左右 下)
margin:10px 10px (上下 左右)-->
<!--解决margin合并(只能解决嵌套，不能解决兄弟级)：
1.给父级元素顶部加边框(border-top)
2.加padding-top
-->
<!--解决兄弟级margin合并：
1.两个标签之间添加一个标签（标签最好加一个边框）
-->
第6章
怪异盒模型
盒子模型，标签容器（盒子）
标准盒模型 怪异盒模型 弹性盒模型
规定背景颜色从哪里开始绘制background-clip：（border-box padding-box content-box）
开启怪异盒模型 box-sizing:border-box;
怪异盒模型下：border和padding是在盒子内部绘制（所以这种情况下padding不会撑大盒子
1.盒模型是指什么？
本质是浏览器解析标签的规则
2.盒模型有几种？
3种 标准盒模型 怪异盒模型 弹性盒模型
3.浏览器默认盒模型是什么类型？
标准盒模型
4.盒模型之间的差异？
标准盒模型 ：盒子所占空间（宽度=width + padding（左右） + border（左右））
怪异盒模型 : 盒子所占空间（宽度=width(border-box)）
浏览器解析规则不一样，怪异盒模型里，width的值是border-box区域，而标准盒模型里，width只是content-box区域，padding和border在content-box之外绘制的，会撑大盒子
5.为什么边框为非实线时，会有背景色？
背景色默认绘制区域是border-box
6.如何让padding区域不被背景色渗透？
background-clip:content-box;
第7章
background
background复合属性写法 (position和size之间不能用空格隔开，要用 / )
background: color(有image可不写color) image repeat position / size
display
display:决定内联，块级
内联标签：display:inline 不支持上下的margin，宽高
块级标签：display:block 高度默认为0，宽度默认为100%
display:inline-block 内联块级 既支持宽高，有可以并排显示
display:none 隐藏
text-align:center 是控制内联（内联块级）标签对齐的
第8章
文本
英文字母大小写(大写 uppercase 小写 lowercase 首字母大小 capitalize)*/
text-transform:lowercase;
/* text-align:left right center; 对齐方式 */
/*缩进 1em相对于一个font-size的大小*/
text-indent:30px;
/*下划线 underline，上划线 overline，贯穿线 line-through*/
text-decoration:line-through;
/*文本间距*/
letter-spacing:5px;
/*字母间距*/
word-spacing:10px;
/*文本换行方式
normal
nowrap 不换行
pre 不换行，但空格保留
pre-wrap 换行，保留空格
white-space:normal (默认为normal)
*/
/* 强制换行
word-break:break-all; */
文本超出显示省略号：
/*超出隐藏*/
overflow:hidden;
/*文本超出，显示省略号*/
white-space:nowrap;
/*定义文本溢出处理方法*/
text-overflow:ellipsis;
第9章
【a+b】紧跟在a之后的第一个b元素
#box .a1 + p{
color:red;
} */
[a~b]紧跟在a之后的所有同级b元素
#box .a1~a{
color:red;
}
第10章
a标签的伪类
/*没被点击*/
:link{
color:red;
}
/*被点击过*/
:visited{
color:green;
}
/*正在点击，但是没有完成点击*/
:active{
color:skyblue;
}
阴影
盒子阴影(可以有多组) 盒子外部模糊
水平 垂直 模糊半径 颜色
box-shadow:-10px -10px 10px #cc99ff,10px 10px 10px red;
盒子内部模糊
box-shadow:10px 10px 10px red inset;
第11章
浮动
浮动：左浮动 右浮动
浮动会导致元素脱离文档流
浮动属性会改变标签的display值为block,但不支持margin:auto
当子元素浮动，会导致父元素塌陷
如何解决元素浮动会，父元素高度塌陷？
1.给父元素加浮动（有局限性）
2.给父元素加overflow:hidden; 因为开启BFC特性
3.给一个空标签，空标签给clear:both;
第13章
定位
定位 position
absolute 绝对定位 不以自己为参照目标的定位(以他人为参照目标 不能是窗口)
绝对定位如果没有参照目标，则默认参照body(当前看到的部分)
fixed 固定定位 以窗口作为参照目标
relative 相对定位 以自己移动之前的位置作为参照目标的定位
绝对定位和固定定位会脱离文档流
相对定位不会脱离文档流，并且实际站位还是原来的位置
第14章
表单
<form action="后台接收数据的入口地址" method="post"></form>
<!-- input输入框（autofocus 自动聚焦）
outline:red dotted 2px; input边框
<input type="text" value="初始内容" autofocus>
<input type="button" value="确定">
<input type="checkbox"> 复选框
<input type="radio"> 单选按钮
<input type="file">
<input type="password">
<input type="submit"> -->
<!-- 文本域(一般禁止缩放 resize:none;)
<textarea name="" id="" cols="30" rows="10"></textarea> -->
<!-- 下拉选择框(selected 默认选择)
<select name="" id="">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="1">3</option>
</select> -->
label标签关联input,使点击文字可选中多选框
第16章
iframe
iframe
加载很慢
安全性问题 减少使用
内联框架 能够横排使用
frameborder 框架边框 0 没有 1 有
scrolling yes 出现滚动条 no 没有滚动条 auto 根据内容决定是否出现滚动条
表格
table表格元素
thead 定义表格头
tbody 定义表格身体
tfoot 定义表格尾部
tr 定义单元行
th 定义标题单元格
td 定义普通单元格
table样式 border-spacing:0;边框线间隔
border-collapse:separate;(折叠)（collapse不折叠）
colspan="4";跨列 算上自己
rowsapn="3";跨行 将挤压出去的元素删掉
表格特性
table特性
1.独占一行
2.不给宽高的时候。是由内容撑开的
3.支持margin,padding，但不建议使用padding
1.tbody里面的单元格 默认根据内容的百分比平分table的宽高
2.行 列宽度高度 取决于行列中最高最宽的单元格
3.th 内容左右上下居中
4.td 内容向上下居中 左对齐
5.td固定宽度时 完全等分table宽度
6.td 不支持margin padding效果比较奇怪
table到td之间不能嵌套其他元素
td th里面能放任意元素
thead tbody tfoot可不写 浏览器会自动添加tbody
第17章
过渡
transition（过渡属性，过渡时间 延迟时间 速率）
transition-property 过渡属性
all 所有变化属性
transition-duration 过渡时间
s ms
transition-delay 过渡的延时时间
s ms
transition-timing-function 过渡速率
ease 慢快慢
ease-in 慢入
ease-out 慢出
ease-in-out 慢入慢出
linear 匀速
display:none不支持过渡
opacity 占着位置，鼠标可以触碰到
visibility 决定元素可不可见 占着位置，但鼠标触碰不到
visible 可见的
hidden 不可见得
定位值改变的时候一定要设置初始值 因为默认值是auto
动画
animation（name 持续时间 速率 延迟 执行次数 正反向运动 动画状态 结束时间动画状态）
animation-name 动画名称 见名知意
animation-duration 动画时间
animation-delay 动画延时时间
animation-timing-function 动画速率
animation-iteration-count 动画执行次数
infinite 无限次
123456789
animation-direction 动画方向
normal 默认
reverse 反向
alternate 先正向 再反向
alternate-reverse 先反向 再正向
animation-fill-mode 动画的起始结束帧位置
默认 none 原始状态 =》动画开始=》动画结束
forwards 原始状态=》动画开始=》动画帧100%
backwards 动画帧0=》动画开始=》原始状态
both 动画帧0=》动画开始=》动画帧100%
animation-play-state 决定动画运行或暂停
running 运行
paused 暂停
变化
3D视角必须设置在父辈身上 视角 一般为500或800 perspective:500 -->
transform:;变化
transform-origin: ;旋转的基点 不要写在hover里
50% 50%
50px 50px
center
left
right
bottom
top
translate(x,y)位移 占着原来的位置 translate(x)一个值就代表x的值
translateX()
translateY()
rotate()旋转 占着原来的位置 支持负值 （（默认沿Z轴旋转）
turn 圈
deg 度数
rad 弧度
grad 梯度
skew(x,y)倾斜
deg
scale()缩放
0~1 缩小 0是没有 1是正常大小
1~正无穷大 放大
在不知道高度的情况下，绝对居中的方法
.first{
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
第18章
伪元素
div元素 伪元素
伪元素 必须依赖于某一个标签才能产生 （content:""必须写 内容写在content中）
若要启动则必须使用content:””
content:url(图片路径)
content:attr() 获取属性的内容
before after 内联元素 不支持宽高
before 在 内容 前面出来 必须写两个冒号 div::before
after 在 内容 后面出来 必须写两个冒号
借助伪元素清除浮动
清除浮动
给高度塌陷的元素加
.clearfix::after{
content:"";
display:block;
clear:both;
}
第19章
渐变
渐变色要设置在background-image上
渐变色方向 to right/left/top/bottom/bottom right（先写垂直方向的，在写水平方向）
background-image:linear-gradient(to right,red,blue);
第25章
弹性布局
当盒子设置为弹性容器后，子元素float,clear,vertical-align这些属性都会失效
弹性容器:display:flex; 文字不能被压缩
flex-direction 制定弹性容器里的项目的排列方向
row 默认主轴(从左到右)
row-reverse 与主轴相反的方向（从右到左）
column 沿交叉轴排列（从上到下）
column-reverse 与交叉轴相反的方向（从下到上）
flex-wrap: 规定项目在容器里的换行行为
nowrap 不换行
wrap 换行
wrap-reverse
flex-flow 这是上面两个属性的简写形式(先写方向，再写换行)
justify-content 定义了项目在容器的主轴上的对齐方式
flex-start
flex-end
center
space-around
space-between
align-items 定义了项目在容器的交叉轴上的对齐方式
stretch 默认值
flex-start
flex-end
center
baseline
align-content 定义了多跟轴线的对齐方式
flex-start
flex-end
center
stretch 铺满
space-around
space-between
*/
/*
项目:
order 设定项目的排序
值越小越靠前 默认都是order:0; 整数
flex-grow 定义项目的放大比例
所有有放大比例的属性按放大比例平分剩余的空间
flex-shrink 定义项目的缩小比例
flex-basis 定义项目对空间的分配行为，项目的实际大小（跟width不同，width会受到缩放比例的影响）
flex 上面三条flex前缀属性的简写
align-self 允许某个项目与其他项目有不一样的对齐方式
决定的是另一根轴
*/
第27章
响应式
max-width:800px 宽度范围是0-800
min-width:500px 宽度范围是500-无穷
可以同时使用，限定宽度范围
@media 媒体查询 根据屏幕宽度不同设置不同属性
如果要用极小值都用极小值，如果要用极大值都用极大值
如果都是极小值（min-width），最小的放在最前面，否则不生效
如果都是极大值(max-width)，最大的放在最前面，否则不生效
css中
x>=1200
@media screen and (min-width:1200px)
800<=x<=1199
@media screen and (min-width:800px)
X<=799
@media screen and (min-width:300px)
less中
@media screen{
@media(min-width:1200px){
}
@media(min-width:1200px){
}
}
