CSS3
关注
分享
扫一扫
文章平均质量分 87
CSS3基本使用和原理解析
Bulut0907
大数据、机器学习、编程语言、IT相关技术分享, 喜欢请关注、点赞、收藏哦!
展开
-
CSS3单独制作移动端页面布局方式(响应式布局)、重绘和回流
Bootstrap基于HTML、CSS和JAVASCRIPT，有预制样式库、组件和插件，使得Web开发更加快捷中文官网：http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：https://v5.bootcss.com/原创 2024-03-18 08:28:34 · 1272 阅读 · 0 评论 -
CSS3单独制作移动端页面布局方式(rem+媒体查询+less布局、vw/vh布局、vmin/vmax布局)
CSS的缺点CSS是一门非程序式语言，没有变量、函数、scope作用域等概念。CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的不方便维护及扩展，不利于复用CSS没有很好的计算能力Less的介绍常见的CSS预处理器有：Less、Sass、Stylus。Less(Leaner Style Sheets)是一门CSS扩展语言，它并没有减少CSS的功能，而是在现有的CSS语法上，引入了变量、Mixin(混入)、运算以及函数等功能。为CSS加入程序式语言的特性，大大简化了CSS的编写。原创 2024-03-11 09:12:23 · 1241 阅读 · 0 评论 -
CSS3单独制作移动端页面布局方式(流式布局、flex弹性布局)
布局极为简单，移动端应用很广泛PC端浏览器支持情况较差，特别是IE 11或更低版本，不支持或仅部分支持为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。项目可以设置宽和高。原创 2024-03-04 09:06:44 · 1877 阅读 · 0 评论 -
CSS3移动端(介绍、Chrome DevTools、视口、倍图、backgroud-size、开发方案、CSS初始化、特殊样式)
国内的手机浏览器都是根据Webkit内核修改的，所以兼容移动端主流浏览器，处理Webkit内核浏览器即可不同型号的手机，屏幕尺寸不同、像素分辨率不同、物理像素比不同如iphone 12 pro屏幕的像素分辨率为(1170 x 2532), 正常可以显示宽1170px像素和高2532px像素的内容。但其物理像素比为3(Retina视网膜屏幕显示技术)，则只可以显示宽390px像素和高844px像素的内容，这样3个物理像素点显示1px像素会更清晰。原创 2024-02-26 09:27:39 · 1002 阅读 · 0 评论 -
CSS3新特性之animation动画、3D转换(含两面翻转的盒子案例、swiper插件)、浏览器私有前缀
近大远小物体后面遮挡不可见x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值。原创 2024-02-19 08:56:23 · 2642 阅读 · 0 评论 -
CSS3新特性之新增选择器、border-box盒子模型、滤镜filter、calc函数、过渡、2D转换
sacle缩放可以设置转换中心点缩放(默认以中心点缩放)，而且不影响其他盒子的布局。2D转换是改变元素在二维平面上的位置和形状的一种技术。横向为X轴，向右为正，向左为负；效果：鼠标放到div上，等待3秒后，div在3秒内渐渐变大。鼠标移出div，等待3秒后，div在3秒内渐渐变小。可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果。可以根据元素特定属性来选择元素。主要根据文档结构来选择元素， 常用于根据父级选择里面的子元素。当元素从一种样式，渐渐的变换为另一种样式。原创 2024-02-18 09:25:08 · 1231 阅读 · 0 评论 -
CSS3之项目实操(网站制作流程、favicon图标、TDK三大标签、LOGO的SEO优化、免费web服务器、蓝湖/摹客协作平台、使用github打开index.html)
对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员提供。上传完之后，点击查看项目，就会打开web端的页面，里面就可以直接看到图片的大小，文字的大小、颜色、内容，图片之间的间距，相关的CSS代码，切图(可以进行导出)等。”、“×××网作为……”、“电话：010……选择PS的图层，然后在PS的慕客插件标记切图，当所有需要的图层都被标记为切图时，就可以选择上传全部画板，然后点击上传，就把全部切图上传到指定分组的指定项目下面了。在PS的窗口-拓展功能-慕客，打开PS的摹客插件。原创 2024-02-05 08:44:10 · 1047 阅读 · 0 评论 -
CSS三角、界面样式(cursor、input输入边框不改变颜色、textarea拖拽不改变大小)、vertical-align、溢出文字省略号显示、CSS初始化
vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化。当我们选择input输入框，进行文字输入的时候，边框会改变颜色。textarea默认可以在右下角进行拖拽，改变输入框的大小。CSS初始化参考如下。原创 2022-11-08 09:34:47 · 1815 阅读 · 0 评论 -
CSS精灵图和字体图标的使用
浏览器客户端进行请求，加载第一个字体图标的时候，服务端就会将fonts文件夹下的4个不同格式文件，发送客户端，后面的字体图标就不需要再进行请求了。默认是选择模式，点击需要的图标进行选择，下面会进行选择的个数统计。如果以前的字体图标不够用了，需要添加新的字体图标，可以点击Import Icons将selection.json文件进行上传，里面记录了我们之前下载的字体图标信息。竖向是Y轴，向下是正，向上是负。打开属性显示框，选择矩形选框工具，对目标小图片进行框选，在属性显示框就可以看到目标小图片的位置和大小。原创 2022-11-07 10:04:52 · 694 阅读 · 0 评论 -
CSS的三种引入方式(行内样式、内部样式、外部样式)
目录1. 行内样式2. 内部样式3. 外部样式1. 行内样式<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>test title</title></head><body><div style="font-weight: 700; font-size: 50px;">盒子一&l原创 2022-01-22 22:48:19 · 2928 阅读 · 0 评论 -
CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)
目录1. 标签选择器2. class类选择器3. id选择器4. 通配符选择器1. 标签选择器<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>test title</title> <style> p { font-family: 宋体, sans-serif,原创 2022-01-23 21:37:59 · 5702 阅读 · 0 评论 -
CSS的继承性和选择器优先级
目录1. 继承性2. 优先级2.1 复合选择器权重相加1. 继承性子元素可以继承父元素中以text- 、font- 、line- 开头和color样式<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>test title</title> <style> div {原创 2022-01-23 21:39:20 · 1290 阅读 · 0 评论 -
CSS文字相关设置(大小、加粗、倾斜、颜色、居中、下划线、行高)和background背景设置
每个浏览器的默认文字大小都一样，我们给HTML的body标签设置统一的文字大小。从左上到右下，背景色从红色渐变成蓝色。必须添加浏览器私有前缀。原创 2022-01-27 21:03:45 · 21368 阅读 · 0 评论 -
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度
目录1. 盒子模型的组成1. border边框1.1 border-collapse: collapse2. padding1. 盒子模型的组成1. border边框<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>test title</title> <style> div {原创 2022-01-27 21:06:02 · 6114 阅读 · 1 评论 -
CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)
目录1. 块元素2. 行内元素3. 行内块元素4. 转换为块元素5. 转换为行内元素6 转换为行内块元素1. 块元素常见的有<div>、<ul>、<ol>、<li>、特点如下：独占一行可以设置高度、宽度、外边距、内边距宽度默认是父级的100%里面可以放行内元素或块级元素注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素2. 行内元素常见的有<strong>、<b原创 2022-01-28 21:01:38 · 4469 阅读 · 1 评论 -
CSS布局之浮动和定位
目录1. 浮动1.1 浮动元素的特性1.2 清除浮动1.2.1 额外标签法1.2.2 父盒子添加overflow属性1.2.3 父盒子添加after伪元素1.2.4 父盒子添加双伪元素2. 定位1. 浮动网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动网页布局第二准则：先设置盒子大小，再设置盒子位置1.1 浮动元素的特性任何元素都可以浮动浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置一个盒子内的元素如果一个元素浮动，则所有元素应原创 2022-02-06 14:25:20 · 4902 阅读 · 0 评论 -
前端开发小工具的使用(FSCapture、Chrome、Emmet语法、IDEA自动格式化代码、Snipaster、photoshop）
目录1. FSCapture1. FSCapture功能：支持屏幕录制、滚动截图、高清长图、图片编辑、图片转PDF格式、屏幕取色。我这里主要使用屏幕标尺的功能官网下载是需要收费的，建议大家支持正版打开FSCapture软件后，点击设置，再选择屏幕标尺，如下图所示：出现的屏幕标尺如下图所示，我们选择垂直模式如下图所示，我们测量行高，右下角是放大后的效果，移动鼠标进行调整，会自动显示当前的px值...原创 2022-03-29 09:26:53 · 1831 阅读 · 0 评论