HTML+CSS
文章平均质量分 82
介绍HTML和CSS的一些进阶内容
清辞-
这个作者很懒,什么都没留下…
展开
-
Bug—行内块元素的显示问题
发现Bug今天在做flex布局的时候,我在父元素中引入了四个行内元素span,想测试flex的相关属性,代码如下所示。我本来是想在box这个盒子中放四个span,因为按理说应该正好放下四个span,但实际效果却不是这样。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device原创 2021-10-11 19:17:18 · 226 阅读 · 0 评论 -
CSS的flex布局
传统盒模型布局方式CSS常见的布局方式如下图所示。传统布局方式就是通过盒子模型,使用display+postion+float属性完成布局。详见参考文章文档流布局display布局方式,按照文档的顺序一个一个的显示出来,块元素独占一行,行内元素共享一行浮动布局浮动方式布局就是使用 float 属性,使元素脱离文档流,浮动起来。定位布局通过 position 属性来进行定位flex布局2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面原创 2021-10-11 16:52:06 · 186 阅读 · 0 评论 -
项目背景介绍
CSS样式补充精灵图项目章将多张小图片,合并成一张大图片,这张大图片称之为精灵图。精灵图的优点是减少服务器发送次数,减轻服务器压力,提高页面加载速度。比如需要在网页中展示8张小图片,8张小图片分别发送,需要发送8次请求。合成一张精灵图发送,只需要发送1次这种小图片就是一张精灵图上的图标(自取,可以用在下面的代码中)使用步骤:创建一个盒子,设置盒子大小为小图片大小,设置精灵图为盒子的背景图片,将小图片左上角坐标取负值,设置给盒子<!DOCTYPE html><原创 2021-10-07 13:48:10 · 14232 阅读 · 0 评论 -
CSS布局进阶
定位装饰选择器扩展CSS样式补充项目前置知识项目结构搭建原创 2021-10-07 13:11:49 · 185 阅读 · 0 评论 -
CSS布局初级
结构伪类选择器伪元素标准流浮动清除浮动原创 2021-10-07 00:58:21 · 152 阅读 · 0 评论 -
CSS的盒子模型
什么是盒子模型CSS中规定由内容区域,内边距区域,边框区域,外边框区域组成,这就是盒子模型。通过盒子的视角更方便的进行布局。内容区域的宽度和高度width和height来规定内容区域的大小边框给边框设置粗细,样式以及颜色内边距设置边框与内容区域之间的距离,padding从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的。外边距设置边框以外,盒子与盒子之间的距离。方法同内边距我们可以把盒子与盒子之间的距离,换一种说法盒子的计算公式盒子尺寸3原创 2021-10-06 21:51:14 · 138 阅读 · 0 评论 -
CSS进阶知识
选择器进阶复合选择器分为后代选择器(空格)和子代选择器(>)后代包括:儿子,孙子和重孙子等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2021-10-06 21:01:02 · 137 阅读 · 0 评论 -
CSS基础知识
基础认知基础选择器字体和文本样式Chrome调试工具原创 2021-10-06 13:49:47 · 150 阅读 · 0 评论 -
HTML标签进阶知识
列表标签无序列表在网页中表示一组无顺序之分的列表,ul>liul标签中只允许包含li标签,li标签可以包含任意内容有序列表在网页中表示一组有顺序之分的列表,ol>liol表示有序列表的整体,用于包裹li标签自定义列表在网页的底部导航中通常会使用自定义列表实现dl>dt>dd <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd原创 2021-10-06 01:50:15 · 165 阅读 · 0 评论 -
HTML基础认知和标签
HTML基础认知网页的知识网页是由文字,图片,音频,视频,超链接等组成常见的五大浏览器:IE,Firefox,Chrome,Safari和Opera渲染引擎浏览器中专门对代码进行解析渲染的部分。不同的浏览器它的渲染引擎也是不同的,如下图所示渲染引擎不同,导致解析相同代码时的速度,性能和效果也不同。根据用户体验的反馈,谷歌浏览器的渲染引擎速度快,性能高,效果好,所以在前端开发中推荐使用谷歌浏览器。(极少数情况需要使用火狐浏览器进行相关代码的调试)Web标准由三大部原创 2021-10-06 00:32:06 · 118 阅读 · 0 评论