HTML+ CSS 学习笔记
关注
分享
扫一扫
HTML + CSS 学习过程中的笔记总结
believealone
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS 2D/3D变化篇
2D变换transform 元素的变换transform的2D变化的值平移 translate 能使元素的位置发生移动 1.1 translateX(偏移值x) 沿x轴方向平移 1.2 translateY(偏移值y) 沿y轴方向平移 1.3 translate(偏移值x， 偏移值y) 沿x和y轴方向平移缩放 scale 本质上缩放的是坐标轴的单位长度。产生的效果： 尺寸不修改的 情况下， 放大缩小元素原创 2020-07-05 22:53:34 · 239 阅读 · 0 评论 -
CSS nth-child/nth-of-type选择器+overflow / BFC篇
nth-child选择器语法：选择器:nth-child(公式) { }1. 选择器E:nth-child(大于0的整数number) { }找到选择器E表示的元素的父级里第number个子元素, 且保证该子元素的类型是E选择器类型的.例：ul li:nth-child(2) { background-color: red; } 2. 选择器E:nth-child(2n+1) { }原创 2020-07-05 22:50:03 · 587 阅读 · 0 评论 -
CSS Viewport+背景图/蒙版篇
Viewportviewport直译"视窗, 视口, 视区" 在移动端展示网页时需要使用默认情况下如果不去设置viewport, 直接把一个pc端的网页在移动端显示, 整个页面挤在很小的窗口里viewport: 是一个虚拟的窗口, 通常情况下 整个虚拟的视窗的宽度要远远大于移动设备的宽度, 这样, 就不用将这个网页塞进移动端的屏幕里, 可以让其在整个虚拟的(大了很多)窗口里显示. 内容不会被压缩, 用户可以通过滑动屏幕去看网页的不同部分 如果不设置viewport, 默认绝原创 2020-07-05 22:47:21 · 499 阅读 · 0 评论 -
CSS 弹性布局篇
弹性布局弹性布局是一种全新的布局方式 我们之前的传统布局, 基于盒模型, 依赖display + position + float. 但是我们之前的处理方式对于某些布局, 排布起来不是特别方便, 比如: 元素的垂直居中 Flex布局是W3C推出的一种新的布局方案, 可以 简便, 完成, 响应式的实现各种页面布局, 目前, flex布局已经适配与所有浏览器 基于盒模型 + flex布局flex的基本概念: 1. 容器(flex con原创 2020-07-05 22:45:37 · 347 阅读 · 0 评论 -
CSS 动画篇
过渡动画css动画 都是针对于元素的css样式实现的动画效果transition 所需的必须条件 1. 对哪个css样式执行动画 2. 动画的运动时间 3. css样式最终要变化到的值transition 过渡动画与transition动画有关的css样式 1. transition-property 要对哪个css样式做动画 (以后建议用all代替精确值) 2. transition-duration原创 2020-07-05 22:43:57 · 259 阅读 · 0 评论 -
CSS 多列布局篇
多列布局column 1. column-count 最大列数 2. column-width 最小列宽度 3. columns 以上两个样式的合写 4. column-gap 列间距 5. column-rule 分割线样式(列与列之间) 6. column-span 是否允许元素跨列显示eg：<!DOCTYPE html><html&g原创 2020-07-24 00:52:01 · 165 阅读 · 0 评论 -
CSS H5新特性标篇
H5 新特性标签HTML5的新特性： 1. 新添加了一些标签 2. 新增本地持久化的功能（localStorage） 3. 新增音频，视频标签 4. 新增了绘图标签（canvas） 新标签 功能性 不是很突出 语义化 很突出 语义化： 一个标签的最合适的适用场景H5 标签mark标签 双标签 标记标签为字符加背景色，默认黄色meter标签原创 2020-06-29 00:05:41 · 277 阅读 · 0 评论 -
CSS 伪元素+媒介查询篇
伪元素伪元素:伪元素与伪类选择器没有关系伪元素区别于普通的html元素, 其是没有对应的标签的适用场景： a. 如果仅仅是装饰效果, 并且没有一个比较好的语义化标签来实现这个效果 , 可以考虑伪元素实现 b. 如果我们书写标签的原因不是为了展示该标签, 而仅仅是为了解决其他元 素造成的问题. 可以考虑使用伪元素实现（例如清除浮动流）伪元素没有标签名, 那么我们就没办法直接找到它, 我们是通过其父级, 找到并设置伪元素的. 伪元素 ::after和::before (原创 2020-06-29 00:01:46 · 3317 阅读 · 0 评论 -
CSS 表格+流式布局+怪异盒模型篇
表格注：个别属性已被废弃，通过css实现表格的列宽度 由当前列里最宽的单元格决定table 表格标签 双标签一个完整的表格由3部分组成 1. 表头 thead标签 2. 内容 tbody标签 3. 表尾 tfoot标签这三个部分并不都是一个必须所写的标签, 只有tbody，如果不写tbody, 系统甚至会为我们自动添加一个tr，th，td一个表格是一行一行展示的 行 tr标签每一行是由一个一个的单元格组原创 2020-06-27 14:37:38 · 433 阅读 · 0 评论 -
CSS 隐藏+对齐+表单篇
对齐问题text-align: 是控制行元素的水平对齐方式vertical-align: 控制行元素的垂直方向的对齐方式基线行元素默认情况下在垂直方向上的对齐方式: 基线对齐 baseline基线： 基线的位置是不固定的在文本类的匿名元素中, 基线的位置是字符x的下边缘在img元素中, 基线的位置是图片的下边缘在inline-block的元素中, 分两种情况:３.１ 如果该元素中有行元素, 基线就以其内部最后一行的行元素的基线为准３.２ 如果该元素中没有行元素,原创 2020-06-27 14:35:52 · 376 阅读 · 0 评论 -
CSS em、rem+圆角篇
em和rempx单位： html的尺寸单位em和rem 也是html里的尺寸单位， em和rem的计算是相对于px的， 最终会被换算成pxem: 一个em单位指的是当前元素的font-size值rem: 一个rem单位指的是根元素（html元素的）font-size， 与其他元素没有关系font-size指的是当前元素的文字大小注意： 一个元素的font-size值是会被继承的。（子元素如果不设置font-size， 其font-size继承于父元素）注意事项原创 2020-06-27 14:34:55 · 271 阅读 · 0 评论 -
CSS 伪类+定位+display篇
伪类:注:注意事项: 如果将来需要给某个元素添加以上四个伪类中的若干个(不止一个), 在书写css样式的时候, 从上到下的顺序按照: link->visited->hover->active “爱恨原则” LoVe-HAte伪类选择器伪类选择器是一种虚构的状态或者是一个具有特殊属性的元素可以使用的css选择器 伪类选择器不需要实现设置对应的类值, 系统已经为几乎所有的元原创 2020-06-23 09:23:40 · 876 阅读 · 0 评论 -
CSS 浮动篇
CSS 浮动篇注：浮动布局适用场景: 用于实现多个块级元素的横向布局文档流: 默认状态下文档中元素所处的位置浮动元素的特点: 1. 浮动(float)的值有两个: 左浮动(left)和右浮动(right); 2. 设置了浮动的元素, 其默认大小由内容撑出; 3. 设置了浮动的元素, 可以设置宽高 4. 设置了浮动的元素, 水平浮动, 直到遇到另外一个浮动元素或者父级的边框停止.原创 2020-06-20 15:05:17 · 153 阅读 · 0 评论 -
HTML 盒模型+边距篇+垂直居中
HTML 盒模型+边距篇，padding 内边距* 设置padding* 1. 分别设置某个方向的padding* padding-方位词* 方位词: top bottom left right* 2. 合写* padding:* 一个值 表示: 四个方向都设置同一个值* 两个值 表示: 上下 + 左右* 三个值 表示: 上 + 左右 + 下* 四个值 表示: 上 + 右 + 下 + 左* 如果有某个方向的值不需要设置, 可以原创 2020-06-20 15:04:24 · 351 阅读 · 0 评论 -
CSS 文字篇
CSS 文字篇字体类型 font-family<!doctype html><html><head><meta charset="utf-8"><style type="text/css">.serif { font-family: "Times New Roman", Times, serif; }.sans-serif { font-family: Arial, Helvetica, sans-serif; }.monos原创 2020-06-17 15:41:33 · 418 阅读 · 0 评论 -
HTML-Day-1 初识HTML
Day-1html hyperText markup language 超文本标记语言标签中的“/”为结束符国家标准第2321条（简体中文编码字符集含亚裔字符）：gb2312国家标准扩展版本（包含了亚裔字符和繁体字符集）：gdk万国码：unicode通用字符编码（万国码升级版）：utf-8< html lang=“en” >lang=“en”,告诉搜索引擎爬虫，网站关于什么内容的，除English外其他为中文拼音首字母缩写属性名不加双引号，属性值必须原创 2020-06-16 08:41:00 · 205 阅读 · 0 评论 -
CSS-Day-4 文字溢出，背景图片处理，导航栏，淘宝页图片超链接
Day-4注：行级元素只能嵌套行级元素块级元素可以嵌套任何元素，有个例。<p></p>标签内不可以嵌套块级元素，一旦嵌套会被截断x形成以下样式<p> </p> <div></div> <p> </p>凡是带有inline的，就都带有文本类元素的特点。就像多张图片并列会有空格，只要删除<img>之间的空格就可以解决了,因原创 2020-06-09 09:47:43 · 294 阅读 · 0 评论 -
CSS-Day-3 浮动流，margin塌陷，伪元素
Day-3注：真正的两栏布局必须不能有重叠正常模式下区域不能共用凡是设置了position:abolute; float:left/right; 的，系统会自动从内部把元素转换成inline-block元素CSS属性opacity 透明度.div{ width:100px; height:100px; opacity:0.5; background-color:#fcc; }div中的粉色方块儿变为了半透明overflow：hidd原创 2020-06-07 21:17:17 · 288 阅读 · 0 评论 -
CSS-Day-2 选择器，盒子，层，权重，css引入方法
Day-1原创 2020-06-06 20:42:30 · 333 阅读 · 0 评论