HTML&CSS
文章平均质量分 67
不另外加糖
小蜗牛也能登顶!
展开
-
iframe和frame的区别
iframe和frame的功能差不多,iframe用来定义一个内联框架,在html文档里嵌入另一个html文档。iframe包含的内容和页面是一个整体,但是frame包含的内容是一个独立的区域。 先来说说frameset一、frameset主要属性:1、cols:纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、*”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为...原创 2021-08-26 10:27:33 · 2057 阅读 · 0 评论 -
几种布局方式的总结
准备面试题,突然发现自己好像对布局这块仍然有点不清楚,写篇文章记录一下。先附上一个网站:加深理解http://wow.techbrood.com/fiddle/1753一、静态布局 静态布局就是传统网页的布局方式,所有的样式都统一用px来定义宽和高。也可以设置min-width和min-height,当小于这个宽高的时候就会显示滚动条,当大于这个宽高时,内容就居中对齐。 特点:没有兼容性问题二、流式布局 流式布局就是随着屏幕的改变,页面布局没有很大的改变,但...原创 2021-08-13 10:43:00 · 643 阅读 · 0 评论 -
display:none和visibility:hidden的区别
一、display:none 设置了display:none的元素,会从DOM结构中消失,隐藏后的元素不占据任何空间;他是一个非继承属性,通过修改其后代元素的属性,也不能让后代元素显示出来。<body> <div> <strong>给元素设置display:none样式</strong> <p>A元素</p> <p style='display:none;'&g..原创 2021-08-05 19:48:03 · 176 阅读 · 0 评论 -
CSS选择器的优先级
一、不同级别 1、!important 2、作为style属性写在标签内 3、id选择器 4、类选择器 5、标签选择器 6、通配符选择器 7、继承 8、浏览器默认样式优先级也是按照上面的顺序依次递减二、同一级别 1、后面的样式会覆盖前面的样式 2、根据引入方式的不同,优先级也不一样总结排序:内联(行内)样式 > 内部样式表 (style标签内) > 外部样式表(link标签引入)> 导入样式(@import)...原创 2021-08-02 10:41:42 · 157 阅读 · 0 评论 -
小知识点:link和@import的区别
css样式表可以有好几种写法:内联式,style标签里写,外部导入。外部导入又分为link标签导入和@import导入,那么这两种外部导入方式有什么区别呢?1、书写方法link标签: <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> @import<style type="text/css" media="screen"> @...原创 2021-06-29 15:39:46 · 130 阅读 · 0 评论 -
BFC及其作用
一、什么是BFC BFC中文名称是块级格式上下文,他是一个独立渲染的区域,内部的布局不会影响到外面。 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。二、哪些方法可以创建BFC1、浮动元素,即float属性值不为none的元素2、position属性值不为rel...原创 2021-06-29 15:15:08 · 1228 阅读 · 0 评论 -
回流与重绘
一、什么是回流和重绘 回流:对DOM元素的修改涉及到了DOM几何尺寸的改变,浏览器需要重新计算元素的几何属性 重绘:对DOM元素的修改仅仅改变了DOM的颜色等属性,没有涉及几何尺寸的改变,直接重新计算元素的样式 回流一定会引起重绘,但是重绘不一定引起回流。不可否认的是回流和重绘都非常消耗性能,所以我们要尽可能避免。二、如何避免2.1 哪些会产生 避免回流与重绘,我们得先明白有哪些操作能引起它们,才能更好的避免 1、直接获取元素的width、length、border...原创 2021-06-29 10:48:59 · 775 阅读 · 0 评论 -
详细的浏览器解析html过程
从头开始说起,可能有些地方不是很全,以后学习过程中慢慢补齐1、用户在地址栏输入一个URL,通过DNS域名解析,先在本地hosts文件夹里查找有无与当前域名对应的ip地址,若有则向服务器发起请求,若没有,则在本地域名服务器查找,采用递归查找,若仍然没有,则在根域名服务器查找,采用迭代查找,它会告诉你在哪个服务器查找,查找到ip地址,把对应规则保存在本地hosts文件中。2、缓存服务器CDN3、进行http请求,三次握手四次挥手 拓展:为啥是三次握手和四次挥手,不是其他次数呢?这几次连接中到底.原创 2021-06-28 22:11:57 · 3735 阅读 · 0 评论 -
HTML5中的DOCTYPE和meta标签
一、DOCTYPE声明标签 写在HTML标签的上面,位于HTML文档的开头;用来告诉浏览器应该以哪种文档规范解析该文档;不是一个HTML标签HTML5声明<!DOCTYPE html>二、meta标签 放在head标签内,用来提供关于HTML文档的一些元信息,如针对搜索引擎的关键词和描述,网页的重定向,页面使用的语言,标签的属性定义了与文档相关联的名称/值对。必需的属性:属性 值 描述 content some_text 定义与 ht..原创 2021-06-28 16:41:33 · 2066 阅读 · 0 评论 -
CSS中的选择器
目录一、基础选择器1.1 标签选择器1.2 类选择器1.3 id选择器1.4 通配符选择器二、高级选择器2.1 后代选择器(空格隔开)2.2 子代选择器2.3 交集选择器(紧挨)2.4 并集选择器2.5 伪类选择器三、结构伪类选择器一、基础选择器1.1 标签选择器 针对一类标签结构: 标签名{css属性名:属性值;}例子:<style type="text/css"> p{ font..原创 2021-06-28 14:30:13 · 241 阅读 · 0 评论 -
面试常问的px,em,rem,rpx
一、pxpx:相对长度单位,相对于显示器的频率分辨率,频率分辨率就是屏幕上的像素个数特点: IE浏览器无法调整那些使用px为单位的字体大小 国外大部分网站能够调整的原因是他们使用了em,rem作为字体单位 Firefox可以调整px,em,rem为单位的字体大小,但是国内大部分人依然使用IE浏览器二、emem:相对单位长度,相对于当前对象的字体大小,会继承父元素的大小;如果当前对象没有设置字体大小或没有父元素,那么就相对于浏览器页面的默...原创 2021-06-28 10:35:55 · 322 阅读 · 0 评论 -
列表、表格、表单标签
一、列表1.1、无序列表ul,li<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul> 输出: 1.2、有序列表ol,li<ol> <li>Coffee</li> <li>Tea</li> <li>Mi...原创 2021-06-27 20:30:27 · 81 阅读 · 0 评论 -
块级元素、行内元素和行内块元素
一、块级元素 块级元素:可以设置宽高、行高和内外间距,会独占一行,宽度默认等于父元素宽度,可容纳其他块级元素和行内元素 块级元素主要有 <div> //定义文档中的分区或节 <form> //创建 HTML 表单 <address> //定义地址 <hr> //创建一条水平线 <noframes> //为那些不支持框架的浏览器显示文本,于 frames...原创 2021-06-27 16:59:05 · 605 阅读 · 0 评论