CSS
关注
分享
扫一扫
文章平均质量分 52
米卡小米
这个作者很懒，什么都没留下…
展开
-
css--媒体查询--media
媒体查询（Media Query）是CSS3新语法，@media 可以针对不同的屏幕尺寸设置不同的样式。用 @media 开头 注意@符号mediatype 媒体类型关键字 and not onlymedia feature 媒体特性 必须有小括号包含。all 所有print 打印screen 电脑屏幕 平板 手机作用：将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。and “且”not “非”only “特定”widthmin-widthmax-widthrem单位是跟着html来走的，有了r原创 2022-06-20 16:10:04 · 394 阅读 · 1 评论 -
css--rem适配布局
rem是单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。em的基准是相对于html元素的字体大小。使用时,可以通过设置html标签的font-size的值，可以用来控制整个页面的大小原创 2022-06-20 15:33:58 · 763 阅读 · 0 评论 -
css3--变形transform--移动旋转缩放
作用：改变标签在二维平面上的位置。经常和transition（过渡）一起使用。transition语法transform: translate(100px,100px);transform: translate(50%,50%)transform: translateX(100px)transform: translateY(100px)1.translalt属性移动过程中不会影响其他元素。2.x,y的值用百分比是基于自生的宽高来对比的。3.行内元素不能使用translatetransform: rotat原创 2022-06-17 16:09:50 · 1026 阅读 · 0 评论 -
CSS3--滤镜filter\calc函数\css3过渡transition
filter:blur(5px); filter: blur(10px);1.谁做过渡给谁加 2.要过渡所有属性可以用 all3.运动曲线 默认是ease 可以不写4.何时开始是问是否需要延迟，延迟多久5.和时间有关系的两个属性值必须要有单位s6.多个过渡 transition:width 0.5s,height o.5s;...原创 2022-06-15 17:58:39 · 245 阅读 · 0 评论 -
css--css初始化
css初始化原创 2022-06-15 11:09:29 · 280 阅读 · 1 评论 -
css--margin负值的应用--细线边框和细线边框高亮显示
直接浮动两个盒子之间会出现粗线解决这个问题用一个压一个的原理，使用margin负值。 边框高亮显示 1.使用相对定位2.再已经设置过相对定位的时候使用z-index原创 2022-06-15 10:05:45 · 223 阅读 · 0 评论 -
css--overflow--溢出
overflow属性值： visible hiddenscroll原创 2022-06-15 09:34:42 · 182 阅读 · 0 评论 -
css--溢出文本省略号显示--单行、多行
1.强制一行内显示文本 white-space: nowrap2.溢出部分隐藏 overflow : hidden;3.文字溢出用省略号显示 text-overflow : ellipsis 2.多行文本溢出 这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览...原创 2022-06-15 09:18:23 · 127 阅读 · 0 评论 -
css--vertical-align属性--图片文字居中对齐、图片底部空白缝隙
vertical-align 属性设置元素的垂直对齐方式。从上面的例子中我们可以看到，当图片的 vertical-align 的值是 baseline 时图片和图片之间有缝隙，这是为了给文字留位置，就算没有文字因为基线对齐是默认值，缝隙也存在。解决方法：1.给图片添加 vertical-align 除默认值以外的值。 2.将图片转换为块级元素...原创 2022-06-15 09:07:06 · 1516 阅读 · 0 评论 -
css-防止拖拽文本域-resize:none；
正常表单的定义好后可以被拖拽原创 2022-06-15 08:39:50 · 1936 阅读 · 0 评论 -
css-表单轮廓线消失-outline:none
css-表单轮廓线消失-outline:none原创 2022-06-14 18:50:09 · 4564 阅读 · 0 评论 -
icomoon字体图标库的使用
icomoon是资源最全的字体图标库，但是是国外的原创 2022-06-14 18:06:42 · 643 阅读 · 0 评论 -
css--transition和animation
1.transition(过渡)格式：transition:要过渡的属性 花费时间 运动曲线 何时开始（后两个属性可以不写）实例：<html><head><style> div{width:100px;height:100px;background:blue;transition:width 2s;}div:hover{width:300px;}</style></head><body>&原创 2022-02-28 14:13:27 · 692 阅读 · 0 评论 -
CSS--精灵图--background-position
1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，通过background-position来改变图片位置。所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器原创 2022-02-23 10:00:37 · 945 阅读 · 0 评论 -
CSS--box+float常见网页布局
<!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"> <title>Do.原创 2022-02-19 17:36:00 · 137 阅读 · 0 评论 -
CSS--布局--定位布局
定位布局css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。1.静态定位2.相对定位3.绝对定位4.固定定位...转载 2021-11-02 10:15:34 · 312 阅读 · 0 评论 -
CSS--布局--伸缩盒布局
CSS3 弹性盒（Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。 容器 使用弹性盒布局的父元素 display:flex; 主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-directio...转载 2021-11-01 11:06:36 · 866 阅读 · 0 评论 -
CSS--清除float浮动
一、浮动产生原因一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。二、浮动产生负作用1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内原创 2021-09-30 15:24:36 · 112 阅读 · 0 评论 -
CSS-布局-浮动布局
默认文档流默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下 1)元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。 2)块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。 3)行内元素与其他元素共享一行空间，宽高由其内容所决定。默认文档流往往不能满足我们的布局需求，我们可以使用如下属性改变默认布局 ü display 通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流原创 2021-09-30 14:38:02 · 161 阅读 · 0 评论 -
CSS--选择器
1.基本选择器1. 标签选择器 标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。 例如：<style>p{height:100px;border:1px solid red;}</style><p>one</p><p>two</p><p>three</p>2.类选择器（ Class selectors ） 类....原创 2021-09-27 14:54:59 · 4424 阅读 · 0 评论 -
CSS--盒子模型
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型的组成一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。盒子的分类和大小...原创 2021-09-14 17:12:08 · 161 阅读 · 0 评论