CSS
文章平均质量分 82
boboluotou
前端小白的进阶之路。
展开
-
浮动
文章目录1什么是浮动2 怎样就是浮动3 为什么清除浮动4 清除浮动方法4.1 额外标签法4.2 父级添加overflow属性4.3 使用after伪元素4.4 使用before和after双伪元素1什么是浮动浮动最开始出现的意义是为了让文字环绕图片,后来发展着发现浮动可以让多个块级元素并排显示,这样子很方便只需要一个属性。到这里肯定有人会问了,那我把display属性设置为inline-block不也能达到效果,为啥还用浮动。那有没有考虑过我就要这些元素从右往左排列呢哈哈哈,所以浮动可以控制居左还是居右原创 2021-02-02 14:03:57 · 136 阅读 · 0 评论 -
rem和Less
目录1 rem1.1 rem能解决什么问题1.2 rem是什么?2 媒体查询2.1 mediatype查询类型2.2 关键字2.3 媒体特性1 rem1.1 rem能解决什么问题页面布局文字能否随着屏幕大小变化而变化?流式布局和flex布局主要针对于宽度布局,那高度如何设置?怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放? 所以提出rem1.2 rem是什么? rem(root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体原创 2020-10-28 09:42:47 · 478 阅读 · 0 评论 -
下载Node.js WebStrom安装配置less
目录1 安装Node.js1.1 什么是Node.js1.2 Node.js安装1.3 查看下载是否成功1.4 安装less2 WebStrom安装配置less2.1 遇到的问题安装配置less需要下载node.js1 安装Node.js1.1 什么是Node.js 如果说Node.js是一个门编程语言,那么它几乎没有定义语言应该有的特性,因为它的语法本身,就是前端大名鼎鼎的JavaScript语言。如果说Node.js不是一门编程语言,它确实可以做所有其他后端语言,可以做的事情,它扩展了JavaS原创 2020-10-27 18:38:34 · 144 阅读 · 0 评论 -
flex布局
目录1 flex布局原理2 flex布局父项常见属性2.1 常见父项属性2.2 flex-direction2.3 justify-content 主轴2.4 flex-wrap2.5 align-items 侧轴2.6 align-content2.7 flex-flow3 flex布局子项常见属性3.1 flex属性3.2 align-self3.3 order1 flex布局原理 display:flex。 flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵原创 2020-10-25 20:50:23 · 380 阅读 · 0 评论 -
前端移动端基础
目录1 移动端基础1.1 meta视口标签1.2 背景缩放1.3 特殊样式1 移动端基础1.1 meta视口标签<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0 minimum-scale=1.0">属性解释说明width宽度设置的是viewport宽度,可以设置device-width特殊值i原创 2020-10-24 21:05:30 · 314 阅读 · 0 评论 -
CSS 2D 3D
目录1 CSS 2D转换1.1 2D转换之移动translate1.2 2D转换之旋转rotate1.3 2D转换中心点transform-origin1.4 2D转换之缩放scale2 CSS动画2.1 定义动画2.2 元素使用动画3 动画常用属性1 CSS 2D转换 同时又位移和其他属性,我们需要把位移放到最前面1.1 2D转换之移动translate 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。语法:transform: translate(x,y);原创 2020-10-24 18:57:02 · 417 阅读 · 0 评论 -
CSS3属性 模糊、过渡
目录1 图片变模糊2 CSS3 calc函数3 CSS3过渡1 图片变模糊CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素。filter:函数(); 例如:filter:blur(5px); // blur模糊处理 数值越大越模糊2 CSS3 calc函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算。width: calc(100%-80px)括号里面可以使用+ - * / 来计算。3 CSS3过渡 谁做过渡给谁加代原创 2020-10-18 22:29:21 · 602 阅读 · 0 评论 -
CSS常见布局技巧
常见布局技巧目录1 margin 负值的运用1.1 去除边框叠加加粗1.2 鼠标移动到盒子盒子变色2 文字围绕浮动元素3 行内块的巧妙运用4 CSS三角强化1 margin 负值的运用1.1 去除边框叠加加粗 边框盒子在合并时中间边框会叠加加粗。如下图所示: border: 2px solid rebeccapurple; 左移的值跟边框宽度时一致的。 margin-left: -2px;1.2 鼠标移动到盒子盒子变色 中间盒子右框线不能显示 解决方案若盒子无定位,添加相原创 2020-10-18 10:41:18 · 364 阅读 · 0 评论 -
CSS 样式部分细节处理
目录1 鼠标样式cursor2 表单轮廓线 outline3 防止拖拽文本域 resize4 vertical-align 属性应用4.1 解决图片底部默认空白缝隙问题5 溢出的文字省略号显示5.1 单行文本溢出显示省略号5.2 多行文本溢出显示省略号1 鼠标样式cursor2 表单轮廓线 outline3 防止拖拽文本域 resize4 vertical-align 属性应用4.1 解决图片底部默认空白缝隙问题5 溢出的文字省略号显示5.1 单行文本溢出显示省略号 单行文本原创 2020-10-17 19:52:35 · 245 阅读 · 0 评论 -
CSS字体图标
目录1 字体图标2 导入字体图标2.1 HTML标签内添加小图标2.2 字体图标的追加1 字体图标2 导入字体图标在CSS样式中全局声明字体:简单理解把这些字体通过css引入到我们页面中。将下列代码放入style中 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedde原创 2020-10-17 17:56:30 · 583 阅读 · 0 评论 -
CSS三角
目录1 CSS三角2 设置一个角3 京东案例1 CSS三角 三角大小由盒子边框大小决定。2 设置一个角 只需设置盒子边框为透明,设置其中一个方向为所需颜色。3 京东案例 需要一个大盒子和一个向上的三角。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS三角</title> <style>原创 2020-10-17 17:55:53 · 133 阅读 · 0 评论 -
CSS元素的显示与隐藏
元素的显示与隐藏目录1 display 显示隐藏1.1 display 隐藏属性三级目录2 visibility 显示隐藏3 overflow 溢出显示隐藏1 display 显示隐藏1.1 display 隐藏属性 display用于设置一个元素应如何显示。display: none ; 隐藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思 display 隐藏元素后,不再占有原来位置。三级目录2 visibility 显示隐藏3 overfl原创 2020-10-17 10:35:48 · 184 阅读 · 0 评论 -
CSS定位
目录1 定位2 定位模式2.1 静态定位 (了解)2.2 相对定位 relative2.3 绝对定位 absolute2.3.1 子绝父相的由来2.4 固定定位 fixed2.4.1 固定在版心右侧位置2.5 粘性定位sticky2.6 定位的总结3 边偏移4 定位拓展4.1 定位叠放次序 z-index4.2 绝对定位的盒子居中4.3 定位特殊特性1 定位 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。 定位=定位模式+边偏移。 定位模式用于指定一个元素在文档中的定位原创 2020-10-16 20:03:57 · 287 阅读 · 0 评论 -
CSS 浮动
目录1浮动1.1 为什么需要浮动?1.2 什么是浮动?1.3 浮动的特性1浮动1.1 为什么需要浮动?1.2 什么是浮动?1.3 浮动的特性原创 2020-10-14 19:31:38 · 163 阅读 · 0 评论 -
CSS盒子模型
目录1 盒子模型1.1 边框1.1.1 表格的边框细线1.1.2 内边距1 盒子模型1.1 边框 border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色。语法:border : border-width || border-style || border-color边框简写:border:1px solid red; 没有顺序边框样式:solid(实线边框)、dashed(虚线边框)、dotted(点线边框)。可以上下左右单独设置:border-原创 2020-10-13 11:04:16 · 299 阅读 · 1 评论 -
CSS的元素显示模式
目录1 元素显示模式2 元素显示模式转换1 元素显示模式 元素模式就是元素(标签)以什么方式进行显示,比如 <div><div><div>自己占一行,比如一行可以放多个<span><span><span>。 HTML元素一般分为块元素和行内元素两种类型。常见的块元素有<h1> <h6>、<p>、<div>、<ul>、<ol>、<li>&原创 2020-10-10 21:28:47 · 253 阅读 · 0 评论 -
css属性 字体、文本、背景
目录1 字体属性2 文本属性1 字体属性2 文本属性原创 2020-10-09 21:25:59 · 133 阅读 · 0 评论 -
CSS选择器
目录1 基础选择器1.1 标签选择器1.2 类选择器1.3 id选择器1.4 通配符选择器 选择器就是根据不同需求把不同的标签选出来。 选择器分为基础选择器和复合选择器两个大类 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器。1 基础选择器1.1 标签选择器标签选择器(元素选择器)是指HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。选择器可以把某一类标签全部选出来语法:标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3原创 2020-10-09 16:32:31 · 399 阅读 · 0 评论