随笔分类 -  CSS 基础

响应式布局 Bootstrap栅格系统
摘要：响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的； | 设备划分 | 尺寸区间 | | | | | 超小屏幕（手机）设置宽度 100% | = 768px ~ = 992px ~ = 1200px | Bootstrap 推荐使用：https://v3. 阅读全文
posted @ 2020-03-19 23:57 计算机相关人员 阅读(335) 评论(0) 推荐(0)
rem布局，less基础，媒体查询
摘要：rem 单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小； 不同的是rem的基准相对于html元素的字体大小； 比如，根元素（html）设置 font size: 12px; 非根元素设置 width: 2rem; 此时换算成px表示 24px； rem优点： 就是可以 阅读全文
posted @ 2020-03-18 00:48 计算机相关人员 阅读(437) 评论(0) 推荐(0)
flex 布局
摘要：flex 弹性布局与传统布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持情况很差 IE 11或更低版本，不支持仅部分支持 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 布局原理 flex 是 flexble Box 的缩写，意为 “弹性布局” ，用 阅读全文
posted @ 2020-03-16 00:30 计算机相关人员 阅读(216) 评论(0) 推荐(0)
移动端布局基础，流式布局
摘要：视口 视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc页面在手机上显示的问题； iOS，Android基本都将这个视口分辨率设置为980px， 阅读全文
posted @ 2020-03-15 22:41 计算机相关人员 阅读(227) 评论(0) 推荐(0)
3D转换，透视 perspective，3D呈现 transform-style，浏览器私有前缀
摘要：3D 转换 transform 3d效果是建立在已经存在视距（perspective）的情况下进行的 3D 坐标系 三维坐标其实就是指立体空间，立体空间由3个轴组成 x轴：水平向右； 注意： x右边是正值，左边是负值； y轴：垂直向下； 注意 ： y下面是正值，上面是负值； z轴：垂直屏幕； 注意： 阅读全文
posted @ 2020-03-12 19:12 计算机相关人员 阅读(332) 评论(0) 推荐(0)
transform 2D转换，animation 动画
摘要：2D转换 transform transform 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果 移动 translate 重点 定义2D转换中的移动，沿着X轴和Y轴移动元素； translate最大的有点：不会影响到其他元素的位置； translate中的半分比单位是相 阅读全文
posted @ 2020-03-08 19:21 计算机相关人员 阅读(244) 评论(0) 推荐(0)
表单，音视频，语义化标签与属性选择器，结构伪类选择器，伪元素选择器（按钮禁止点击）
摘要：HTML5简介 万维网的核心语言，标准通用标记语言的写一个应用超文本标记语言（HTML）的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为；广义的HTML是包含HTML5本身 + CSS3 + JavaScript，虽然不被所有浏览器所支持，但它是一种趋势； 新增语义化标签 注意： 1. 阅读全文
posted @ 2020-03-06 23:13 计算机相关人员 阅读(221) 评论(0) 推荐(0)
CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形
摘要：元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 特点：隐藏之后不再保留位置； visibility 可见性 visibility 设置或检索是否显示对象 特点：隐藏之后，继续保留位置； overflow 溢出 检索或设置对象的内容超出其指定高度及宽度时如何管理内 阅读全文
posted @ 2020-02-23 15:32 计算机相关人员 阅读(272) 评论(0) 推荐(0)
CSS之定位
摘要：为什么使用定位 将盒子定在某一个位置 自由的漂浮在其他盒子（包括标准流和浮动的上面） 标准流盒子在最底层 浮动盒子在中间层 定位的盒子在最上层 定位详解 定位 = 定位模式 + 边偏移 边偏移 简单说定位的盒子是通过边偏移来移动位置的； 在 css 中，通过 ，`left top bottom` 属 阅读全文
posted @ 2020-02-16 22:01 计算机相关人员 阅读(163) 评论(0) 推荐(0)
CSS之 浮动，清除浮动，书写规范
摘要：CSS 布局的三种机制 css 提供了三种机制来设置盒子的摆放位置，分别是普通流、浮动和定位； 普通流：块级元素会独占一行，从上至下；行内元素会按照顺序，从左至右，碰到边缘自动换行； 浮动：让盒子从普通流浮动起来，主要作用让多个块级元素一行显示； 定位：让盒子定在浏览器的某一个位置 css 离不开定 阅读全文
posted @ 2020-02-15 18:21 计算机相关人员 阅读(482) 评论(0) 推荐(0)
CSS之盒模型边框，内边距，外边距，阴影，圆角，表格细线边框
摘要：盒子模型 盒子模型 盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成； 盒子里面的文字和图片等元素是内容区域； 盒子的厚度 我们称为 盒子的边框； 盒子内容与盒子之间的距离是内边距； 盒子与盒子之间的距离是外边距； 标准盒子模型 盒子边框（border） 阅读全文
posted @ 2020-02-01 23:48 计算机相关人员 阅读(1194) 评论(0) 推荐(0)
CSS之特性，背景，行高，复合选择器，显示模式
摘要：css复合选择器 css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签 目的是为了选择更准确更精细的目标元素标签 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成 后代选择器 ( 重点 ) 当标签发生嵌套时 , 内层标签就成为外层标签的后 阅读全文
posted @ 2020-01-31 22:01 计算机相关人员 阅读(252) 评论(0) 推荐(0)
CSS之基础选择器，font字体
摘要：CSS 层叠样式表 HTML的局限性 html 满足不了设计者的需求 操作 html 属性不方便 html 里面添加样式带来的无尽的臃肿和繁琐 CSS 网页的美容师 让我们的网页更加的丰富多彩 , 布局更加灵活自如 css 最大的贡献就是 : 让 html 从样式中脱离 , 实现了 html 专注去 阅读全文
posted @ 2020-01-30 12:33 计算机相关人员 阅读(505) 评论(0) 推荐(0)
关于阿里妈妈字体图标，国外字体图标地址
摘要：https://icomoon.io/ 什么是icon fonts 这个实在不知道怎么描述，我的理解就是利用字体工具把Web上平时使用的图标(icons)转换成icon fonts;它可以借助CSS中的@font face嵌入网页中，用于显示icons。 为什么要这样用呢 那咱们就说一下它的优点和缺 阅读全文
posted @ 2019-08-27 15:14 计算机相关人员 阅读(691) 评论(0) 推荐(0)