- 博客(22)
- 收藏
- 关注
RSS订阅
1原创 CSS 布局与常规流简介
一、布局（Layout）是什么?确定内容的大小和位置的算法。 依据元素、容器、兄弟节点和内容等信息来计算。二、布局相关技术常规流 浮动 绝对定位1. 常规流Normal Flow 流：在 CSS 的常规的流里边，元素是按照某种流向去摆放的，比如从上到下、从左到右，所以常规流在许多文档里边也叫文档流，或者简称流。根元素、浮动和绝对定位的元素会脱离常规流 其它元素都在常规流之内（in-flow） 常规流中的盒⼦，在某种排版上下⽂中参与布局相关的排版上下⽂有：...
2021-11-29 18:08:12
230
原创 CSS 中的常见的值和单位
一、常见的值二、长度三、颜色 1. RGB 表示方法（由红、绿、蓝组成） 对应的表示方法（【左边】16进制表示，【右边】RGB表示方法）： 2. HSL 表示方法（由色相、饱和度、亮度组成） 3. 关键字表示方法 4. 透明度（用 α 阿尔法来表示） α 的取值范围：0~1（0 的时候完全透明，1 的时候不透明） 透明度相应的表示： ...
2021-11-28 17:10:20
443
原创 CSS 特异度、继承、求值过程简介
一、选择器特异度（Speeificity）举个栗子：1. #nav .list li a:link2. .hd ul .links a解释： 因为， 在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。 在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd与 .links）,元...
2021-11-27 19:36:24
509
原创 CSS 行盒子（行高与垂直对齐）
一、行盒内的摆放规则小贴士：大部分字母以基线（baseline）对齐。二、行级盒子高度 一个包含文字的行盒的高度由行高（line-height）决定，高度只和行高有关系。三、line box 内的盒子摆放由图可知，他们是基于基线（baseline）对齐的。解释：① 文字的基线（baseline）是字体的 baseline。 图片的 baseline 是图片下边缘。 inline-block 是...
2021-11-26 18:29:37
803
原创 CSS 盒子的效果简介
一、border-radius 圆角属性值简介 属性值写法 解释 当属性值为一个 对应的四个角都会发生变化 当属性值为两个 第一个值代表左上角、右下角； 第二个值代表右上角、左下角。 当属性值为三个 第一个值代表左上角； 第二个值代表右上角、左下角； 第三个值代表右下角。 当属性值为四个 第一个值代表左上角； 第二个值代表右上角； 第三个值代表右下角； 第四个值代表左.
2021-11-26 15:04:31
230
原创 CSS 中的盒子简介
css中的盒子 块级盒子（Block Level Box） 行级盒子（Inline level Box） 生成块级盒子 生成行级盒子，内容分散在多个行盒中 body、article、div、main、section、h1~h6、p、ul、li 等 span、em、strong、cite、code 等 display：block display：inline 不和其它盒子并列摆放 和其它行级盒子一起放在一行或拆开成多行 适用所有的盒模型属性 盒模型中
2021-11-25 17:39:11
202
原创 CSS 盒模型基础简介
1. 基础模型2. 怪异盒子模型 border-boxbox-sizing:border-box;使用box-sizing:border-box; 可以改变实际占用大小。如下图。3. margin 外边距、padding 外边距 1）margin 外边距：指定元素四个方向的外边距，取值可以是长度、百分数、auto。 外边距存在一个现象：margin collapse 边距合并（只发生在垂直方向上，垂直方向 margin 会被合并。） ...
2021-11-25 14:07:23
189
原创 CSS 设置文本样式简介
1. text-align 文字排版方向 属性值有：left：左对齐 center：居中 right：右对齐 justify：两端对齐小贴士：left 与justify 的区别，justify 两端顶点是对齐的，left 不一定能对齐。因为 justify 会自动调整空格间距使两边对齐。2. spacing 单词与单词、字母与字母之间的距离 属性有：1) letter-spacing 字母之间的距离（默认值 0）。2) word-spacing 单词之间的距离（默认值...
2021-11-24 17:47:47
131
原创 CSS 设置字体 font-family 简介
1. 语法糖font:style weight size/height family 斜体 粗细 大小/行高 字体族2. 通用字体族Serif 衬线体 Sans-Serif 无衬线体 Cursive 手写体 Fantasy 艺术体 Monospace 等宽字体3. 也可以使用 Web Fonts 设置字体4. font-size 设置字体大小 其值有关键字（small、medium、large），长度，百分百。5. font-style 设置字..
2021-11-24 16:49:31
1382
原创 CSS基础选择器简介
一、概念找出页面中的元素，以便给他们设置样式。 使用多种方式选择元素。 （1）按照标签名、类名、id。 （2）按照属性。 （3）按照 DOM 树的位置。二、基础选择器1）通配选择器 “ * ” ：它匹配页面中所有的元素。2）标签选择器：通过标签名选中一个元素。3）id 选择器：通过 “ # ” + id 属性值，可以选中。（页面中 id 值唯一）4）类选择器：通过 class 选择这个元素。如下图（abc被选中）.abc {...
2021-11-24 16:05:04
254
原创 CSS简介
一、CSS 是什么？Cascading Style Sheets 层叠样式表 用来定义页面元素的样式。如字体、颜色、位置、大小、动画效果等。二、基本构架CSS 语法https://www.w3school.com.cn/css/css_syntax.asp三、使用 CSS 的方法 1. 外链（常用，引入外部 CSS 即可）<link rel="stylesheet" href="./abcdefg.css"> 2. 嵌入（写在HTML 中）&l...
2021-11-24 11:38:55
73
原创 HTML 表单简介
表单一、<form> 标签定义：<form> 标签用于为用户输入创建 HTML 表单。二、<label> 标签定义：控件的文字说明，行内标签。小贴士：点击控件的文字说明时，input 框也会被选中。 1. <input> 标签放入<label>标签中。 2. <input> 标签加一个 id 属性与 <label> 标签中加一个 for 属性...
2021-11-23 20:47:55
643
原创 HTML 常用的多媒体标签
1.<video> 标签 1）<video> 标签：块级标签，用于放置视频。 2）src 属性——视频文件网址。 width、height 属性——播放器宽、高，单位像素。 poster 属性——封面图片URL。 preload 属性——规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。（auto - 当页面加载后载入整个视频、meta - 当页面加载后只载入元数据、none - 当页...
2021-11-23 16:46:13
2427
原创 HTML 图像标签与连接标签
一、图像标签<img> 用于插入图片，无闭合标签，行内标签。常用属性：src —— 图片地址 alt —— 图片文字说明 width、height —— 指定图片宽、高。（不建议使用，用 css 实现） loading：图片加载方式。（lazy：图像延迟加载，eager：立即加载，auto）二、链接标签1. <a> 标签 <a> 标签，点击便可以跳转。 常用属性： 1）href：放跳转的URL或锚点。锚...
2021-11-23 15:53:30
821
原创 HTML字符编码简介
一、简介 一般情况，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式。网页内部也会再次声明。二、字符的数字表示法每个字符有一个 Unicode 号码，称为码点（code point）。 码点可以用十进制、十六进制表示它们。 标签写成码点就会失效。三、实体表示法常用的有：< <> >空格 & &...
2021-11-23 12:42:51
1160
原创 URL 简介
一、概述 URL 是“统一资源定位符”（Uniform Resource Locator）。 URL 中文译为“网址”。 URL 表示各种资源的互联网地址。 二、网址的组成部分1. 协议 协议（scheme）是浏览器请求服务器资源的方法。默认协议是 HTTP 协议。 HTTPS 是 HTTP 的加密版本，出于安全考虑可以使用此协议。 HTTPS 协议和 HTTP 协议后面连接 :// 。其他协议并非如此，如邮件地址协议（mail...
2021-11-22 15:08:57
1995
原创 HTML简介
一、什么是HTML？HTML语言用于描述网页。 HTML是指超文本标记语言：Hyper Text Markup Language。 HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签。 HTML使用标记标签来描述网页。 HTML文档包含HTML标签及文本内容。 HTML文档也叫做web页面。二、实例解析<!DOCTYPE html> ---DOCTYPE声明了文档的类型。<html>
2021-11-21 14:24:15
256
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人