HTML基础
块级元素:
- 独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;
- 包含
p
、div
、ul
、ol
、li
、dl
、dt
、dd
、h1~h6
、form
行内元素:
- 可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!
- 包含
a
、span
、em
、strong
、b
、i
、label
、br
; - padding和margin上下属性设置是无效的,左右是有效的
行内块元素:
- 结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;
img
,input
,textarea
- 除了一行显示跟块级元素一样
各种标签之间的转换
1、块级标签转换为行内标签:display:inline
;
2、行内标签转换为块级标签:display:block
;
3、转换为行内块标签:display:inline-block
;
定位方式
文档流
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:
- relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。
- absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
- fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
- static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性。
- inherit 从父元素继承 position 属性的值。
元素显示隐藏的方式
- display:none/block
- 元素在页面上将彻底消失,不占据位置,也就是说它会导致浏览器的重排和重绘。
- 无法触发其点击事件
- visibility:hidden/visible
- 元素在页面消失后,占据位置,所以它只会导致浏览器重绘而不会重排,
- 适用于那些元素隐藏后不希望页面布局会发生变化的场景;
- 无法触发其点击事件
- opacity:0:
- 可以触发点击事件
BFC
- BFC = Block Formatting context 意思是“块级格式化上下文”;
- BFC的目的就是:形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。
- 触发条件
- float不为none2
- postion不为relative和static
- overflow为auto scroll和hidden
- display的值为inline-block
- BFC可以解决的问题
- 解决浮动元素令父元素高度塌陷的问题:给父元素添加属性overflow:hidden,当然,这只是一种BFC的做法,还可以display: table-cell;或position: fixed;或position: absolute;或者给父元素添加一个高度
- 解决外边距垂直方向重合取最大的问题:为其中一个元素的外边包裹一层父元素,并且触发父元素BFC,比如:overflow:hidden或者可以用padding来代替margin
- 两栏自适应布局:其中box1 float:left,这是box2会在box1下面,(如果文字过多就会形成文字环绕效果),但我就是想要box2在box1的右侧;
清除浮动的方式
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐:添加无意义标签,语义化差)
2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐:触发BFC方式,实现清除浮动)
3.使用after伪元素清除浮动(推荐使用:给父元素添加clearfix类名)
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
盒子水平垂直居中
-
子绝父相定位
html, body { position: relative; overflow: hidden; width: 100%; height: 100%; } .box { position: absolute; background-color: pink; width: 200px; height: 200px; left: 50%; top: 50%; //方法一 margin-left: -100px; margin-top: -100px; //方法二 :无需定义宽高 //transform: translate(-50%, -50%); } .box { //方法二:不考虑宽高,但是必须定义宽高,否则会拉伸为100% position: absolute; background-color: pink; width: 200px; height: 200px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
-
flex布局:父元素设置flex布局
html, body { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; }
-
table布局:父盒子必须固定宽高,不能100%,子元素行内元素
html, body { width: 500px; height: 500px; border: 1px solid red; overflow: hidden; display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }
-
js实现:子绝父相
html, body { position: relative; width: 100%; height: 100%; } .box { position: absolute; width: 100px; height: 100px; border: 1px solid red; } <script> let doc = document.documentElement let W = doc.clientWidth let H = doc.clientHeight //若id为box,则不需要获取,可以直接使用box,省略下面一行 let box = document.querySelector('.box') let width = box.offsetWidth let height = box.offsetHeight box.style.left = (W - width) / 2 + 'px' box.style.top = (H - height) / 2 + 'px' </script>
css盒模型
-
标准盒模型:box-sizing : content-box;
设置的宽度是内容的宽度,不包含padding和border,所以添加padding和border后盒子会变大,引起布局变化,可以设置box-sizing : border-box变成怪异盒模型。包括内容、padding、border
-
flex弹性伸缩盒子模型
给盒子设置display : flex ,这个盒子就变成了弹性伸缩盒子,有主轴和交叉抽。默认横向为主轴,可以使用justify-content来设置子项目在父容器的主轴上排列方式,通过align-items来设置交叉轴上的排列方式;
-
多列布局:pad上做文章布局
几大经典布局
- 浮动:清除浮动
- flex
- 定位
- 移动端响应式布局开发三大方案
- media 媒体查询:适用于PC和移动端使用一套代码,内容相似
- rem 等比缩放:针对移动端,结合flex布局;PC端使用px,还有结合vh/vw,类似于百分比
z-index的工作原理,使用范围
- 文档流
- 定位
css3动画的优化方案
说说你对HTML5的理解
下面哪种方式渲染性能更高
.box a{
...
}
a{
...
}
第二种性能更高。因为css的浏览器渲染机制是选择器从右向左查询。所以第二种只找到所有a标签,,而第一种要先找到所有a标签,然后找到box里的a
H5新增
-
新增语义化标签:
<section></section> 独立内容模块 article (文章) 文章核心部分 aside 侧边栏 header 头部/标题 footer 底部 nav 导航 main元素 表示页面中的主要的内容(ie不兼容) time 时间 <mark> 定义带有记号的文本。默认加黄色背景。 <progress></progress> 进度条
- 不靠css渲染,页面结构仍然清晰;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 有利于SEO;
- 便于开发维护;
-
新增标签video、audio、canvas
-
H5新特性:
-
语义化标签
-
input新增type类型
color 选择颜色
date 选择日期
datetime 选择一个日期(UTC 时间)
datetime-local 选择一个日期和时间 (无时区)
email 用于检测输入的是否为email格式的地址
month 选择月份
number 用于应该包含数值的输入域,可以设定对输入值的限定
range 用于定义一个滑动条,表示范围
search 用于搜索,比如站点搜索或 Google 搜索
tel 输入电话号码
time 选择一个时间
url 输入网址
week 选择周和年表单其他属性
placeholder、autofocus、required、pattern:正则表达式验证,
autocomplete:自动补全,但是有两个前提:
(1)必须成功提交过
(2)加autocomplete的这个元素必须有name属性
-
本地存储sessionStorage、localStorage
==localStorage存储的数据是不能跨浏览器共用的,储存空间5M。==常用于长期登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EW4J2CKe-1618309123758)(C:\Users\87224\AppData\Roaming\Typora\typora-user-images\image-20210324114702798.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZQ6weQu-1618309123760)(C:\Users\87224\AppData\Roaming\Typora\typora-user-images\image-20210324114729884.png)]
-
css3有哪些新特性?
-
实现圆角
border-radius
、阴影box-shadow
、border-image
、background-size、background-origin、background-clip; -
对文字加特效
text-shadow
、线性渐变gradient
、 -
transform(转换)
- 旋转 rotate(9deg)
- 缩放 scale(0.85,0.9)
- 定位 translate(0px,-30px)
- 倾斜 skew(-9deg、0deg)
-
animation(动画)
@keyframes 动画名称 { 动画过程,可以添加任意百分比处的动画细节 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } div { animation:动画名称 过渡时间 速度曲线 动画次数 延时时间; } div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; } @keyframes mymove { from {left:0px;} to {left:200px;} }
-
transition(过渡): 过渡的属性 过渡时间 运动曲线 延时时间
div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; }
-
伪类选择器和属性选择器:
-
ul li:nth-child(n){} li:first-child li:last-child
-
:nth-of-type(n) :first-of-type :last-of-type
选择器 介绍 e::before 在e元素内部的前面插入一个元素 e::after 在e元素内部的后面插入一个元素 e::first-letter 选择到e容器内的第一个字母 e::first-line 选择到e容器内的第一行文本 -
属性选择器 input[checked=“true”]
-
-
word-wrap:自动换行 p {word-wrap:break-word;}
css权重
1、!important
,加在样式属性值后,权重值为 10000
2、内联样式,如:style=""
,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
给元素设置宽度,px和em,rem的区别?
1、px是相对长度单位,相对于显示器屏幕分辨率而言的。
优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。
2、em是相对长度单位,相对于父元素的font-size来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
优缺点:em的值并不是固定的,它会继承父级元素的字体大小。
3、rem是CSS3新增的一个相对单位,是相对HTML根元素的font-size。
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
给元素设置宽度,%相对的是什么元素?
- 父元素没有定位,子元素不定位或相对定位情况都是相对的父元素宽高;若子元素绝对定位,则相对浏览器的宽高
- 若父元素有定位(无论哪种),子元素(无论是否定位)都是相对父元素宽高
元素的阴影效果
/* 内阴影 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow:inset 2px 2px 2px 1px red;
实现动画的方式
-
animation(动画)
@keyframes 动画名称 { 动画过程,可以添加任意百分比处的动画细节 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } div { animation:动画名称 过渡时间 速度曲线 动画次数 延时时间; } div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; } @keyframes mymove { from {left:0px;} to {left:200px;} }
-
transition(过渡): 过渡的属性 过渡时间 运动曲线 延时时间
div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; }
弹性布局flex以及其常用的属性
左右布局,左边固定宽度,右边自适应,为防止右边文字过长压缩左边布局,
左边添加flex:none,右边添加flex:1; 原因就是因为flex不设置none默认为flex:0,1,auto
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
容器的属性
- 主轴方向:flex-direction: row | row-reverse | column | column-reverse;
- 是否换行:flex-wrap: nowrap | wrap | wrap-reverse;
- flex-flow : ;
- 主轴上对齐方式: justify-content: flex-start | flex-end | center | space-between | space-around;
- 交叉轴上对齐方式:align-items: flex-start | flex-end | center | baseline | stretch;
- align-content
项目属性
-
order 项目的排列顺序。数值越小,排列越靠前,默认为0。
-
flex-grow 项目的放大比例,默认为0
-
flex-shrink 项目的缩小比例,默认为1
-
flex-basis 在分配多余空间之前,项目占据的主轴空间
-
flex :flex-grow, flex-shrink 和 flex-basis的简写
-
align-self 单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,
align-self: auto | flex-start | flex-end | center | baseline | stretch;
grid布局,以及它与flex布局,table的差异
grid布局
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
行和列、 单元格、网格线
容器属性
.container {
display: grid; //网格布局
grid-template-columns: 100px 100px 100px; //每列宽度 (可使用%)
grid-template-rows: 100px 100px 100px; //每行高度 (可使用%)
grid-auto-rows: 50px; 浏览器自动创建的多余网格的列宽和行高
//grid-template-columns: repeat(2, 100px 20px 80px)|| repeat(3, 33.33%);; 重复6列或3列
//grid-template-columns: repeat(auto-fill, 100px); //容器的大小不确定时,每列为100px自动填充最多列
//grid-template-columns: 1fr 1fr; 第一列的宽度是第二列的两倍
//grid-template-columns: 1fr 1fr minmax(100px, 1fr); 列宽不小于100px,不大于1fr
//grid-template-columns: 100px auto 100px; 第二列占据剩余宽度
//grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; []内可以指定每条网格线的名称
grid-row-gap: 20px; //行间距
grid-column-gap: 20px; //列间距
grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap可写成gap,若只有一个值,默认行列间距一样
grid-auto-flow: column; //项目先列后行排列
justify-items: start | end | center | stretch; //项目在单元格的水平位置
align-items: start | end | center | stretch; //项目在单元格的纵向位置
place-items: <align-items> <justify-items>; 一个值默认相等
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个内容区域在容器里面的水平位置
align-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个内容区域在容器里面的垂直位置
grid-template-areas: 'a a a' 将其定名为a到i的九个区域,分别对应这九个单元格
'b b b'
'c c c';
}
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
项目属性
.item-1 {
grid-column-start: 2; 左边框所在的垂直网格线
grid-column-end: 4; 右边框所在的垂直网格线
grid-row-start属性:上边框所在的水平网格线
grid-row-end属性:下边框所在的水平网格线
grid-column-start: header-start; 还可以指定为网格线的名字
grid-column-end: header-end; 还可以指定为网格线的名字
grid-column-start: span 2; 左右边框(上下边框)之间跨越多少个网格
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
grid-area: e; 指定项目放在哪一个区域
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;
}
- Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
- Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
canvas的width height属性与它style中的width,height有什么区别
canvas具有两个行内的属性:width与height属性,是用来定义容器和画板的宽高的,默认都为300*150,
css样式只能定义容器的宽高,而画板默认还是300*150