css

absolute 的流体特性

说到流体特性,我们通常第一反应就是之类的普通块级元素。实际上,绝对定位元 素也具有类似的流体特性,当然,不是默认就有的,而是在特定条件下才具有,这个条件就是“对立方向同时发生定位的时候”。left/top/right/bottom是具有定位特性元素专用的CSS属性,其中left和right属于水平对立定位方向,而 top 和 bottom 属于垂直对立定位方向。 当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了。例如:.box{position:absolute;lef

查看详情>>

css

伪类与伪元素

伪类伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。属性描述CSS:active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时,向元素添加样式。1:link向未被访问的链接添加样式。1

查看详情>>

css

css3 flex

# flex## 容器属性* flex-direction决定主轴的方向(即项目的排列方向)。```cssflex-direction: row | row-reverse | column | column-reverse;```* flex-wrap如果一条轴线排不下,如何换行。```cssflex-wrap: nowrap | wrap | wrap-reverse;```* flex-flow是`flex-direction`属性和`flex-wrap`属性的简写形式,默认值为`row nowra

查看详情>>

css

css3动画

transition 过渡指的是达到某种效果(变高?变宽,旋转等的)使用何种速度效果(从慢到快,或是从快到慢还是先慢再快)持续多长时间完成,或延迟多少时间再执行语法:transition:propertydurationtiming-functiondelay;值描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transiti

查看详情>>

css

简单编写底部导航装饰线

思路:父级有下边框、子级也有下边框,将子级margin-bottom:"子级自己的边框高度" 装饰线 body{ padding:20px; line-height:2; } #box{ width:350px; height:200px; } .wrap{ border-bottom:4pxsolid#ccc; margin-top:5px; margin-bottom:5px; } h3{ padding-bottom:3px; bo

查看详情>>

css

加载“自定义”字体

首先了解下字体系列1、serif 代表字体:Times、Time New Roman、Georgia 特点:有衬线(字母末端的装饰性小细线)的字体,如有些新闻板报上的文字排版2、sans-serif 代表字体:Arial、Geneva、Arial Black Verdana、Trebuchet MS 特点:无衬线,在计算机屏幕上更容易识别3、monospace 代表字体:Courier、Courier New、Andale Mono、Fira Code 特点: 包含固定官渡的字符,主要用于软件

查看详情>>

css

理解inline-block

# 块级元素和块级显示不是同一个概念块级元素只独占一行,多个块级元素多行显示而块级显示display:blockdisplay:tabledisplay:item-list都可以让元素拥有块级元素特性display:item-list在火狐上会显示一个原点,实际上一个元素拥有两个盒子,一个“外部盒子”用于控制元素是否排成一行,“内部盒子”让元素拥有高宽等属性这样就好理解display:inline-block,让元素外部排成一行并且内部支持宽高等属性display:block可以理解为display:bl

查看详情>>

css

CSS 中有史以来的第一 个变量

currentColor没有指定颜色,他会获取紧邻父级元素的文本颜色用来当值1.body{ color:black; } hr{ /*bla

查看详情>>

css

css居中(水平,垂直)设置的小技巧总结

行内元素水平居中text-align:center块状定宽水平居中左右margin auto不定宽块状水平居中加入table标签设置display: inline方法:与第一种类似,显示类型设为行内元

查看详情>>

css

前端css编写规范

在我们使用html+div时,随时会编写css,下面介绍css比较好的编写规范,遵守某些优秀的规范会让我们变的更专业。:)

css书写顺序位置属性(position, top, right, z-index, display, float等)大小(width, height, padding, margin)文字系列(fo

查看详情>>

What's this?

本站是个人博客,主要记录和分享个人软件开发生涯中的一些经验、笔记,随时欢迎大家参与互动,共同学习:)

唧唧复唧唧

一颗充满正能量的心,胜过一百个智慧

网站统计

  • 文章总数
  • 标签总数
  • 网站已运行