mango660的博客

文章目录选择器属性选择器2 伪元素选择器3 子节点伪类选择器选择器属性选择器E[attr]拥有attr属性的元素E[type=“text”]拥有attr属性且值为text的元素E[attr~=“value”]拥有attr属性且值包含了一个value词的元素，词列表用空格分开E[attr^=“value”]拥有attr属性且值以value开头的元素E[attr$=“value”]拥有attr属性且值以value结束的元素E[attr*=“value”]拥有attr属性且值包含了一个value

iframe：框架标签在当前页面内开启新窗口。scrolling：是否有滚动条，值为yes(有)/no(无)，默认为auto(需要的时候出现)frameBorder：是否有边框，值为正整数，默认为1，值为0时无边框src：打开的页面地址width/height：嵌套页面区域的宽高name：值可以作为atarget属性的值，使a的跳转方式为框架优点：解决加载缓慢的第三方内容图标和广告等的加载问题；无刷新文件上传；跨域通信缺点：会阻塞主页面的onload事件；无法被一些搜索

文章目录盒模型阴影和背景6.1 盒模型阴影6.2 盒模型背景盒模型阴影和背景6.1 盒模型阴影box-shadow:[inset] x y blur [spread] color,… (x、y、blur和color同文字阴影)[inset]：投影方式(默认为外投影，inset为内投影)[spread]：扩展阴影半径(先扩展原有形状，再开始画阴影)div{ width: 200px; height: 200px; margin: 0 auto; backgrou

文字书写和文字阴影文章目录文字书写和文字阴影1. 文本多列2. 文字书写方向3. 文字阴影1. 文本多列文本多列：将文本内容设计成像报纸一样的多列布局，集合样式columncolumn-width：指定列的宽度column-count：要分的列数column-gap：列之间的距离column-rule：栏目间隔线由(类似边框的复合样式width、color和style)p{ /* width: 800px; */ border: 2px solid fuchsia;

CSS组合选择器后代选择器：选取某元素的后代元素div p{ color: red;}子元素选择器：只能选择作为某元素直接/一级子元素的元素。div>p{ background-color:yellow;}相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素。p{ display: inline-block; width: 200px; height: 80px; background-color: chartreu

三栏式布局文章目录三栏式布局1. 用calc函数实现三栏式布局2. 双飞翼布局3. 圣杯布局两边盒子固定宽度，中间盒子自适应的布局。1. 用calc函数实现三栏式布局<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div></div>.wra

三、表单1. form 表单form标记：表单元素的容器，属性action、methodaction属性：表单处理服务器，完整格式(协议的名称必须写)method属性：表单的提交方式(post和get)GET 方法，浏览器会与表单处理服务器建立连接，然后在传输步骤中发送所有的表单数据(key=value的格式)：浏览器会将数据直接附在表单的 action URL(Uniform Resource Locator，统一资源定位符，俗称网络地址) 之后，URL和数据间用问号进行分隔POST 方法

BFC文章目录BFC1. 自适应两栏式布局2. 防止外边距折叠3. 问题BFC(Block fomatting context)即"块级格式化上下文"。是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。Box是CSS布局的对象和基本单位，不同类型的Box，会参与不同的Formatting Context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。display 属性为 block, list-item, table

居中文章目录居中1. 文字、内联元素、内联块元素在父元素居中2. 区块元素在父元素中居中3. 练习1. 文字、内联元素、内联块元素在父元素居中文字、内联元素居中。父元素设置：text-align: center;`` line-height: height;.parent{ width: 500px; height: 400px; background-color: cadetblue; margin: 0 auto; text-align: cente

文章目录22. 定位22.1 相对定位22.2 绝对定位22.3 粘性定位23. 变形24. 居中22. 定位position_MDNstatic：无定位(默认值)元素出现在正常的流中(忽略偏移值样式：top, bottom, left, right 和层级样式：z-index样式)按照文档的流式(flow)定位，将元素放到一个合适的地方。流式定位能很好的自适应各种布局，取得相对较好的布局效果inherit：继承父元素的定位方式22.1 相对定位relative：相对定位仍然

20. HTML5结构标记header(双标签)：页眉，用于页面的头部的信息介绍或者板块头部footer(双标签)：页脚，用于页面的底部或者版块底部section(双标签)：版块，用于划分页面上的不同区域，或者划分文章里不同的节，属于article的一个部分hgroup(双标签)：页面上的一个标题组合，一个标题和一个子标题，或者标语的组合nav(双标签)：导航，包含链接的的一个列表article(双标签)：用来在页面中表示一套结构完整且独立的内容部分，可以用来呈现论坛的一个帖子，杂志或报纸中的

文章目录15. 浮动问题补充16. 样式初始化17. 隐藏元素的方法18. 百分比单位19. 最大最小宽高15. 浮动问题补充table在布局时也可以拥有漂亮的颜值，但却有以下的缺点：太深的嵌套，如table>tbody>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了代码量灵活性差，比如要将tr设置border等属性，是不行的，得通过td代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱混乱的colspan与rowspan

今日事，今日毕文章目录11. 内敛块元素间隙问题12. 浮动12.1 溢出问题12.2 浮动问题及解决12.3 等高队列练习12.4 商品排列练习13. 列表14. 导航练习11. 内敛块元素间隙问题虽然img和input都是内联元素，但是他们表现的是内联块元素的效果：可以和非区块元素在同一行显示支持所有的样式不设置宽高的时候由内容(文字图片等)撑开换行符会被解析由于内联块会解析换行符，因此用内联块布局的时候两个相邻的元素间会出现空格，不利于我们计算布局，如何去掉内联块之间的空格

文章目录8. 伪类选择器9. 伪元素选择器10. 练习学的越多，没学的越多；永远不要停下前进的脚步。8. 伪类选择器状态行伪类：a:link—选择a元素中未被访问的链接a:visited—选择a元素中已被访问过的链接a:hover—选择a元素中鼠标指针位于其上的链接a:active—选择a元素中活动的链接(正在击中)<div></div><a>我是没有链接的a</a><a href="">我是有链接的a</a>

人总会被某一瞬间的情感和生活瞬间点醒一些纠结了好久没有答案的事情。WEB静态页面文章目录WEB静态页面1. HTML（超文本标记语言）1.1 标记的属性和规范1.2 PS测量2. 盒模型3. 元素的种类前端：狭义：前端工程师使用HTML\CSS\JS等专业技能和工具将产品UI设计稿是现成网站产品广义：所有用户终端产品与视觉和交互有关的部分网站和网页：网站指整站（即项目）网页指单个页面主页和内页：主页 index.html通过主页可以跳转至内页前端页面根据功能可以分为三层

快捷键CTRL + Z 撤销CTRL + Y 重做盒模型组成内容（content）、内填充（padding）、边框（border)、边界/外边距（margin）content：盒子内容，元素内容的区域，此区域的宽和高由css样式的width和height构成padding：内填充，元素内容和边框之间的区域，有上下左右4个方向border：边框，就是元素的最外层结构，有上下左右4个方向margin：外边距，该元素与其他元素之间的间距，有上下左右4个方向盒模型宽

选择器通用**{font-size:12px;}标签idclass后代选择器/子选择器/并列选择器 and so on元素分类块级元素设置 display:block 将元素显示为块级元素< div> 、< p>、< h1>、< form>、 < ul> 、 < li>特点每个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块级元素独占一行）元素的 高度、宽度、行高以及顶和底边距

列表标签列表（有序列表ol、无序列表ul）组合标签 ul li (空格指的就是父级下的子级）收获快捷键 ul>4*li (table键0显示出来的内容前面出现的实心小圆点是默认样式ps:任何一个元素写完后，在页面呈现出的结果是默认样式默认样式超链接本身就有三大默认样式 ： 小手 下划线 颜色有序列表超过27时： AA AB ACcenter 居中标签表格table 表格里面th标题列 td 内容列 tr 行cellspacing 外间距 单元格与单元格之间的空隙

简介HTML：超文本标记语言CSS：层叠样式表JAVASCRIPT：脚本语言主要用提供动态的网站效果收获标签marquee 标签简称：跑马灯<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>xzy_01&lt...

问题addEventListener() 与 document.getElementById(‘root’).onclick = function() {}; 区别addEventListener()事件链接分享问题回答wqhwindow.addEventListener('load',{ console.log(1); setTimeout( function(){ co...

问题var 、 let、 const 都可以用来声明变量，那么它们的区别是什么？思考思路变量的数据类型（数字，字符串，数组 and so on)变量的作用域 ( 全局 or 局部 or 某个代码）声明后变量的数据类型有什么不同？声明后变量的作用域有什么不同？区别探索之路数据类型// 声明数字有何不同var n1 = 10;let n2 = 10;const ...

几种元素消失的属性display: none; 元素消失,不占位。visibility: hidden; 元素消失,占位。opacity: 0;透明度设为0,元素看不见,占位。width: 0;宽度设为0 ,元素看不见,不占位。问题transition与display搭配使用时，会导致过渡消失，直接呈现或者消失元素可能是transition过渡不支持display的改变，直接...

在制作页面的时候，有时我们需要将li的内容进行横向排版，在设置li标签display:inline-block;属性后，li之间出现大约8px的空白间隙，这是怎么回事呢？如该图所示上图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...

文章目录JavaScript基础JavaScript介绍JavaScript实现JavaScript输出JavaScript语法JavaScript注释JavaScript变量JavaScript数据类型JavaScript 语法JavaScript运算符JavaScript条件语句JavaScript循环语句JavaScript跳转语句JavaScript 函数了解函数定义函数函数调用带参数的函...

文章目录什么是浏览器内核？内核分类Trident(IE内核)Gecko(firefox)webkit(Safari)Chromium/Blink(chrome)Presto(Opera)常用浏览器最新版本内核什么是浏览器内核？浏览器 = shell + 内核其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏 等。主要是提供给用户界面操作，参数设置等...

CSS介绍CSS基础语法CSS高级语法CSS派生选择器CSSid选择器CSS类选择器CSS属性选择器

VUE :模板搭建，简单，能用就行REACT：大型应用程序，同时适用于WEB端和原生APP的框架，最大生态圈FIS：前端工具框架百度：fis，多页面转化淘宝：前端图片加载水池效果：H5为什么学习HIML5?跨平台运行硬件要求低flash之外的选择软硬件环境硬件（双核、2G内存）软件（windows\Mac OS X、Linux)介绍HTML5描述网页的一...