HTML
仗剑天涯,从摘要开始
这个作者很懒,什么都没留下…
展开
-
vertical-align属性
一、为什么要写这篇文章今天看到一个问题:两个div 都设置 display:inline-block,正常显示;但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么?<meta charset="utf-8"/><style>div{ width: 100px; height: 100px; border:1px solid red; display: inline-block;}.align{/*原创 2020-05-19 00:31:53 · 294 阅读 · 0 评论 -
纯CSS制作各种图形(多图预警)
今天在国外一网站(The Shapes of CSS)看到的,看了一下 css,也不复杂,只是平时没有用心去思考~用心思考~埋头赶路~~Square(正方形)#square { width: 100px; height: 100px; background: red;}Rectangle(矩形)#rectangle { width: 200px; height: 100px; background: red;}Ci...原创 2020-05-19 00:11:21 · 554 阅读 · 0 评论 -
css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。css有一系列的伪元素,如:before,:after,:first-line,:first-letter等,本文就详述一下:before和:after元素的使原创 2020-05-19 00:07:18 · 4774 阅读 · 0 评论 -
flex布局导致文字溢出隐藏没有效果
解决:flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突解决:flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&g...原创 2020-05-03 15:30:52 · 1888 阅读 · 0 评论 -
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
height:100vh一些只能vw, vh才能完成的应用场景:1. 场景之:元素的尺寸限制vw vh 主要是实现了动态高度百分比布局,比如宽高比不固定的图片,vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大,尼玛一屏显示器区域不够放,我们需要对其进行缩放处理。这类限制的实现,在当下,需要获得图片的原始大小,以及浏览器内部尺寸,算大小,算比例等,...原创 2020-04-26 01:24:04 · 667 阅读 · 0 评论 -
margin-top塌陷问题的现象与解决的具体方法
这篇文章主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现...原创 2020-04-06 19:18:25 · 621 阅读 · 0 评论 -
简述浏览器渲染机制
一 : 为什么要了解浏览器渲染页面的机制,主要还是性能的优化。了解浏览器如何进行加载,我们可以在引用外部样式文件,外部JS时,将它们放到合适的位置,是浏览器以最快的速度,将文件加载完毕。 了解浏览器如何进行解析,我们可以在构建DOM结构,组织CSS选择器的时候,选择最优的写法,提高浏览器的解析速率。 了解浏览器如何进行渲染,明白渲染的过程,我们在设置元素属性,编写JS文件时,可以减少“重绘...原创 2020-04-07 11:11:51 · 278 阅读 · 0 评论 -
css 编码规范
1.前言CSS编码规范目的是使CSS代码风格保持一致,容易被理解和被维护。2.代码风格2.1 文件:[ 建议 ] 文件使用无BOM的 UTF-8编码解释:UTF-8 编码具有更广泛的适应性。BOM在使用程序或工具梳处理文件时,可能会造成不必要的干扰。2.2 缩进[强制] 使用4个空格作为一个缩进层级,不允许使用2个空格或tab字符 示例:.selector { ...原创 2020-04-07 11:11:57 · 219 阅读 · 0 评论 -
HTML5浏览器支持及兼容性处理
1、现代的浏览器都支持HTML5。2、所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理。3、HTML5定义了8个HTML语义元素,所有这些元素都是块级元素,为了能让旧版本的浏览器正确显示这些元素,你可以设置css的display属性值为block,如下:header, section, footer, aside, nav, main, article, figur...原创 2020-04-04 18:31:31 · 221 阅读 · 0 评论 -
HTML5新增的标签及使用
HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签。一、定义文档类型在文件的开头总是会有一个标签 1 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...原创 2020-04-04 18:27:35 · 156 阅读 · 0 评论 -
HTML5的新增标签有哪些?
2019-07-30 09:46我们都知道,想要成为一名合格的前端开发人员,掌握好HTML5是一个重要的先决条件,相比较于HTML,HTML5中新增了许多功能标签,那么这么标签都有哪些呢?格式:<bdi>定义文本的文本方向,使其脱离其周围文本的方向设置。<mark>定义有记号的文本。<meter>定义预定义范围内的度量。<progr...原创 2020-04-04 18:26:27 · 317 阅读 · 0 评论 -
html 行内元素和块级元素
行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。因此,行内元素适合显示具体内容,而块级元素适合做布局。常用的行内和块级...原创 2020-04-04 18:25:53 · 110 阅读 · 0 评论