前端Html+Css
关注
分享
扫一扫
主要解决前端html和Css问题
Y18.
这个作者很懒，什么都没留下…
展开
-
常见浏览器兼容性问题
前言不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容一、css兼容...原创 2022-01-12 20:48:15 · 1392 阅读 · 2 评论 -
css3和HTML5新特性
文章目录css新特性1.选择器2.背景和边框3.文本效果4.2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)H5 新特性1. h5新增特性2. 语义化标签3. 表单类型增强4. h5 新增的表单属性5. html5 新事件css新特性1.选择器常规选择器：:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:..原创 2022-01-11 16:36:09 · 88 阅读 · 0 评论 -
link与@import的区别
应用场景：<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./A.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./B.css'); .box{ width: 100px; height: 100px;原创 2022-01-11 14:10:31 · 76 阅读 · 0 评论 -
src和href的区别
区别**href**: href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。**src**:src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...原创 2022-01-11 14:03:15 · 252 阅读 · 0 评论 -
Html中的三种元素
三种元素分别是什么？都有哪些？CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容): <br> &l原创 2022-01-11 13:49:37 · 336 阅读 · 0 评论 -
三栏布局(圣杯布局、双飞翼布局)
前言圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。区别圣杯布局：为了让中间div内容不被遮挡，div设置浮动后, 将中间div设置了左右padding后，将左边的div设置相对定位position: relative配合right使用，然后左右两个div分别配合margin-left和margin-right使用，以便左右两栏div移动后不遮挡中间div。双飞翼布局：也是让中间d原创 2022-01-11 11:28:02 · 290 阅读 · 0 评论 -
Flex布局
1.什么是flex?flex布局是css3新增的一种布局方式，它大多数用于移动端，在PC端中用的比较少。在PC端中会存在一些兼容性的问题任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。父元素常见的属性1.flex-direction:; 设置主轴的方向默认主轴方向就是 x 轴方向，水平向右[从左往右原创 2022-01-11 11:22:49 · 411 阅读 · 0 评论 -
前端盒模型问题
1.什么是盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒模型分为哪两种标准盒模型：一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异盒模型：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）3.标原创 2022-01-05 16:27:07 · 120 阅读 · 0 评论 -
rem的使用及详解
rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。两种rem适配方式一、原生手写方式1. window原创 2021-12-31 16:25:21 · 1344 阅读 · 0 评论 -
关于position的知识
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性1. position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2. position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此.原创 2022-01-07 20:56:56 · 95 阅读 · 0 评论