CSS
css样式相关
huzhenv5
这个作者很懒,什么都没留下…
展开
-
css伪类的顺序
首先我们需要知道css伪类是用来添加一些选择器的特殊效果。link 表示的是正常情况下链接的样式。visit 代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式。hover 在鼠标移到链接上时添加的特殊样式。focus 在一个元素成为焦点时生效,用户可以通过键盘或鼠标激活焦点。active 在一个元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式。hover 理论上任何元素都可以使用的,focus多是针对表单的,如input等 。而active多转载 2020-08-11 10:41:34 · 1237 阅读 · 0 评论 -
css —— inline、block、inline-block特性总结
笔者做web前端已经做了很长时间了,常用的display属性就是inline、block和inline-block,对于他们的特性和区别有一个大概的了解,但是并不全面。今天笔者写这篇文章再来重新认识一下这三者和这三者之间的区别,再对平常使用过程中常常碰到的问题做个回顾和总结。特性inline:使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行不能更改元素的...原创 2020-03-24 16:24:05 · 1052 阅读 · 0 评论 -
css —— Flex布局详解
文章目录简介取值display属性容器样式属性列举子元素属性列举容器各属性详解主轴方向主轴对齐方式交叉轴对齐方式交叉轴对齐方式多主轴对齐方式子元素各属性详解子元素排序属性子元素放大属性子元素缩小属性简介Flex 是个非常好用的属性,特别是对多个子元素的排列来说十分的方便,就是它对应的属性非常多,理解起来不是十分的容易,本篇文章将详细介绍Flex的用法;目前各主流浏览器对Flex的支持还算是不错...原创 2020-03-23 22:39:25 · 478 阅读 · 0 评论 -
css垂直居中方式总结
文章目录通过relative通过relative这种方法的思路是,使用relative将元素相对父元素下移50%,在通过transform使元素相对自身上移50%,这样元素就处在父元素的正中间了,示意图:实例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2020-03-23 11:23:32 · 174 阅读 · 0 评论 -
css —— 文档流,position详解
文章目录一些基本概念文档流position简介一些基本概念在讲position属性之前,我们先要了解一些基本概念,有助于我们深入理解position的每个值的特点文档流我们来看看什么是文档流(normal flow),下面是 www.w3.org 的描述:Normal flowBoxes in the normal flow belong to a formatting contex...原创 2020-03-21 22:06:37 · 1133 阅读 · 0 评论 -
CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认)4.浮动的影响:...转载 2020-03-19 19:26:43 · 172 阅读 · 0 评论 -
CSS 盒模型与box-sizing
文章目录一、盒模型二、box-sizing(css3属性)1.box-sizing的值2.box-sizing的作用3.对于box-sizing属性值的选择一、盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在。MDN的描述:When laying out a document, the browser’s ...转载 2020-03-05 21:03:06 · 246 阅读 · 0 评论 -
CSS一些常见属性的默认值
CSS3 动画属性(Animation)属性名称默认值animationnone 0 ease 0 1 normal默认值对应的6个属性依次为:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation...原创 2020-03-05 14:57:21 · 1967 阅读 · 0 评论 -
谈谈 CSS 关键字 initial、inherit 和 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值。通常的回答是 static、relative、absolute 和 fixed 。当然,还有一个极少人了解的 sticky 。其实,除此之外, CSS 属性通常还可以设置下面几个值:initialinheritunsetrevert{ position: initial; position: inheri...转载 2020-03-05 13:23:22 · 1066 阅读 · 0 评论