Tag: CSS

CSS属性笔记

text-shadow 属性 它可以为元素中的文本提供阴影。四个值含义如下: 第一个值设置水平偏移值 —— 即阴影右移的像素数(负值左移)。 第二个值设置垂直偏移值 —— 即阴影下移的像素数(负值上移)。 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。 第四个值设置阴影的基色。 display 属性 更多信息 参考页面  display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现(块级或内联元素);元素的内部显示类型 inner display types 可以控制其子元素的布局(例如:flow layout,grid 或 flex)。 display 属性使用关键字取值来指定,关键字取值被分为六类: calc()函数 这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值,并且需要浏览器在运行时为您计算出这些值,那么它特别有用。 例如,下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的,因此如果宽度改变,它也会改变。我们不能事先做这个计算,因为我们不知道父类的20%是多少,所以我们使用calc()来告诉浏览器为我们做这个计算。


CSS 去除图片元素底的空白

This “problem” persists because it’s not a bug. It’s just how the inline-formatting context works. minuo.me DIV+CSS排版时图片标签<img src=”#”>底部会出现空白,解决方法有很多,在此记录我常用的2个。 No.1 img {display: block;}No.2 img {vertical-align: text-bottom[bottom,middle,top … ];} 方法二在父元素也是inline元素的时候会影响到父元素的位置,所以我选择了方法代码少的方法一。 接下来,了解一下图片元素底部会出现空白的原因。 You’re seeing the space for descenders (the bits that hang off the bottom of ‘y’ and ‘p’) because img is an inline element by default. robertc CSS对inline 元素vertical-align属性有不同的规范值,用来设置元素的垂直对齐方式(所有浏览器都支持 […]