CSS
文章平均质量分 92
吃不到棒棒糖的小熊
今天不学习,明天变垃圾
展开
-
CSS — 像素、视口、移动端、响应式布局
目录一、像素二、视口(viewport)三、移动端四、响应式布局&媒体查询一、像素屏幕是由一个一个发光的小点构成的,这一个一个的小点就是像素分辨率:1920*1080 说的就是屏幕中小点的数量在前端开发中像素要分成两种情况讨论:CSS像素和物理像素 物理像素:上述所说的小点点就属于物理像素CSS像素:编写网页时,我们所用的像素都是CSS像素浏览器在显示网页时,需要...原创 2022-01-19 23:17:36 · 617 阅读 · 0 评论 -
CSS — Flex布局、弹性容器、弹性元素
目录一、flex(弹性盒、伸缩盒)二、弹性容器 1.flex-direction 2.flex-grow 3.flex-shrink 4.flex-wrap 5.flex-flow 6.justify-content 7.align-content 8.align-items三、弹性元素 1.order 2.flex-grow 3.flex-shrink 4.flex-basis 5.align-self 6....原创 2022-01-19 14:31:58 · 1943 阅读 · 0 评论 -
认识Less、Less的语法
目录一、初识Less二、Less的语法1.注释2.变量3.父元素4.扩展5.混合函数6.less中的运算7.引入less文件一、初识Lessless是一门CSS预处理语言less是一个CSS的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多新的特性,像对变量的支持、对mixin的支持...less的语法大体上和css一致,但是less中添加了许多对css的扩展,...原创 2022-01-18 23:27:25 · 779 阅读 · 0 评论 -
CSS — 过渡、动画、变形
目录一、过渡(transition) 1.transition-property 2.transition-duration 3.transition-timing-function 4.transition-delay二、动画 1.关键帧 2.animation-name 3.animation-duration 4.animation-delay 5.animation-iteration-count 6.animation-dire...原创 2022-01-18 19:31:24 · 197 阅读 · 0 评论 -
CSS — 表格 和 表单
目录一、表格 1.表格介绍 2.长表格 3.表格的样式二、表单一、表格 1.表格介绍在现实生活中,我们经常使用表格来表示一些格式化的数据,如课程表,人名单等等。 同样,在网页中也需要使用表格,通过table标签来创建一个表格。在table中使用tr表示表格中的一行,有几个tr就有几行在tr中使用td表示一个单元格,有几个td就有几个单元格rowspan纵向合并单元格...原创 2022-01-18 00:03:29 · 977 阅读 · 0 评论 -
CSS — 字体和背景
目录一、字体 1.color 2.font-size 3.font-family 字体族(字体的格式) 4.font-face 5.图标字体(iconfont) 6.行高(line height) 7.字体的简写 8.文字的样式 (1).text-align 文本的水平对齐 (2).vertical-align设置元素垂直对齐的方式 (3).text-decoration 设置文本修饰 ...原创 2022-01-17 20:54:21 · 1060 阅读 · 0 评论 -
CSS — 相对定位、绝对定位、固定定位、粘滞定位
目录定位(position) 1.相对定位 2.绝对定位 3.固定定位 4.粘滞定位 5.绝对定位元素的布局 (1).水平布局 (2).垂直布局 6.元素的层级定位(position)定位是一种更加高级的布局手段,通过定位可以将元素摆到页面的任意位置,使用position属性来设置定位。可选值:static 默认值,元素是静止的没有开启定位 relative 开启元素的相对定位 absolute...原创 2022-01-16 23:02:22 · 1073 阅读 · 0 评论 -
CSS — 浮动、高度塌陷及其解决方法、BFC、清除浮动
目录一、浮动 1.float属性 2.浮动的特点 3.其他特点二、高度塌陷问题和BFC 1.高度塌陷问题 2.BFC(Block Formatting Context)块级格式化环境 (1).元素开启BFC后的特点 (2).通过一些特殊方式开启元素的BFC三、清除浮动四、高度塌陷的解决 1.通过伪元素解决 2.通过clearfix类解决一、浮动通过浮动可以使一个元素向其父元素的左侧或右...原创 2022-01-16 18:21:33 · 743 阅读 · 1 评论 -
CSS — 盒子的水平和垂直布局、外边距的折叠、行内元素盒模型、浏览器默认样式、盒子的尺寸、轮廓和圆角
目录一、盒子的水平布局二、盒子的垂直布局三、外边距的折叠 1.兄弟元素 2.父子元素四、行内元素盒模型 1.display 2.visibility五、浏览器默认样式六、盒子的尺寸七、轮廓和圆角 1.box-shadow 2.outline 3.border-radius一、盒子的水平布局元素在其父元素中水平方向的位置由以下几个属性共同决定: margin-left, border-l...原创 2022-01-15 21:35:48 · 497 阅读 · 2 评论 -
CSS — 文档流、盒模型
目录一、文档流(normal flow) 1.块元素 2.行内元素二、盒模型 1.边框 (1).border-width (2).border-color (3).border-style (4).border简写属性 2.内边距(padding) 3.外边距(margin)一、文档流(normal flow) 网页是一个多层的结构,一层摞着一层。通过CSS可以分别为每...原创 2022-01-15 20:49:43 · 83 阅读 · 0 评论 -
CSS — 样式的继承、选择器的权重、长度和颜色单位
目录一、样式的继承二、选择器的权重 1.样式的冲突 2.选择器的权重三、长度和颜色单位 1.长度单位 (1).像素 (2).百分比(3).em (4).rem 2.颜色单位 (1).使用颜色名设置 (2).RGB值 (3).RGBA值 (4).十六进制的RGB值 (5).HSL值 & HSLA值一...原创 2022-01-14 22:17:04 · 558 阅读 · 2 评论 -
CSS基础——CSS应用、CSS语法、CSS选择器
一、什么是CSS原创 2021-10-15 18:04:00 · 234 阅读 · 0 评论