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){
}
}
html css笔记zht的更多相关文章
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
- HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...
- HTML+CSS笔记 CSS进阶续集
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- HTML+CSS笔记 CSS进阶
文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
随机推荐
- 使用免费 mongodb数据库 + 免费node.js服务器搭建小程序接口
由于微信的小程序只支持不带端口的域名接口,不支持IP地址和接口,所以我们需要映射到80端口并绑定备案过的域名才能被微信小程序访问到.简单点就是接口需要 https 协议才行,找了许久的免费的数据库与n ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- ORA-02266错误的批量生成脚本解决方案
ORA-02266: unique/primary keys in table referenced by enabled foreign keys这篇博客是很早之前总结的一篇文章,最近导数时使用TR ...
- HDU 6152 - Friend-Graph
Friend-Graph Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 使用Navicat快速生成MySQL数据字典
1.通过information_schema.COLUMNS表 查询该表可得到所需字段信息 SELECT * FROM information_schema.COLUMNS; 如下图所示: 2.示例 ...
- VS2017打开低版本的VS MVC架构的项目的时候需要修改的地方
1.需要修改的是.sln文件,即将里面的 Version改为12,其中的VS的版本改为2017 2.项目中后缀名为 .csproj中的代码改一下:
- Wonder 1.0正式版发布-----WebGL 3D引擎和编辑器
介绍 我们很荣幸地向大家发布Wonder 1.0正式版!免费.开源,不用注册,直接打开在线编辑器即可使用! Wonder是web端3D开发的解决方案,包括引擎.编辑器,致力于打造开放.分享.互助的生态 ...
- 二、PHP基本语法 - PHP零基础快速入门
我们日常生活中,有些人使用普通话交流,有些人使用家乡话.类比到计算机的世界里,PHP 是人与计算机沟通的语言之一. 既然是语言,那就必须遵循一定的语法规则.譬如 A 向 B 表白,A 会对 B 说:& ...
- Mysql 中的日期时间字符串查询
一.将数据库中的Date格式的数据,或者指定日期的字符串格式化为想要的样式 DATE_FORMAT (date, format)能根据格式串format 格式化日期或日期和时间值date,返回结果字符 ...
- VS + QT 出现 LNK2001 无法解析的外部符号 QMetaObject 的问题
在一个QT项目中新建一个带QObject定义的类后 (不是继承),可能会出现LNK2001 的错误,这是由于IDE没有自动为新建的类生成 moc_XXXX.cpp 文件导致的. 一种做法是手动生成mo ...