HTML / CSS 基础知识

超超小淘气
373 阅读11分钟

简述doctype的作用

  1. 他起声明作用
  2. 它用来告诉浏览器用哪种规范来解析改种文档
  3. 决定浏览器渲染方式

常用浏览器及其内核

  1. Chrome 内核:bink -webkit-
  2. Safari 内核:webkit
  3. Firefox 内核 gecko -moz-
  4. IE 内核:Trident -ms-
  5. Opera 内核 Bink -o-

常见块标签和行内标签有哪些,有什么区别?

  • 块标签
  1. H1~H6
  2. dl dt dd
  3. ul ol li
  4. div p
    • 块元素单独占一行,可以设置宽高,可以设置margin值,padding值
    • 块元素可以包含内联,内联块元素
    • p标签比较特殊,p标签不可以包含p标签和块元素
  • 行内标签
  1. span
  2. i em
  3. b strong
  4. br hr
  5. a
    • 被内容包裹,可以和元素在同一行显示,不可以设置宽高,不可以设置上下margin和padding
    • 行内标签不可以包含标签
    • a标签比较特殊,a标签是超链接,他可以包含其他标签

b标签和strong标签,I和em的区别

  1. b和strong标签都是设置元素加粗作用,但是strong有强调作用,b标签没有
  2. i和em都是设置元素倾斜的作用,但是em有强调作用,i标签没有
  3. 强调作用对SEO(搜索引擎优化有很多好处)

src和href的区别?

src用于替代当前元素,href用于在当前文档引用资源之间确立关系

  • 当浏览器解析到src时会暂停其他资源下载和处理,直到该资源加载完成,编译执行完毕,图片,框架都是如此,好比把所指的资源嵌入当前标签内
  • href会识别改文件并行下载资源,不会停止对其他文档的处理

你对语义化的理解

他主要在页面上使用合适的标签和标签特有的属性来格式化界面

  • 在没有css的情况下也可以更好的体现代码的结构性
  • 增强代码的可读性,更有助于团队的维护和开发
  • 对用户体验有更大好处,对SEO有很大好处

如何合并表格单元格

  • colspan :
    • 跨列合并,合并行(最左侧单元格加这个属性)
    • 参数是数字,写数字几合并几列
  • rowspan:
    • 跨列合并,合并列(最上面的单元格加这个属性)

thead tbody tfoot 什么作用

  • thead:表示表头
  • tbody:表示主体
  • tfoot:表示脚注
主要作用是增强代码的可读性,增强代码的语义化

常见表单元素有哪些?

  1. form:表单---参数 action = "提交位置"|method="提交方式"
  2. text 文本框
  3. password 密码框
  4. reset 重置按钮
  5. submit 提交按钮
  6. checkbox 复选框
  7. radio 单选按钮
  8. select--option 下拉菜单
  9. file 文件
  10. textarea 文本域
  11. button 按钮
HTML5新增表单
  1. url :输入地址,从http开始,移动端会弹出.com的键盘
  2. search:用于搜索框使用,自带全部删除
  3. tel:电话号码文本域
  4. number:用于包含数值的输入域(min 最小值,max最大值,value初始值,step步长)
  5. range:用户输入包含一定范围数字值的输入域
  6. color:颜色
  7. date:日期
  8. time:事件

css属性那些可以继承?

  1. font-size:字号
  2. font-weight:是否加粗
  3. font-style: 是否倾斜
  4. font-family:字体样式
  5. color:颜色
  6. text-align:文字对齐方式
  7. text-indent:首行缩进
  8. line-height:行高
  9. letter-spacing:字间距
  10. word-spacing:词间距

简述css盒模型

盒模型本意上就是一个盒子来封装周围的HTML标签,这些标签包含了margin,border,padding,content

  • 盒模型的宽高就是由上下左右的margin值加border值加padding值加内容才是真正盒模型的高度
  • 怪异盒模型是由上下左右的margin加内容构成的,其中内边距和边框都属于内容的宽高

box-sizing语法：

box-sizing:content-box || border-box || inherit; 当设置为box-sizing:border-box时，将采用怪异模式解析计算；

如何实现border实现三角形

写一个小盒子,宽高设置为0 ,给盒子加三个边的边框,将两边设置为transparent透明

  • 实例代码:
