常用到的三种选择器
子孙选择器(区别于后代选择器)
例如:div>p{…}就是选择div的子元素中的所有p元素,不包括子元素的子元素。
兄弟选择器
例如:div+p{…}就是选择紧跟在div后面的p元素的集合,div和p拥有相同的父级元素
属性选择器
a[href] {color:red;}包含属性href的所有a元素(还有更多操作方式,详见W3C)
一些常用效果
背景渐变+透明度
其中单独设置图片透明效果时用:opacity:0.1; filter:alpha(opacity=10);
background-image: linear-gradient(to bottom, rgba(206, 209, 104, 1) 0%, rgba(206, 209, 104, 1) 20%, rgba(206, 209, 104, 0.2) 100%);
阴影效果
阴影:box-shadow:水平偏移,垂直偏移,阴影模糊距离,阴影的尺寸,颜色,(inset);
box-shadow:0px 2px 8px 0px RGBA(7,17,27,.1);
border圆弧形
border:2px solid blue;
border-radius:2px;
inline元素和block元素居中问题
inline元素相对父级元素居中,只需要在父级元素设置text-aling:center;
block元素居中,当确定width的值时,可直接设置margin:0 auto;
有时候block元素并不确定width的值,这时又需要居中,一般用下面这种方法,设置display:table,margin: 0 auto;
要注意的问题
外边距合并
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
overflow
overflow: hidden溢出隐藏,overflow:auto浏览器自动处理加滚动条
max min
有时候需要对某些块进行最大最小控制时,设置max-width,max-height,min-width,min-height;
margin负值:margin在适当的时候可以用负值来调节布局。