![](https://img-blog.csdnimg.cn/4b9f553515724ff7aea1169d02967406.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 50
本分栏,将详细的阐述常用的样式属性及常用的属性值,包含动画,移动端开发,学完后,将可以优雅的装饰网页样式
燕穗子博客
成长就是一个不优秀的人带着一群不优秀的人一起走在变优秀的路上
展开
-
CSS单位px、em、rem、vh、vw、vmin、vmax
一、介绍传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从css3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面,适应多种不同分辨率的终端,包括移动设备等二、单位在css单位中,可以分为长度单位、绝对单位,如下表所指示CSS单位相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%绝对长度单位 cm、mm、原创 2022-05-24 17:29:50 · 1414 阅读 · 0 评论 -
【经典面试题】不固定宽高的div水平垂直居中的3种方法
目录一. 固定宽高div进行水平垂直居中二.不固定宽高的div进行水平垂直居中1、定位的方法2、使用display:table-cell方法3、利用弹性布局一. 固定宽高div进行水平垂直居中 .son { position: absolute; background: green; margin:auto; left: 0; top: 0;..原创 2022-05-18 21:49:22 · 1468 阅读 · 0 评论 -
「面试题」opacity、transparent以及rgba设置透明效果区别
三者共同点是都和透明有关。先分着来说一下:1、opacity用来设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明)。2、transparent是颜色的一种,这种颜色叫透明色。3、rgba(r,g,b,a)稍复杂一点,r:红色值;g:绿色值;b:蓝色值;a:alpha透明度。alpha表示像素不透明性的值。像素越不透明,则隐藏越多呈现图像的背景。取值0~1之间。0表示完全透明的像素,1表示完全不透明的像素。现在,我们来看区别:1、opacity是作为一个......原创 2022-05-05 21:10:11 · 941 阅读 · 0 评论 -
「经典题」页面中图片大小自适应问题,避免留白
第一种:div 包着 imgimg { width: auto; height: auto; max-width: 100%; max-height: 100%;}第二种:背景图片style="background-image: url(${user.headimgurl});background-size: cover; "background-size 的各个属性 :length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置原创 2022-05-10 23:04:59 · 273 阅读 · 0 评论 -
【经典面试题】css如何画一个三角形?
引言: 我们在网页中经常会见到一些小的三角形,比如对话框上的小角等。我们可以用css来画出这样的三角形css画三角形 — 用盒子的边就可以画出来。一、步骤 设置一个盒子 ,宽高为0 给盒子的边设置宽度,并添加颜色 <div></div><style>div { width: 0; height: 0; border-top: 50px solid red; border-bottom: 50px solid blue; bo原创 2022-05-17 09:16:14 · 2688 阅读 · 0 评论 -
CSS中响应式开发—几个概念,开发原理,媒体查询,代码演示
一、响应式开发1. web网页布局分类固定宽度的布局:给网页设置一个固定的宽度,通常以px作为单位,常见于PC端web开发。流式布局:给网页设置一个相对宽度,通常以百分比作为单位。栅格布局:像表格一样对页面进行划分,以每一个划分出的单元格为长度单位,比如bootstrap采用的就是栅格化的布局。响应式布局:通过检测设备信息来决定网页的布局方式,从而使网页可以匹配大部分移动设备和PC端。2. 响应式应用响应式开发的结果将是开发出一个能够在多种设备上都能正常展示的网站,响应式开发的网站意味原创 2022-04-14 10:52:53 · 659 阅读 · 0 评论 -
CSS中flex弹性盒子——弹性容器属性,弹性元素属性(附图)
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox和A......原创 2022-04-14 09:21:09 · 1613 阅读 · 1 评论 -
CSS中动画——Z轴平移,旋转,缩放
一、Z轴平移z轴平移,调整元素在z轴的位置,正常情况下调整元素和人眼之间的距离,距离越大,元素离人越近,z轴平移属于立体效果(近大远小),默认情况下网页不支持透视,如果需要看到效果,必须要设置网页的视距1:设置视距—perspective [pə'spektiv] 设置当前网页的视距为800px,人眼距离网页的距离,一般不小于600px—设置方式一html{ perspective: 800px; }—设置方式二:—perspective(800px) 谷歌要直接设置在tra原创 2022-04-14 08:52:41 · 8012 阅读 · 1 评论 -
CSS中变形transform属性—改变元素的形状或位置
变形是通过css来改变元素的形状或位置,可以做元素悬浮效果,以及元素居中设置,代码演示中有两种元素垂直居中的写法 —变形不会影响到页面的布局(只折腾自己) —transform: ;用来设置元素的变形效果 ,尽量变形写在一个transform里,不然下面再写一个,就会覆盖上面可选值:translateX()沿着x轴方向平移translateY()沿着y轴方向平移...原创 2022-04-13 10:57:49 · 1971 阅读 · 0 评论 -
CSS中动画——如何设置关键帧,8个动画属性及简写方式
动画和过渡类似,都是可以实现一些动态效果,不同的是过渡需要在某个属性发生变化时才能触发,动画可以自动触发动画一、设置关键帧设置动画效果,必须先要设置一个关键帧,关键帧设置了动画每一个步骤语法:@keyframes 动画名 {}代码演示:@keyframes text {/* from表示动画开始位置 也可以使用0%*/from {margin-left: 0;}/* to动画的结束位置 也可以使用100%*/...原创 2022-04-13 10:51:34 · 4110 阅读 · 0 评论 -
CSS中过渡transition——元素变化时的切换方式
过渡(transition)[træn'siʒən]-通过过渡可以指定一个属性发生变化时的切换方式-通过过渡可以创建一些非常好的效果,提升用户体验一、属性(4个)(1)transition-property ['prɔpəti] 指定执行过渡的属性,多个属性,使用逗号隔开,如果所有的属性都要过渡,就使用all关键词,大部分属性都支持过渡效果注意过渡时,必须是从一个有效数值向另一个有效数值进行过渡只要值可以计算的,就可以过渡(2)transiti...原创 2022-04-13 10:30:30 · 723 阅读 · 0 评论 -
CSS中表单—创建表单,添加表单项
表单定义:将用户信息等本地的数据信息提交给服务器的,比如:百度的搜索框 注册 登录这些操作都需要填写表单一、创建表单 form标签属性:action属性(必须要写)指向的是一个服务器的地址,当我们提交表单时将会提交到action属性对应的地址二:添加表单项使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项(1)input来创建一个文本框,type属性是text,name属性:提交内容的名字如果希望表单项中的数据会提交到服务器中,必须指定一个name属性原创 2022-04-13 10:20:32 · 1203 阅读 · 0 评论 -
CSS中表格介绍,表格相关的样式以及长表格的使用
表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单,在网页中也可以来创建出不同的表格一:创建表格在HTML中,使用table标签来创建一个表格,在table标签中使用tr来表示表格中的一行,有几行就有几个tr,在tr中需要使用td来创建一个单元格,有几个单元格就有几个tdrowspan用来设置纵向的合并单元格colspan横向的合并单元格<!DOCTYPE html><html>原创 2022-04-13 10:08:39 · 943 阅读 · 0 评论 -
CSS中背景设置——渐变色和放射渐变
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果渐变是图片,通过 background-image设置一、渐变色 可选值1: linear-gradient ['ɡreidiənt],线性渐变,颜色沿着一条直线发生变化 语法:linear-gradient(方位,颜色1,颜色2) 参数1:表示方位,(可选值,不写默认是to bottom) ...原创 2022-04-13 09:28:11 · 2203 阅读 · 0 评论 -
CSS中雪碧图CSS-Sprite的使用,解决图片闪烁问题
背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源分别引入会导致的问题:(1)切换图片时,会发现图片有一个非常快的闪烁,(2)网站性能不好解决的方法有很多,这里介绍雪碧图的解决方法,准备,开车了···一、雪碧图的介绍—雪碧图官方名字叫图片整合技术(CSS-Sprite)—雪碧图的特点:1、 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多...原创 2022-04-13 09:12:56 · 522 阅读 · 0 评论 -
CSS中设置背景的7个属性及简写background注意点
css中背景的设置至关重要,也是一个难点,因为属性众多,对应的属性值也比较多,这里详细的列举了背景相关的7个属性及对应的属性值,并附上演示代码,后期要用的话,可以随时查看,那我们坐稳开车了······1: background-color 设置背景颜色2:background-image来设置背景图片- 语法:background-image:url(相对路径);-可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色,一般情况下设置背景...原创 2022-04-13 09:04:44 · 7969 阅读 · 0 评论 -
CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库
图标字体(iconfont)-在网页中经常需要使用一些图标,可以通过图片来引入图标,但图片本身比较大,也不灵活-所以使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入-这样我们就可以通过使用字体的形式来使用图标图标库有很多,目前国内使用比较多的就是阿里巴巴图标矢量库,网址:https://www.iconfont.cn/以后学习框架的时候,会知道框架里面也有很多的图标,可以直接使用,不过没有阿里巴巴...原创 2022-04-13 08:48:18 · 1556 阅读 · 0 评论 -
CSS中京东轮播图案例-附源码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2022-04-13 08:33:30 · 445 阅读 · 0 评论 -
CSS中元素设置定位,水平居中布局分析
水平布局的决定因素left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right-当开启决定定位后,水平方向的布局等式就会加上left,right两个值,此时规则和之前一样,只是多添加了两个值-当发生过度约束时1:如果9个值中没有auto,则自动调整right值以使等式满足...原创 2022-04-12 10:05:36 · 497 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之固定定位及粘滞定位
定位: - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值: static: ['stætik] 默认值,元素没有开启定位 relative: ['relətiv] 开启元素的相对定位 absolute: [...原创 2022-04-12 10:00:46 · 1278 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之绝对定位
定位: - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值: static: ['stætik] 默认值,元素没有开启定位 relative: ['relətiv] 开启元素的相对定位 absolute: ['æ...原创 2022-04-12 09:55:50 · 462 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之相对定位
定位:- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素- 通过position属性来设置元素的定位-可选值:static: ['stætik] 默认值,元素没有开启定位relative: ['relətiv] 开启元素的相对定位absolute: ['...原创 2022-04-12 09:50:33 · 462 阅读 · 0 评论 -
CSS中浮动float带来的高度塌陷问题及4种解决方案
一:高度塌陷问题在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题,二:4种高度塌陷解决方案解决方案一将父元素的高度写死,最简单的避免塌陷问题的出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这原创 2022-04-12 09:38:03 · 3282 阅读 · 0 评论 -
CSS中页面的布局案例-利用浮动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } /*设置头部div*/ .header{ /*设置一个宽度*/ w...原创 2022-04-12 09:24:36 · 189 阅读 · 0 评论 -
CSS中水平布局手段浮动float属性及其需掌握的特点
一、浮动的介绍块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流使用float来使元素浮动,使一个元素向其父元素的左侧或右侧移动,从而脱离文档流可选值:none,默认值,元素默认在文档流中排列left,,向页面的左侧浮动...原创 2022-04-12 09:21:05 · 543 阅读 · 0 评论 -
CSS中设置盒子大小-box-sizing,设置盒子阴影- box-shadow ,设置盒子圆角-border-radius,属性及其属性值
一:设置盒子大小-box-sizing默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定box-sizing 属性用来设置盒子尺寸的计算方式, 也就是 width/height 指的是谁可选值:content-box 内容区 默认值border-box 宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,内容区二:设置盒子阴影- box-shadow( 参数1,参数2,参数3,参数4...原创 2022-04-12 09:10:31 · 4469 阅读 · 0 评论 -
CSS中2种去除浏览器默认样式方法—reset.css
默认样式:浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉即化妆之前,要先把脸洗干净方式一:手动清除 </style> *{ margin: 0; padding: 0; } li{ list-s原创 2022-04-12 09:00:58 · 3413 阅读 · 0 评论 -
CSS中内联元素的盒子模型特点?行内元素,块元素,行内块元素之间的相互转换
行内元素的盒模型从这几点分析:内容区、内边距 、边框 、外边距1: 不能设置width和height,被内容撑开2: 可以设置padding,但垂直方向padding不会影响页面的布局,不会挤别人3: 可以设置边框,但是垂直的边框不会影响到页面的布局,不会挤别人4: 可以设置水平方向的外边距,水平方向的相邻外边距不会重叠,而是求和,但不支持垂直外边距display 用来设置元素显示的类型可选值:...原创 2022-04-11 20:48:01 · 339 阅读 · 0 评论 -
CSS中兄弟元素之间,父子元素之间出现外边距重叠问题,如何解决?
垂直外边距的重叠- 在网页中相邻的垂直方向的外边距,会发生外边距的重叠-兄弟元素兄弟元素之间的相邻外边距会取最大值而不是取和,谁大听谁的特殊情况:如果相邻的外边距一正一负,则取两者的和如果相邻的外边距都是负值,则取绝对值较大的总结:兄弟元素的外边距重叠,对开发有利,不用处理-父子元素如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素暂时解决方案:...原创 2022-04-11 20:42:42 · 1493 阅读 · 0 评论 -
CSS垂直方向布局中,子元素溢出父元素,如何处理?
默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,就是设置多少就是多少子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出,使用overflow属性设置父元素如何处理溢出的子元素可选值:visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示hidden 溢出的内容将会被裁剪不会显示scroll 生成两个滚动条,通过...原创 2022-04-11 20:37:53 · 5817 阅读 · 0 评论 -
CSS中控制元素水平布局的七个属性
元素的水平方向的布局元素在其父元素中水平方向的位置由一下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中,水平布局必须要满足以下的等式margin-left + border-left + padding-left + width + padding-righ...原创 2022-04-11 20:33:09 · 381 阅读 · 0 评论 -
css中详解盒子模型组成部分—内容区,边框,内边距,外边距
内容区(content) 元素中所有的子元素和文本内容都在内容区中排列* 使用width来设置盒子内容区的宽度* 使用height来设置盒子内容区的高度* width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,...原创 2022-04-11 20:28:07 · 2802 阅读 · 0 评论 -
CSS中的盒子模型——将元素摆放在页面的前提,先有盒子模型的概念
一个页面中,有千千万万个元素,我们想将元素布局到页面,就像想买个沙发,摆放到你的50平的客厅里,你需要先知道沙发是什么形状的,沙发有多大,才能搬回来,然后摆放到家里,这里我们把所有的元素都想象成盒子,矩形。这样我们做页面布局,就变成了,将各式各样的盒子,摆放在页面的什么位置,这就是盒子模型存在的意义盒模型、盒子模型、框模型(box model)-css将页面中所有元素都设置为一个矩形的盒子-将元素设置为矩形的盒子后,对页面的布局就变成了不同的盒子摆...原创 2022-04-11 15:53:15 · 305 阅读 · 0 评论 -
CSS中,什么是文档流,文档流中元素各自有什么特点?
文档流(normal flow)-网页是一个多层的结构,一层叠着一层,通过css可以分别为每一层来设置样式-作为用户来讲,只能看到最顶上一层-文档流处在网页的最底层,文档流是网页的基础,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中,在其上排列-元素主要有两个状态,在文档流中,不在文档流中(脱离文档流)****元素在文档流中的特点块元素1.块元素在文档流中会独占一行,块元素会自上向下排...原创 2022-04-11 15:44:42 · 604 阅读 · 0 评论 -
CSS中常用的10个文本样式属性——让文本设置再无难点
一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了1: text-transform 可以用来设置文本的大小写可选值:none 默认值,该怎么显示就怎么显示,不做任何处理capitalize [ˈkæpɪtəlaɪz] 单词的首字母大写,通过空格来识别单词uppercas...原创 2022-04-11 15:45:45 · 3820 阅读 · 0 评论 -
CSS中区分行高,行间距
行高(line height)—文字占有的实际高度—使用line-height来设置行高行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,控制文字行与行之间的距离, 网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示— line-height可接收的值:1.直接就写一个大小,eg:22px2.可以指定一个百分数,则会相对于字体去计算行高,eg:30%3.可以直接传一个数值,则行高会设置字体大小相应的倍数,eg:2— 行高经常还用原创 2022-04-11 15:07:34 · 2195 阅读 · 0 评论 -
CSS中设置字体样式的5种常用属性—让字体设置再无难点
设置字体样式的5中常用属性如下1:color 设置字体颜色,也可以设置其他颜色2:font-size 设置字体大小(1)、设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能(2)、设置文字的大小,浏览器中一般默认的文字大小都是16px,默认的最小的字体是12px...原创 2022-04-11 15:03:12 · 6615 阅读 · 0 评论 -
CSS中常用的5种颜色单位
css中有丰富多彩的颜色,如何让计算机能知道我们想要的是哪种颜色呢?可以通过以下的颜色单位。1:在CSS可以直接使用颜色的单词来表示不同的颜色红色:red 蓝色:blue 绿色:green 黄色:yellow注意: 这种用的比较少 不好描述,难记2:使用RGB值来表示不同的颜色- 所谓的RGB值指的是通过Red Green Blue三元色,通过这三种颜色的不同的浓度,来表示出不同的颜色- 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度);- 颜色的浓度需要一个0-255之.原创 2022-04-10 12:01:24 · 4234 阅读 · 0 评论 -
CSS中常用的4种长度单位
在现实生活中,我们知道很多的长度单位,例如米,厘米,寸,尺等等,在css的世界中,也有很多的长度单位以下是css中常用的四种常用的长度单位1,像素 px- 像素是我们在网页中使用的最多的一个单位,一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的,但是这些像素点,是不能直接看见。- 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。2,百分比 %- 也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值原创 2022-04-10 11:54:35 · 2588 阅读 · 0 评论 -
CSS中样式冲突及选择器权重问题
一:样式冲突通过不同的选择器选中同一个元素,进行一样的样式设定,发生样式冲突时,应用哪一个样式由选择器的权重(优先级)决定二:选择器的权重内联样式 1000id选择器 100类和伪类选择器 10元素选择器 1通配符、子选择器、相邻选择器等。如*、>、+ 0000继承的样式 没有优先级!important 最高优先级 慎用注意:1,比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示2,(并集选择器)分组选择器是单独计算的3,原创 2022-04-10 11:42:17 · 636 阅读 · 0 评论