A.今天学了什么
1 轮廓属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
2 透明
opacity
visibility:hidden|visible
3 css样式的继承
继承:是子元素对父元素的继承
width
如果子元素不设置宽度,默认情况下继承父元素的宽度
height
如果父元素不设置高度,默认情况下父元素继承子元素的高度
css可以继承的属性
文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:cursor,visibility
4 盒子浮动
float :能让盒子并排显示
5 清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
.row:after{
display:table;
content:””
clear:both
6 定位:position
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
absolute定位
绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么它的位置相对于<html>
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
B 今天学到了什么
1 轮廓属性
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
p{outline:1px solid pink}
2 透明
opacity
visibility:hidden|visible
3 css样式的继承
继承:是子元素对父元素的继承
width
如果子元素不设置宽度,默认情况下继承父元素的宽度
height
如果父元素不设置高度,默认情况下父元素继承子元素的高度
css可以继承的属性
文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:cursor,visibility
4 盒子浮动
float :能让盒子并排显示
5 清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
.row:after{
display:table;
content:””
clear:both
C.今天没有掌握的
position
网友评论