div{
    width:0;
    heihhr:0;
    border-width:200px 200px 0 200px;
    border-style:solid;
    border-color:red transpanent transpanent transpanent

浮动产生的问题以及解决办法

在父元素由子元素撑开时,设置浮动以后脱离文档流不占位,由于父元素没有了支撑,高度会损失,原本的样式会被打乱

解决办法
  1. 给父元素添加高度
  2. 设置overflow:hidden
  3. 在盒子最后添加一个空盒子设置clear:both
  4. 设置一个类:
clearfox:after{
    content:"";
    display:block;
    clear:both
}
  1. 给父元素也设置浮动

如何让盒子垂直水平居中

  • 当大盒子和小盒子宽高都已知的时候:使用margin和padding,定位都可以使其居中
  • 当大盒子未知,小盒子已知的时候,设置:给小盒子设置绝对定位,大盒子设置相对定位
    • left:50%top:50%;margin-top:负的小盒子高度,margin-left:负的小盒子宽度
  • 当大盒子和小盒子都未知时:给小盒子设置绝对定位,大盒子设置相对定位
    • left,right,top,bottom全都设为0,margin也设为0

margin问题及解决办法

  • 给上下两兄弟元素设置margin,两个margin相遇是会重合,只保留较大的边距
解决办法
  1. 生成BFC区域
  2. 只设置一个margin值
  • 给大盒子的第一个子元素设置margin-top的时候,大盒子会随小盒子一起向下移动
解决办法
  1. 给大盒子加边框
  2. 设置padding值

BFC规则以及解决的问题

BFC 规则:
  • 内部的标签会一个接一个的放置
  • 垂直方向上的距离有margin决定，属于同一个BFC的两个相邻的标签的margin值会发生重叠
  • 每个标签的左外边距与包含块的左外边界相接触，（从左向右），即使浮动也是如此
  • BFC区域不会与false的标签区域重叠
  • 计算BFC区域的时候浮动元素也参与计算
  • BFC就是页面上一个隔离的独立容器，容器里面的元素不会影响外面的元素，反之亦然
BFC解决的问题
- margin值重合
- 自适应两栏或三栏布局
- 文字环绕
- 清除浮动
如何生成BFC
  • 根元素
  • 浮动
  • overflow
  • display：inline-block
  • position：absolute，fixed

图片间隙如何解决问题

  • 给图片转块
  • 设置vertical-align：top、middle、bottom
  • 把font-size跟line-height设置为0

等高布局 双飞翼布局 圣杯布局的实现原理

圣杯布局
  • 设置三个盒子，第一个盒子设置为宽度100%，设置浮动。给后面两个盒子设置相对定位，第一个盒子左移100%，第二个盒子左移自己的宽度
  • 给第一个盒子设置padding值，左边的值为左边的盒子右边的值为右边的盒子
双飞翼布局
  • 设置三个盒子，第一个盒子设置为宽度100%，设置浮动。给后面两个盒子设置相对定位，第一个盒子左移100%，第二个盒子左移自己的宽度
  • 在第一个盒子里面加一个子元素，给子元素设置margin或者padding 左边值等于左边的盒子，右边值等于右边的盒子
等高布局
  • 设置三个嵌套的盒子，宽度值都为100%,设置浮动
  • 给父亲盒子设置绝对定位左移动30%、给子元素设置绝对定位左移40%
  • 在子元素里添加三个子元素，宽度100%，浮动
  • 设置绝对定位，右移，第一个覆盖爷爷元素，第二个覆盖爸爸，第三个覆盖儿子
  • 因为儿子元素里面三个元素设置了浮动，所以不能忘记清除浮动

css实现小箭头

写一个盒子将其宽高设置为0，给盒子加三个边的边框，将其两边设置为透明 在写一个其兄弟元素，设置一个同样的三角形，将背景颜色设置为跟父元素一样的颜色，设置定位，将第一个三角覆盖，左移一点漏出的形状便是小箭头

常见浏览器兼容问题

  1. 在IE6及以下版本会出现小高度的问题（小于最小宽度按最小宽度处理）
    • 给元素设置font-size：0；line-height：0；overflow：hidden；
  2. 在IE6及以下版本，给这个元素设置浮动和左外边距，最左边的元素会出现双倍边距
    • 给这个元素设置_display:inline
  3. 在IE7及以下版本，给块转内联块，不在同一行显示
    • 给元素设置*display_inline:*zoom
    • “*” 代表只有IE7认识
    • zoom 处理兼容
  4. 在IE6和7里面，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏失败
    • 给父元素也设置相对定位
  5. 在IE7及以下版本，给li的子元素，两个或两个以上设置浮动，li与li之间会产生空隙
    • 给li设置vertical-align：top、middle、bottom
  6. 在IE6及以下版本，边框颜色设置透明且设置为实线的时候，IE会显示黑色
    • 给透明的边框设置成虚线

display：none和visibility：hidden区别

  • display：none 隐藏不占位
  • visibility：hidden；隐藏占位

在页面让元素消失？

  • display：none;
  • visibility:hidden;
  • opacity:0;
  • rgba:# # # 0；
  • 父元素设置overflow：hidden，子元素设置定位移除框外
  • position：absolute或fixed，用z-index遮盖
  • 将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）
  • 设置元素的transform的translateX（Y）的值为-100%；

如何处理h5新标签的浏览器兼容问题

处理新增标签在IE8及以下版本不兼容，处理办法：
  1. 创建元素，给元素转块 例:

Header{ Diaplay:block; } 2. 小于ie9执行此句 例：<!--[if lt ie 9]>

<![endif]-->

HTML5的新特性有哪些

  • 广义上HTML5是HTML+css+js
  • 实际上HTML5就是就是HTML一个新的版本
  • 内容结构更加简单
    1. 声明文档更加简单
    2. 编码格式更加简单
    3. HTML，head，body都可以省略
    4. 有些标签的结束标签可以省略不写
    5. 属性名和属性值相同的时候或者属性值为true的时候属性值可以省略不写
    6. 属性值的引号也可以省略
  • 新增了结构元素
    1. <header> 页头
    2. <footer> 页脚
    3. <nav>  导航
    4. <article>  文档中独立的内容
    5. <section> 页面中内容的章节
    6. <aside> 侧边栏
    7. <hgroup> 标题组
    8. <figure> 设置独立流内容(附加信息)
    9. <mark> 定义带标记的文本
    10. <time> 时间
  • 新增了表单元素
  • 新增了音频（audio）和视频（vidio）
<audio  Controls  Autoplay  Muted  Loop >
例: <source src=”../***.mp3”>{mp3/ogg/wav}
您的浏览器不支持音频文件，请下载谷歌浏览器
</audio>
Controls  播放控制台
Autoplay  自动播放
Muted    静音播放
Loop     循环播放
Source    标签中可以播入多种格式的音频文件（使用src引入路径）
<vidio  controls  autopaly  muted  loop  height=””  poster=”**.png”  preload=”auto”>					
例: <source src=”../***.mp4”>{mp4/ogg/webm}
</vidio>
Height  高度（建议给这个文件加这个属性）
Poster   视频文件播放前展示的画面
Preload =‘auto’ 自动加载（打开页面自动加载，不加的话点击播放加载）
Source    标签中可以播入多种格式的音频文件（使用src引入路径）
  • 新增了canvas
  • 新增了地图
  • 新增了拖放
  • 对本地离线存储有更好的支持

CSS3中有哪些新特性

  • 圆角：border-radius：可以设置一个角或多个角
  • 阴影：多个阴影之间用逗号隔开
    • box-shadow
      • 水平位置、垂直位置（必填项可以为负值）
      • 模糊的值，（不可以为负值），不写默认为0
      • 阴影的尺寸（可以为负值），默认为0
      • 阴影的颜色 不写默认黑色
      • 内外阴影：inset（不写默认为外阴影）
    • text-shadow
      • 水平、垂直、模糊跟盒子阴影一样
      • 颜色是根据字体颜色进行改变的可以添加颜色
  • 背景尺寸：
    • background-size：宽高；（填一个值宽度高度自适应）
    • contain 图片会在盒子完全显示，盒子一部分肯没有图片；
    • cover 图片等比例缩放，图片一部分看不见，盒子被完全覆盖
  • 背景定位区域：border-origin：定位区域
  • 背景剪裁区域：border-clip：剪裁区域
    • border-box：背景区域或剪裁区域是border
    • padding-box：背景区域或剪裁区域是padding
    • content-box：背景区域或剪裁区域是内容区域
  • 多背景布局 多个布局用逗号隔开，先写的靠前后写的考后
  • 线性渐变background：line-gradient(color，color)
    • 颜色最少写两个，可以用：
    • 像素、属性（left（水平）、top（垂直））、（to、right）到...结束
    • 从哪到哪（red 0 ，blue 50px）； 0~50红蓝渐变
    • background-repeating-linear-gradint（）表示重复线性，平铺
  • 径向渐变 background：linear-gradient（颜色，颜色）
    • 颜色最少两个，可以用: 像素、属性（left（水平）、top（垂直））、（to，right）到..结束、（deg）角度
    • 从哪到哪（red 0，blue 50px）；0~50红蓝渐变
    • Background-repeating-linear-gradient（）表示重复线性，平铺
avatar
文章
阅读
粉丝