wyzhang0214-CSDN博客

原创 CSS 响应式设计之媒体查询

文章目录响应式设计媒体查询media-typemedia-feature-rule宽和高朝向使用指点设备更复杂的媒体查询响应式设计页面内容能够适应不同大小的屏幕媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries最简单的媒体查询语法：@media media-type and (media-feature-rule) { /* CSS rules go here */}它的组成部分是：一个媒体类型，告诉

2021-03-22 21:58:32 202

原创 CSS 布局

文章目录正常布局流弹性布局网格布局浮动定位技术表格布局多列布局正常布局流正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。出现在另一个元素下面的元素被描述为块元素，块元素内容的布局方向被描述为块方向。(块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。)出现在另一个元素旁边的元素叫内联元素，就像是段落中的单词一样。对应的内联方向是内联内容(如句子)的运行方向。使用特定的布局技术会

2021-03-22 16:56:22 109

原创 CSS 让盒子内外边距大小相同

当使用百分数设置margin和padding时，使用相同的数值，可让盒子内外边距大小相同。这是因为当你用百分数设定内外边距的时候，值是以内联尺寸进行计算的，即对于左右书写的语言来说的宽度。例如：<div class="box"> I have margin and padding set to 10% on all sides.</div>.box { border: 5px solid darkblue; width: 300px; margin: 10

2021-03-21 21:38:36 337

原创 CSS溢出

文章目录溢出overflow属性溢出当使用width，height等设置了盒子的大小之后，放到里面的东西太多，可能就会发生溢出。overflow属性overflow属性的各种值默认值是visible;如果想在溢出的时候将内容直接隐藏掉，那么就要设置为overflow:hidden；如果想加个滚动条，就要设置为overflow:scroll；无论内容是否溢出，滚动条都会在。也可以在某一个方向上设置滚动条，overflow-x:scroll; overflow-y:scroll;；另外对一个

2021-03-21 21:32:52 398 1

原创 CSS 盒模型

文章目录分类盒模型的各个部分标准盒模型替代(IE)盒模型使用调试工具来查看盒模型盒模型（box-model）分类块级盒子(Block box)和内联盒子(Inline box)块级盒子的表现形式：每个盒子都会换行；盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下意味着盒子会和父容器一样宽；width和height属性可以发挥作用。内边距(padding), 内边距(margin)和边框(border)会将其他元素从当前盒子周围推开。<h1&g

2021-03-21 20:38:21 100 1

原创 CSS选择器

文章目录选择器元素、类和ID选择器属性选择器伪类与伪元素伪类伪元素组合器选择器后代选择器(空格)子选择器(>)相邻兄弟选择器(+)通用兄弟选择器(~)选择器选择器是CSS规则的第一部分。选择器选择的元素，叫做“选择器的对象”元素、类和ID选择器/*元素选择器*/h1 { }/*类选择器*/.box { }/*id选择器*/#unique { }/*通配选择器*/* { }属性选择器根据一个元素上的某个标签的属性的存在以选择元素：a[title] { }根据

2021-03-21 17:15:25 108

原创 CSS 浏览器兼容

在旧的浏览器中，可能会出现一些设置方法不被接收的情况，比如css3新增的calc()方法，那么可以在设置的时候，设置两个属性，不被接收的那个就被旧式浏览器自动忽略了，如果在新式浏览器中，下面一行就把上面的设置覆盖了。如：.box { width: 500px; width: calc(100% - 50px);}...

2021-03-21 15:45:55 44

原创 CSS 函数与@规则

目录函数calc()函数rotate()函数@规则@media@import函数calc()函数可以使用calc函数进行值的计算。.box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white;}rotate()函数进行旋转。.box { margin: 30px; width: 100px; height: 100px; backgro

2021-03-21 15:18:00 118

原创 CSS颜色

目录CSS颜色分类HEXRGB / RGBAHSL / HSLA颜色关键词CSS颜色分类HEX（十六进制）RGB/RGBAHSL/HSLA颜色关键词HEX每对值表示一个通道——红色、绿色和蓝色，由#后面带6个十六进制的数表示，每个十六进制数字都可以是0到f之间的16个数中间的一个，那么每个通道也就是两个十六进制数的组合就有16*16=256个选择。如这种表示：#02798b#000000表示黑色 #ffffff表示白色3个通道使用相等的值是从黑到白之间的各种灰色值。#ff000

2021-03-21 14:34:45 208

原创 CSS基础

目录什么是CSSCSS规则集多元素选择不同类型的选择器字体和文本一切皆盒子更改页面颜色文档体格式设置定位页面主标题并添加样式图像居中什么是CSSCSS(Cascading Style Sheet, 层叠样式表)，同HTML(标记语言)一样不是真正的编程语言，而是一门样式表语言，是用来为网页添加样式的代码，还可以给页面添加动画。CSS指定文档（一份文档是由标记语言组织起来的文本文件——HTML是常用的标记语言，还有其他的如SVG和XML）如何显示给用户。在html文档中引入css文件：<link

2021-03-21 11:36:34 73

原创 HTML-标签列表(比对 HTML5/HTML 4.01/XHTML )

摘抄自：https://www.w3school.com.cn/tags/html_ref_dtd.asp下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素，以及它们会出现在什么文档类型 (DTD) 中：标签HTML5HTML4.01/XHTML 1.0Transitional Strict FramesetXHTML1.1<a>YesYes Yes YesYes<abbr>Yes

2021-03-20 21:32:21 94

原创 HTML-文档布局

目录文档布局br换行，hr水平分割线文档布局一个网页中，常见的布局为：页眉导航栏主内容侧边栏页脚在HTML中，分别对应五个元素：<header>:页眉<nav>：导航栏<main>：主内容，通常可以包括<div>, <section>, <article>等等<aside>:侧边栏，经常嵌套在<main>中<footer>:页脚标签的选择，最好按照语义来，比如章节

2021-03-20 20:49:11 119

原创 HTML-一些自己不常用但很有用的标签

记录一些自己不常用的标签目录blockquoteqabbraddresssup subcode pre var kbd samptime完整的标签列表 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Elementblockquote<blockquote>块级引用元素，表示的是其中的文字是引用的内容。通常在渲染的时候，可以使用CSS 的margin-left以及margin-right加一些缩进。如果引文来源于网络，那么可.

2021-03-20 20:10:59 234

原创 HTML-指向文档片段的超链接

指向文档片段的超链接给需要指向的文档元素加一个属性:id<h2 id="doc">文档片段</h2>文档片段在<a>标签的href属性中使用该id<p>在这里链接到 <a href="test.html#doc" id="doc">文档片段</a> </p>在这里链接到文档片段注：关于指向外部文档的超链接，MDN上的提示：从上面的描述中，您可能认为始终使用绝对链接是一个好主意；毕竟，当页面像

2021-03-20 17:39:18 397

原创 HTML-标题，段落，列表，文字强调

目录标题段落列表无序列表有序列表嵌套列表自定义列表文字强调标题标题元素标签有：<h1>: 主标题<h2>: 二级子标题<h3>: 三级子标题…<h6>段落<p>列表无序列表<ul> <li>豆浆</li> <li>油条</li> <li>豆汁</li> <li>焦圈</li></ul>

2021-03-20 17:10:19 341

原创 HTML——＜head＞标签

@[TOC]目录<head>标签里有什么? Metadata-HTML中的元数据什么是HTML头部元素？<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习内容参考MDN</title> </head> <body> <p>这是我的页面</p> </bod

2021-03-20 16:33:52 397

原创 HTML基础

什么是HTMLHTML(HyperText Markup Language, 超文本标记语言)不是一门编程语言，是一种用来告知浏览器如何组织页面的标记语言。由一系列的元素组成，一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。下面对一个HTML元素进行剖析：这个元素的主要部分有：开始标签(Opening tag)：包含元素的名称(上面的例子是p),被左右圆括号所包围。表示元素从这里开始或者开始起作用——在本例中表示段落由此开始。结束标签(Closing tag):

2021-03-20 15:35:34 142

转载 vue渐进式

转载文章，原文来自： Vue的渐进式理解引言Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意

2021-03-20 11:42:33 431

wyzhang0214的博客