♚CSS3 & HTML5
杭州-前端-求内推
这个作者很懒,什么都没留下…
展开
-
CSS笔记
1.给<img>标签的alt属性添加让人一听或者一看就能明白的内容。2.搜索引擎会将<h1>视为仅次于<title>标签的另一个搜索关键词的来源。3.几乎所有元素的display属性值要么为block,要么为inline。最明显买的一个例外是table元素,他有自己特殊的display属性值!4.无论你想了解哪一个html元素,第一个要问的问题都应该是:它是块级元素还是行内元素。5.块级元素盒子会扩原创 2017-05-06 00:34:51 · 412 阅读 · 0 评论 -
offsetTop-clientTop-scrollTop-各属性介绍
HTML 精确定位scrollHeight: 获取对象的滚动高度 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offs转载 2017-08-11 21:44:32 · 421 阅读 · 0 评论 -
HTML5 总结
span 标签没有语义,它的作用就是用于设置单独的样式。q 标签用于短文本引用。blockquote 是长文本引用,浏览器将其解析为缩进样式。加入一行代码使用code 标签,如果是多行代码请使用 pre 标签。后者的主要作用是预格式化文本,被包围在其中的文本会保留空格和换行符,他不是仅仅只能用来显示计算机的源代码,在你需要在网页中预显示格式时都可以使用它。<table summary="xxx">摘原创 2017-08-06 21:05:15 · 325 阅读 · 0 评论 -
CSS 优质文章整理
1:Flex 布局教程:语法篇原创 2017-08-03 09:12:55 · 271 阅读 · 0 评论 -
新学习CSS特性总结
1.margin-left: auto; margin-right: auto;2.word-wrap: break-word;3.overflow-x: hidden; overflow-y: auto;4.outline: 0;原创 2017-07-23 07:43:53 · 301 阅读 · 0 评论 -
HTML块级元素&行内元素概览
我们在编写代码组织页面结构的时候,首先要思考的一定是我用的元素是块级元素还是行内元素,用合理的元素来布局,从而提高开发的效率。我在写代码的时候就经常纠结这个元素到底是块级元素还是行内元素,所以就抽空来总结一下,希望能给大家 一点帮助:原创 2016-10-04 15:30:29 · 431 阅读 · 0 评论 -
添加图片说明
把图片说明和图片关联起来需要使用两个元素,分别是和,前者是图片的容器,后者是说明的容器。使用这两个标签的好处就是,可以通过内部或者外部样式表应用css,就如同其他容器标签一样。效果如下:(如果你想多一个共同进步的朋友,动手添加微信号:18710799029 我在那等着你!)原创 2016-09-25 13:58:39 · 543 阅读 · 0 评论 -
理解链接类型和关系
HTML5中有三个标签需要创建链接关系:1.页面内使用元素时2.使用元素时3.使用元素时要想在link或者area元素中明确链接关系,rel属性的值需要用空格分开:html5,在这段代码中,我们创建了一个tag链接,和元素的rel属性控制要创建的链接关系,其属性必须是以空格分隔的一组记号。rel属性没有默认值,如果被省略或者用户引擎无法识别其属性值,则视文档与目原创 2016-09-25 13:29:05 · 587 阅读 · 0 评论 -
CSS 清浮动详解
什么是浮动?使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的元素停下来。(脱离文档流:此时浮动元素在文档中不占位置,飘了起来)浮动的特征1.块元素在一行显示 2.内联元素支持宽高 3.默认内容撑开宽度 4.脱离文档流 5.提升层级半层(只能够放元素本身,这个元素里的内容会被挤出来) 6.父元素的高度无法被撑开,影响与父元素同级的元素 7.与浮动元素同级的非浮动元素(内联元素原创 2017-08-10 00:15:27 · 504 阅读 · 1 评论 -
CSS常见布局效果
1:CSS秘密花园: Sticky footers原创 2017-08-04 07:58:32 · 387 阅读 · 0 评论 -
如何写出简洁优美的CSS Reset
1.什么是 CSS resetCSS reset 的就是让各个浏览器的 CSS 样式有一个统一的基准,而这个基准更多的就是“清零”!2.如何写出简洁优美的CSS reset我们的 reset 应该根据自己的要求来书写。然而,目前的状态是(尤其一些中小型网站), reset 代码直接拷贝过去,不做任何的思考。3. 你所不知的 resetdiv、li、还有像 form, input, button,原创 2017-05-20 13:00:27 · 391 阅读 · 0 评论 -
CSS之伪类
1.UI伪类,会在HTML元素处于某个状态时,为该元素应用CSS样式。注意:有些伪类可以用于任何元素,而不仅仅是a元素。*链接伪类:Link:链接在哪里等着用户点击Visited:用户在此前点击过这个链接Hover:鼠标正悬停的链接上Active:链接正在被点击(鼠标在元素上按下,还没有释放)需要按照这里列出的顺序使用它们,当然也不一定非要把所有的4个状态都写出来。要发挥这原创 2016-09-25 14:29:58 · 281 阅读 · 0 评论 -
height:100%和height:auto的区别
height:auto;根据内容自动调节高度。height:100%;相对其父块的高度而定义的高度,也就是按照理她最近且有定义高度的父层的高度来定义高度。原创 2016-10-22 14:00:59 · 1241 阅读 · 0 评论 -
CSS伪元素
1.::first 伪元素p::first{css} 可以得到段落的首字符,并为其添加样式2.::first-line伪元素(::first-line伪元素的长度会随着浏览器窗口的大小变化)p::first-line{css} 选中段落的第一行为其设置样式3.::before和::after伪元素可以用在在特定的元素的前面或后面添加特殊内容注意:搜索原创 2016-09-30 16:42:08 · 273 阅读 · 0 评论 -
CSS继承需要注意的问题
由于字体和文本样式时刻是继承的,所以在使用相对字体单位时(比如百分比和en)时要格外小心。如果某个标签的字体大小被设置为80%,而他的一个后代的字体大小也被设置为80%,那么该后代最终的字体大小是:64%(80%的80%)。原创 2016-09-30 16:47:09 · 350 阅读 · 0 评论 -
CSS层叠总结
1.包含ID的选择符胜过包含类的选择符,包含类的选择符胜过包含标签的选择符。2.如果几个不同的来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特制度的样式,后声明的胜过先声明的。(规则一胜过规则二。换句话说,如果选择符更明确(特指度更高),无论他在那里,都会胜出。)3.设定的样式胜过继承的样式,此时不用考虑特指原创 2016-09-30 17:16:58 · 244 阅读 · 0 评论 -
CSS浮动问题总结
1.在IE6或者IE7下,元素浮动要并在同一行的元素都要加浮动。2.IE6下的双边距Bug问题:问题描述:在IE6下,块元素有浮动和横向的margin时,横向的margin值会被放大两倍解决办法:给要浮动的元素添加display:inline;属性3.IE6和IE7下li有若干px的间隙问题:原因:在IE6和IE7下,li本身没浮动,但内容浮动了,li下面就会多原创 2016-10-05 08:31:57 · 896 阅读 · 0 评论 -
伪元素使用详解(超详细版)
1. :after ::after 单双引号的区别其实无论是单引号还是双引号,他们的本质都是伪元素,只不过因为伪类使用的也是单引号,同时他们的写法类似,写法也相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。2.使用伪元素需要注意原创 2017-05-06 11:36:14 · 19532 阅读 · 0 评论 -
为div设置的背景色默认会延伸到哪里?
The background of an element is the total size of the element, including padding and border (but not the margin).原创 2017-05-07 10:08:32 · 911 阅读 · 0 评论 -
行内元素,块级元素和空元素
1.行内元素:a b span img input select strong2.块级元素div ul ol li dl dt dd h1 h2 h3 h4… p3.空元素<br> <hr> <img> <input> <link> <meta> <area> <base> <col> <embed> <param> <source> <track> <wbr>原创 2017-05-08 22:01:16 · 422 阅读 · 0 评论 -
HTML微数据
使用微数据的优点是:可以在网页中创建非标准的HTML自定义元素。这时需要首先创建一个自定义词汇表,据此来定义可复用且可被搜索引擎是别的名值对。自定义词汇表就是自定义属性的一个列表,可用于定义一些元素,从而作为供其他开发者和搜索引擎设计者参考的技术文档。同时,利用微数据自定义语义,可以让搜索引擎更好的检测到你的web页面。(微数据是为内容分配标签用一描述特定类型信息的一种方法)。要定义自原创 2016-09-19 23:34:18 · 587 阅读 · 0 评论