html5/css3
html5/css3相关博文
前端炮灰预备员
这个作者很懒,什么都没留下…
展开
-
flex布局中的flex-basis,flex-grow,flex-shrink到底咋回事儿?
前言首发于我的 博客,欢迎大家来玩儿啊~~~flex布局是非常强大的布局方式,它能轻易完成我们能想到的大部分布局,类似圣杯布局、双飞翼布局等等,它非常灵活,兼容性也很好,在项目中经常被使用到。大多数同学应该都是从阮一峰老师的 这篇博文 了解到flex的,虽是15年写的,但毫不过时,依然有很强的引导性。但是阮老师对于flex-basis、flex-grow、flex-shrink这三个属性只是一笔带过,没有去深入讲它,我一直对这三个属性都是云里雾里的(脑壳笨????),在网上也未找到很好的讲解,最近写页原创 2020-06-16 21:56:41 · 728 阅读 · 0 评论 -
水平、垂直居中对齐全
水平居中行内元素:父元素 text-align: center;定宽块元素:margin: 0 auto;不定宽块元素(由内容撑开):display: inline-block; 再套一个父元素div,父元素:text-align-center定宽定高块元素(行内、块):父元素 display: flex; justify-content: center;垂直居中(前提都是父元素高度...原创 2020-02-21 23:31:34 · 261 阅读 · 0 评论 -
刷题易忘的知识点
link除了引用外部文件,比如引用外部css样式,还可拿到外部图标<!-- 注意,拿到的url一定要有协议头http或者https,我是从jd官网拿的 --><link rel="icon" href="https://www.jd.com/favicon.ico">h元素和SEO的关系SEO:搜索引擎优化(利用搜索引擎的规则使自己的网站在搜索引擎中排名靠前)...原创 2020-02-21 11:31:57 · 164 阅读 · 0 评论 -
html5常用标签
1.headerheader标签定义页面的页眉信息,一般写网页的logo啊,登陆部分2.footerfooter标签用来定义页尾。一般写什么联系方式啊,网址备份啊,合作网站啊上面的3.nav定义导航链接。写导航条什么的。4.canvas画布,结合js在界面画一个东西出来<canvas id="myCanvas" width="200px" height="100px"&g...原创 2019-10-23 11:15:45 · 187 阅读 · 0 评论 -
使body占有整个页面
今天在完成DOM中的一个小实例(鼠标点击页面可知道是鼠标左键,中键还是右键点击了页面)时发现不知道如何将body覆盖整个页面度娘上有说给body设置font-size:100%,或者是width:100%,height:100%,但是都没有解决问题我看了百度的源代码才找到答案要给html,body都设置宽度为100%才行html,body{ height: 100%;}这样设置还...原创 2019-06-29 21:59:16 · 3441 阅读 · 2 评论 -
背景图片超出html标签的问题
在做学校的作业时碰到了个背景图片超出html标签的问题(网上搜了一圈没搜到解决办法,我自己写一个吧,假如有人遇到了也可以借鉴下,,,可能没人会遇到吧,23333)如下图:由图2可知footer下方部分图片是超出了html标签部分的。我开始以为是背景图片默认平铺的原因,但改成no-repeat还是会出现问题,footer下方虽然没有图片了,但会出现空白。多次尝试我发现是backgrou...原创 2019-12-16 21:06:59 · 1190 阅读 · 0 评论 -
水平垂直居中
(先占个坑,,以后在更)原创 2019-10-27 17:43:16 · 128 阅读 · 0 评论 -
css中的flex布局和grid布局
当然是要看阮一峰大佬的两篇博文啦flexgrid原创 2019-10-27 17:40:02 · 530 阅读 · 0 评论 -
浅谈css中的BFC
BFC是css中非常重要的一个知识点,全面理解它很不容易,这篇博文只是浅谈它的知识点而已,讨论不到深层部分1.BFC是什么?BFC是块格式化上下文(Block Formatting Context),是一个独立的布局环境。可将其理解为一个盒子,盒子内的物品不会受外界干扰。它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。2.怎样会触发BFC?...原创 2019-10-27 17:00:08 · 231 阅读 · 0 评论 -
css中的overflow
overflow属性应该是css中不太重要的一个知识点吧,简单作一下总结visible默认值若内容超出了元素框的范围,则会呈现在框外auto若内容超出了元素框的范围,则元素框会显示一个滚动条,滑动滚动条查看超出的内容scroll不论内容是否超出元素框的范围,则元素框都会显示一个滚动条。hidden超出元素框的内容会被隐藏,看不到inherit继承父元素的overflow属性...原创 2019-10-27 15:37:15 · 159 阅读 · 0 评论 -
浅谈css盒模型
此篇博客只是为了总结前端知识点而写,没有过度深入盒模型的概念及用法,若要深入了解推荐张大大的博客1.盒模型基本组成content(width、height),padding(内边距),border(边框),margin(外边距)2.两种盒模型标准盒模型:width 等于 content 宽度IE盒模型:width 等于 content 宽度 + border 左宽 + padding...原创 2019-10-24 19:51:42 · 107 阅读 · 0 评论 -
css中的float
html里的元素会按照正常的文档流(比如块元素从上到下正常显示)显示,但给一个元素应用float会导致这个元素脱离正常的文档流1.使用float导致的后果~ 父元素高度塌陷 <style> #div-1{ background-color: red; width: 100px; heig...原创 2019-10-24 12:51:07 · 209 阅读 · 1 评论 -
详谈css中的伪类和伪元素
借鉴了csdn上的两篇博文:博文1 博文21.什么是伪类和伪元素?w3c的解释:伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器看字面意思的话看不出来他两个的区别,都是在某些选择器中添加特殊的效果其他解释:伪类用于选择DOM树之外的信息,包含那些 匹配指定状态的元素 ,比如:visited,:active;或是 不能用简单选择器进行表示的信息 ,后...原创 2019-10-24 11:27:12 · 339 阅读 · 0 评论 -
css中的display
在css中,要确定一个元素,不止要确定其大小(width,height),位置(position),还要确定其显示(display)display 设置一个元素该如何显示1. display : none隐藏该元素,且该元素在文档流中不占有任何空间,相当于将其抹去了一般(延申:visibility : hidden 也是隐藏该元素,但是它在文档流中占有空间)display: none;...原创 2019-10-23 21:27:47 · 284 阅读 · 0 评论 -
css选择器
4种基本选择器(id,类class,元素标签element,适配所有标签 )很简单就不说了1.后代选择器div p{}div元素里的所有p元素都被选中2.子代选择器div>p{}div元素的子代里的p元素会被选中3.相邻兄弟选择器使用条件,两个元素必须拥有同一个父元素,第二个元素紧接在第一个元素之后li+li{}<ul> <li>&l...原创 2019-10-23 11:51:41 · 110 阅读 · 0 评论 -
CSS position
static:默认值,没有定位。元素出现在正常的流中(忽略top,bottom,left,right或z-index声明)absolute:绝对定位,相对于第一个父元素定位(不包括static)。位置通过bottom、top、left、right决定。与文档流无关,因此不占据空间。ralative:相对定位,相对于正常文档流位置进行定位。元素仍占据原来的空间。fiexed:绝...原创 2019-10-08 20:00:48 · 132 阅读 · 0 评论