![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 85
简介CSS里面的一些常用的属性
梦起孟心
这个作者很懒,什么都没留下…
展开
-
JavaScript基础学习——CSS预处理Less
一、CSS预处理目前CSS预处理语言主要有:Less,SASS,Stylus等。浏览器不能编译.less/.scss/.sass/.styl等文件,在html文件引入前面这些样式文件,必须先编译成.css文件。二、在VSCode中编译less1、安装插件:按Ctrl + Shift + x,打开扩展面板,安装Easy LESS。2、修改设置文件(settings.json),在settings.json中添加如下代码: "[less]":{ "editor.sugge...原创 2021-03-15 19:29:40 · 301 阅读 · 0 评论 -
CSS基础学习——布局
一、多列1、colum-count:设置分栏<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin: 0px; padding: 0px; } p{ column-count: 3;/*分了三栏,实现了等原创 2020-08-27 22:38:34 · 262 阅读 · 0 评论 -
CSS基础学习——动画
一、CSS3 2D变形(利用Transfrom方法)1、rotate(angle)元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ width: 100px原创 2020-08-26 23:01:25 · 14634 阅读 · 0 评论 -
CSS基础学习——基本布局
一、双飞翼布局由三列组成,两端固定,中间自适应。双飞翼布局的优点:兼容性好,兼容所有主流浏览器,包括万恶的IE6,因为在DOM中center_panel在三列结构的最前面,因此可以实现主要内容的优先加载。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style>原创 2020-07-25 22:22:13 · 232 阅读 · 0 评论 -
CSS基础学习——定位position
一、定位设定元素在文档中的位置。会将标签(元素)转换为块级二、定位分类1、static:静态定位默认值,没有定位,不能设置偏移值(left/top/right/bottom),占用标准流(文档流)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2020-07-25 21:09:41 · 226 阅读 · 1 评论 -
CSS基础学习——浮动float、盒子模型
一、什么是浮动?浮动(float)就是让块级标签不独占一行。目的(使用场景):把块级标签元素可以排在一行上。二、浮动的原理就是让元素脱离文档流,不占用标准流。三、浮动的属性float:left:左浮动float:right:右浮动float:none:默认值,不浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t..原创 2020-07-20 15:20:04 · 760 阅读 · 0 评论 -
CSS基础学习——各类样式集合
一、背景1、background-color: green;背景颜色2、background-image:url(图片地址)3、background-image:linear-gradient(to bottom red blue)从上往下线性渐变4、background-image:radical-gradient(circle(表示一个圆。可以不写) red 50% blue60% yellow90%)放射性渐变5、background:blue url(im...原创 2020-07-19 15:37:50 · 962 阅读 · 0 评论 -
Emmet——帮助速写Html与CSS
在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码,这里推荐一个Emmet语法规则,可以大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍我所遇见的一些语法,会持续更新。前提,我所使用的编译软件是WebStorm注意以下所有语法写完后必须摁下tab方能执行1、生成html结构如果新建一个html文件后没有生成结构,自己又不想写可以选择以下两种方式,都可以自动生成文档结构Emmet语法为:1、!+tab2、html:5+tab效果.原创 2020-07-19 15:56:35 · 236 阅读 · 0 评论 -
CSS基础学习——格式、选择器、伪元素
目录一、CSS简介二、CSS1、格式(1)内部格式(2)外部格式2、选择器(1)标签选择器(比如p b h1各种标签)(2)类选择器 class=" "(3)id选择器 id=" "(4)优先级问题3、特别的选择器(1)后代选择器 (空格)(2)交集选择器(直接写的)(3)并集选择器 (逗号)(4)后代选择器(空格)(5)子代选择器(>)(6)相邻同辈选择器(+)(7)通用同辈选择器:(~)(8)结构伪类选择器(:).原创 2020-07-15 17:16:32 · 246 阅读 · 0 评论