- 博客(36)
- 收藏
- 关注
RSS订阅原创 布局
布局多栏布局两栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
2019-11-14 23:41:43
3778
原创 块级格式化上下文(面试有用)
块级格式化上下文（面试有用）全称Block Formatting Context ,简称BFC它是一块 独立的渲染区域，它规定了该区域中，常规流块盒的布局常规流块盒在水平方向上，必须撑满包含块；常规流块盒在包含块的垂直方向上依次摆放；常规流块盒若外边距无缝相邻，则进行外边距合并；常规流块盒的自动高度和摆放位置，无视浮动元素。BFC渲染区域：这个区域由某个HTML元素创建，以下元...
2019-11-14 23:40:37
261
原创 web字体和图标
web字体和图标web字体解决用户电脑上没有安装相应字体的问题。当用户电脑上没有安装相应字体时，强制让用户下载该字体。使用@font-face指令制作一个新字体@font-face{ font-family:"good night"; scr:url("./font/晚安体.ttf")}字体图标iconfont.cn 字体图标库（阿里巴巴）在线使用：① 选...
2019-11-14 23:39:45
155
原创 @规则
@规则at-rule: @规则，@语句，CSS语句，CSS指令import@import “路径”；导入另外一个CSS文件@import".\css\reset.css"charset@charset “utf-8”告诉浏览器该CSS文件，使用的字符编码集为utf-8。@charset “utf-8” 必须写在第一行...
2019-11-14 23:39:13
162
原创 其他元素
其他元素abbr缩写词<p> <abbr title="cascading style sheet">CSS</abbr>是用于为页面添加样式</p>time提供给浏览器或搜索引擎的时间<p> <time datetime="2019-10-01">今年十月</time>我学...
2019-11-14 23:37:48
292
原创 表格元素
表格元素在CSS技术出现前，网页通常使用表格布局。后台管理系统中可能会使用表格。前台：面向用户后台：面向管理员。对界面要求不高，对功能性要求高。问：表格不再使用于网页布局？ 答：表格的渲染速度过慢。表格术语表格：table表格标题：caption表头：thead表格主体：tbody表尾：tfoot表格行：tr标题单元格：th单元格：td<!DOCTYPE ...
2019-11-07 23:30:28
173
原创 表单练习
表单练习练习尝试做一个B站登录页面，具体代码如下。CSSreg.css.clearfix::after{ content: ""; display: block; clear: both;}.form{ width: 980px; margin: 1em auto;}.form h2{ width: 100%; te...
2019-11-07 22:39:06
322
原创 美化表单元素
美化表单元素新的伪类focus元素聚焦时的样式通常用于设置选中框 <style> input:focus{ outline: 2px #008c8c solid; outline-offset: 0px;; color: red; } </st...
2019-11-04 23:06:07
241
原创 表单元素
表单元素一系列元素，主要用于收集用户数据。input元素输入框属性：type：输入框类型。type: text，普通文本输入框。type: password，密码。type：date，日期选择框,兼容性问题（旧版本浏览器）。type：search，搜索框，兼容性问题（旧版本浏览器）。type：range，选中范围。type：color，颜色选择。type：number,...
2019-10-30 23:07:58
235
原创 iframe
iframe元素框架页通常用于在网页中嵌入另一个页面iframe 为可替换元素可替换元素的特点：通常行盒通常显示的内容取决于元素的属性CSS不能完全控制其中的样式具有行块盒的特点通常在B站类似网站分享功能中，有“嵌入代码” 直接粘贴至代码设置格式即可。...
2019-10-30 23:06:32
141
原创 更多的样式
更多的样式透明度opacity，设置整个元素的透明度，取值为0 ~ 1在颜色位置设置alpha通道（rgba），取值为0 ~ 1鼠标使用cursor设置，详见mdn可以用.ico/.cur文件设置鼠标为一个图片cursor:url("图片路径"),auto;盒子隐藏display:none,不生成盒子visibility:hidden,生成盒子，只是从视觉上移除盒子，盒...
2019-10-30 23:05:09
456
原创 更多的选择器
更多的选择器更多伪类选择器:first-child选中第一个子元素:first-of-type /* 选中a元素，并且a元素是第一个子元素 */ a:first-child{ color: red; } /* 选中的是子元素的第一个a元素 */ a:first-of-type{ ...
2019-10-30 23:03:54
123
原创 定位
定位定位：手动控制元素在包含块中的精准位置。涉及的CSS属性：position。position属性默认值：static ，静态定位（不定位）relative：相对定位absolute：绝对定位fixed：固定定位一个元素，只要position的取值不是static，认为该元素是一个定位元素。定位元素会脱离常规流（文档流），相对定位除外。一个脱离文档流的元素：文档流中元...
2019-10-30 23:03:13
136
原创 定位
定位定位：手动控制元素在包含块中的精准位置。涉及的CSS属性：position。position属性默认值：static ，静态定位（不定位）relative：相对定位absolute：绝对定位fixed：固定定位一个元素，只要position的取值不是static，认为该元素是一个定位元素。定位元素会脱离常规流（文档流），相对定位除外。一个脱离文档流的元素：文档流中元...
2019-10-29 23:14:19
136
原创 浮动
浮动视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动定位浮动应用场景文字环绕横向排列浮动的基本特点修改float属性值为：left:左浮动，元素靠上靠左right：右浮动，元素靠上靠右默认值为none当一个元素浮动后，元素必定为块盒(更改display属性为block)浮动元素的包含块，与常规流一样，为父元素的内容盒。盒子尺寸宽度为...
2019-10-21 23:57:10
305
原创 常规流
常规流盒模型：规定单个盒子的规则。视觉格式化模型（布局规则）：页面中的多个盒子排列规则。视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流；浮动；定位。常规流布局常规流又称文档流，普通文档流，常规文档流所有元素，默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列。包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒...
2019-10-19 17:55:07
309
原创 行盒的盒模型
行盒的盒模型常见的行盒：包含具体内容的元素a、span、strong、em、i、img、video、audio…显著特点盒子沿着内容延伸。行盒不能设置宽高。调整行盒的宽高，应该使用字体大小，行高，字体类型，间接调整。内边距（填充区）水平方向有效，垂直方向仅会影响背景，不会实际占据空间。边框水平方向有效，垂直方向仅会影响背景，不会实际占据空间。外边距水平方向有...
2019-10-19 17:07:20
178
原创 盒模型应用
盒模型应用改变宽高范围默认情况下，width和height设置的是内容盒宽高。页面重构师：将psd文件（设计稿）制作静态页面。衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则使用的是内容盒。处理方法：精确计算（不推荐）CSS3：box-sizingbox-sizing:border-box;改变背景覆盖范围默认情况下，背景覆盖边框盒。可以...
2019-10-19 17:06:51
169
原创 盒模型
盒模型box:盒子，每个元素在页面中都会生成一个矩形区域（盒子）。盒子类型：行盒： display属性等于inline的元素。块盒： display属性等于block的元素。行盒在页面中不换行，块盒独占一行。display属性默认值为inline.浏览器默认样式表设置的块盒：容器元素、h1~h6、p常见的行盒：span、a、img、video、audio盒子的组成部分无论是...
2019-10-19 17:05:46
150
原创 属性值的计算过程
属性值的计算过程(面试有用)一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。渲染每个元素的前提条件：该元素的所有CSS属性必须有值。一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。属性计算过程简介：确认声明值：参考样式表中没有冲突的声明，作为CSS属性值。层叠冲突：对样式表中冲突的声明使用层叠规则，确定CSS属性值。比较...
2019-10-19 17:04:52
332
原创 层叠
层叠声明冲突：同一个样式多次应用到一个元素。层叠：解决声明冲突的过程，叫做层叠（权重计算）。层叠由浏览器自动处理。1.比较重要性重要性从高到低：作者样式表：开发者书写的样式1） 作者样式表中的!important样式（尽量不要在开发中添加，不便今后更改）；2） 作者样式表中的普通样式；3） 浏览器默认样式表。2.比较特殊性若比较重要性后仍存在冲突，则比较特殊性。看选择器...
2019-10-19 17:03:36
237
原创 选择器
选择器选择器：帮助精准的选中想要的元素简单选择器ID选择器元素选择器类选择器通配符选择器*，表示选中所有元素属性选择器根据属性名和属性值选中元素伪类选择器选中某些元素的某种状态，写法::hover{ color:red;}hover:鼠标悬停的状态；active：激活状态，鼠标按下状态；link:超链接未访问时的状态；visited:超链接...
2019-10-19 17:03:10
172
原创 常见样式声明
常见样式声明color元素内部的文字颜色预设值：定义好的单词三原色，色值：光学三原色（红、绿、蓝），每种颜色可以使用0-255之间的数字来表达，色值。rgb表示法：rgb(0,255,0)hex(16进制)表示法：#红绿蓝常见色：淘宝红：#ff4400/f40黑色：#000000/000白色：#ffffff/fff紫色：#f0f青色：#0ff黄色：#ff0灰色...
2019-10-19 17:01:59
263
原创 为网页添加样式
为网页添加样式术语解释h1 { color: red; background: lightblue; text-align: center; }CSS规则 = 选择器 + 声明块选择器ID选择器：选中的是对应的ID值的元素元素选择器类选择器选择器： 选中元素声明块声明块中包含很多声明（属性），每一个声明（属性），表...
2019-10-19 17:01:33
198
原创 元素包含关系
元素包含关系以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。元素的包含关系由元素的内容类别决定。例如，查看h1元素中是否可以包含p元素。百度搜索：H1 MDN 查看Permitted content总结：容器元素中可以包含任何元素；a元素中几乎可以包含任何元素；某些元素有固定的子元素，如：ul->li,ol->li,dl->dt->...
2019-10-07 21:21:38
294
原创 容器元素
容器元素容器元素：该元素代表一块区域，内部用于放置其他元素。div元素没有语义语义化容器元素header:通常用于表示页头，也可以表示文章的头部。footer:通常用于表示页脚，也可以表示文章的尾部。article：通常用于表示文章内容。section：通常用于表示文章的章节。aside:通常用于表示侧边栏（附加信息）。...
2019-10-07 21:21:12
153
原创 列表元素
列表元素有序列表ol:ordered listli:list itemol属性：1.type 编号类型‘a’ 表示小写字母编号；‘A’ 表示大写字母编号；‘i’ 表示小写罗马数字编号；‘I’ 表示大写罗马数字编号；‘1’ 表示数字编号（默认值）。Note: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条...
2019-10-07 21:20:21
269
原创 多媒体元素
多媒体元素video建议使用mp4/webm格式视频文件，使用src属性放入视频路径。进入页面后右击视频->显示控件，即可播放。默认显示控件可以使用属性：controls:控制控件的显示，取值只能为controlscontrols="controls"某些属性，只有两种状态：1.不写；2.取值为属性名。这种属性叫做布尔属性。布尔属性在html5中可以不写属性值。autop...
2019-10-07 21:19:42
317
原创 图片元素
图片元素img元素image缩写，空元素src属性：sourcealt属性：当图片资源失效时，将使用该属性的文字替代图片和a元素连用和map元素使用map:地图。子元素：area。参数：shape：形状；coords：坐标，<以图片左上角为原点，向右x增加，向下y增加>圆形: circle 三个coords参数为：圆心x、圆心y、半径（可用微信截图查看图片坐标...
2019-10-07 21:18:16
438
原创 路径的写法
路径的写法站内资源和站外资源站内资源：当前网站的资源站外资源：非当前网站的资源绝对路径与相对路径对站内资源使用绝对路径，站外资源使用相对路径。绝对路径绝对路径的书写格式：url地址：协议名://主机名:端口号/路径schema://host:port/path协议名：http、https、file主机名：域名、IP地址端口号：如果协议为http协议，默认端口号80...
2019-10-07 21:16:46
778
原创 a元素
a元素超链接href 元素hyper reference（引用）普通链接锚链接id属性：全局属性，表示元素在文档中的唯一编号编写技巧：a[href="#chapter$"]*6>{章节$}((h2[id="chapter$"]>{章节$})+p>lorem1000)*6当锚点为空的时候，会自动跳到顶部<a href="#">回到顶部<...
2019-10-05 22:41:11
326
原创 HTML实体
HTML实体实体字符， HTML EntityHTML Entity MDN实体字符通常用于页面中显示一些特殊符号。&单词；&#数字；小于号<大于号>空格 non-breaking space版权符号© ©&符号&...
2019-10-05 22:40:29
221
原创 文本元素
文本元素HTML5中支持的元素：HTML5元素周期表（http://www.xuanfengge.com/funny/html5/element/）h标题：head缩写h1~h6：表示一级标题到六级标题统称快捷键操作： h$>{$级标题}显示效果 <h1>1级标题</h1> <h2>2级标题</h2> ...
2019-10-05 21:02:36
139
原创 语义化
语义化什么是语义化每一个HTML元素都有具体含义a元素：超链接p元素：段落h1元素：一级标题所有元素与展示效果无关元素展示到页面的效果由CSS决定。因为浏览器带有默认CSS样式，所以每个元素都有默认样式。重要：选择什么内容，取决于内容的含义，而非显示效果为什么要需要语义化？为了让搜索引擎理解网页（SEO）搜索引擎：百度，Bing，Google每隔一段时间，搜索...
2019-10-05 21:00:39
397
原创 第一个网页
第一个网页Emmet 插件注释为代码阅读人提供帮助，不参与运行书写格式：<!--注释内容 -->快捷键：Ctrl+/元素其他叫法： 标签、标记<title>Document</title> <a href="http://baidu.com">Baidu</a>整体： element元素=起始标记（be...
2019-10-05 16:19:22
233
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人