HTML、css、html5、css3
文章平均质量分 59
基础部分的一些知识点,
十九万里
扶我起来 我还能继续学!!!
展开
-
CSS画三角形
效果图 全部代码 <!DOCTYPE html><html><head> <title></title> <style type="text/css"> /* css3...转载 2021-06-01 09:42:10 · 231 阅读 · 0 评论 -
css重置样式表
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }table { border-collapse: collapse; border-spacing: 0; }fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var原创 2021-06-01 09:28:34 · 199 阅读 · 0 评论 -
html中mate常见属性
Keywords(关键词)说明:告诉搜索引擎你网页的关键字(keywords)Robots (机器人向导)说明:Robots用来告诉搜索机器人页面需要或者不需要索引。Content的參数有all、none、index、noindex、follow、nofollow。默认是all。viewport(视窗/移动端)说明:viewport 是用户网页的可视区域,即“视区”。http-equiv=“X-UA-Compatible” (这是一个文档兼容模式的定义)renderer (指定双核浏览器默.原创 2021-06-01 09:21:41 · 905 阅读 · 0 评论 -
为什么css放头部、js放尾部
(题图:梵高-向日葵)我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。为什么外链css为什么要放头部?#首先整个页面展示给用户会经过html 的解析与渲染过程。而外链css无论放在html的任何位置都不影响html的解析,但是影响html的渲染。如果将css放在尾部,html的内容可以第一时间显示出来,但是会阻塞html行内css的渲染。浏览器的这个策略其实很明智的,想象一下..转载 2021-06-01 09:14:53 · 1507 阅读 · 0 评论 -
css三栏布局 两边固定 中间自适应的五种方式
1.浮动2.定位3.flex4.圣杯布局5.双飞翼布局1、浮动第一种就是浮动:左右浮动 中间不浮动 <style> body { margin: 0; padding: 0; } .container { width: 100%; height: 200px; } .left { width: 300px; height: 200px; backgro.原创 2021-06-01 08:57:17 · 968 阅读 · 0 评论 -
css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比JS动画缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。 (2)代码的复杂度高于CSS动画优点:(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到.转载 2021-05-31 23:22:19 · 885 阅读 · 0 评论 -
CSS选择器从右向左的匹配规则
下面这个栗子,CSS选择器它是如何工作的?.mod-nav h3 span {font-size: 16px;}如果不知道匹配规则,可能的理解是从左向右匹配:先找到.mod-nav,然后逐级匹配h3、span,在这个过程中如果遍历到叶子节点都没有匹配就需要回溯,继续寻找下一个分支。但事实上,CSS选择器的读取顺序是从右向左。还是上面的选择器,它的读取顺序变成:先找到所有的span,沿着span的父元素查找h3,中途找到了符合匹配规则的节点就加入结果集;如果直到根元素html都没有匹配,则不再遍.转载 2021-05-31 23:14:49 · 535 阅读 · 1 评论 -
面试官:一道题看透你会不会css
今天总结了一下css的考点,发现一个有趣的面试题,可以衍生到很多点,记录一下分享给大家问题:什么是标签语义化扩展:1、 都有哪些标签?2、块级标签和行内标签的区别?3、如何转化?4、display除了这个几个值还有哪些?5、既然提到了display:none来说一说吧?6、让元素隐藏,有几种办法?7、display:none和visibility:hidden的区别?8、opacity的兼容处理9、filter是什么,还是做什么事情?10、display:flex/11、 除了原创 2021-05-22 09:26:29 · 212 阅读 · 6 评论 -
HTML行内元素和块级元素(面试必考题)
知识点行内元素,块级元素DOM树事件模型跨标签页通信1、行内元素、块级元素行内元素属性1、行内元素不独占一行,其他行内元素会依次排列在一行直到一行排列不下才会换行,宽度跟随元素的内容变化2、行内元素无法设置宽高,可以设置line-height,margin上下无效,padding上下无效3、行内元素内部不能嵌套其他行内元素标签disply:inline注:img和input比较特殊,可以改变宽和高、块级元素1.块级元素独占一行,宽度自动填满父元素的宽度2.块元素可以设置wid.原创 2021-04-27 21:31:56 · 472 阅读 · 1 评论 -
css复习笔记(二)
css复习笔记(二)七.常见的样式声明1,Color 元素内部的文字颜色,预设值:定义好的单词,一般用三原色色值(光学三原色,红绿蓝)用0-255之间的数字来表达颜色rgb表示法rgb(123 23 33)经常使用hex(16进制)表示法,常见的,淘宝红#ff4400,黑色#oooooo,白色#ffffff ,红#ff0000,绿#0000ff,蓝#f0f,灰色#ccc,2,Background-color元素背景颜色3,font-size元素内部文字尺寸大小 单位有两种。Px(像素)文字的高度占多原创 2021-02-25 22:19:33 · 263 阅读 · 1 评论 -
html中有margin和padding默认值的元素
一.h1~h6标签: 有默认margin(top,bottom且相同)值,没有默认padding值。 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; ...转载 2021-03-25 08:02:25 · 1339 阅读 · 0 评论 -
转载:CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素; p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第n个子元素 注意:n是从1开始的 如下代码,p:nth-child(1),只会选中第二个div中第一个子元素p; 不会选中第一个div...转载 2021-03-25 07:45:46 · 299 阅读 · 0 评论 -
link和import区别
区别:1、link是xhtml标签,无兼容性问题,@import是css2.1提出的,低版本浏览器不支持,只有ie5以上才支持2、link能加载css javascript @import只能加载css3、link链接的内容是和html页面同步加载的,@import需要等到页面全部加载完成之后才能加载。总结:link的权重高于@import。link属于HTML标签所以不受兼容性的影响,@import属于css标签 只能加载css样式。link除了加载CSS外,还能用于定义RSS, 定义rel连接原创 2021-03-18 08:05:46 · 681 阅读 · 0 评论 -
img和image的区别
在使用HTML图片的时候,通常有两种方式就是img和image。区别:img属于HTML标签image属于服务器控件大部分时候两者没有多大的区别,可以交替使用,但是我们一般使用imageImage控件能解决一个棘手的问题。因为Img标签不能识别~这个符号,通常这个符号都是代表网站根目录,img标签只能使用相对路径引用图片...原创 2021-03-17 09:42:15 · 13988 阅读 · 0 评论 -
详解css浮动(转载)
作者写的非常好,很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: &nb...转载 2021-03-15 20:27:35 · 245 阅读 · 0 评论 -
css进阶复习笔记(三)
css进阶一、@规则别名:at-rule css指令 css语句 @规则1、import@import“路径”:作用是导入另外一个文件2.charset@charset“utf-8”:告诉该文件浏览器该css文件使用的字符编码集是utf-8这个指令必须写到第一行,如果没有中文可以不写二、web字体和图标1、web字体(用的比较少,因为要单独加载)解决用户电脑上没有安装需求字体的问题,强制让浏览器下载字体文件(后台下载)可是使用@font-face制作一个新字体font-fami原创 2021-02-26 10:20:17 · 160 阅读 · 0 评论 -
css复习笔记(一)----选择器 盒模型
css复习笔记(一)css叫做层叠样式表 负责给html结构增添样式一、css书写位置1.内联样式表,style一般写在header里<header> <style> css代码 </style></header>2.内联样式表 也叫做元素样式表 写在元素的style里面 不用选择器。3.外部样式表 将css代码写在独立的css文件中 使用link元素在header里面链接到HTML文件中使用,是使用的最多的方法二、选择器选择器种原创 2021-02-25 15:23:02 · 191 阅读 · 0 评论 -
html笔记
html基础知识点复习这是我自学完成之后自己做的总结笔记,差缺补漏的,有错误的地方感谢各位大佬指点,不是很齐全 一些基础的知识点我就没有写了,后面遇到新的内容会持续补充进去方便以后查阅使用基本语法标签标签分为单标签和双标签常见的单标签: br/ hr/ img input link常见的双标签:HTML head title body table tr td span p formh style b strong i div a scripth1-h6:标题标签 p:段落 a:链原创 2021-02-25 13:41:42 · 259 阅读 · 3 评论