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){

}

}