列表属性:
list-style-type:;
属性值:
square cirde disc none
list-style-image:url()把图片当做列表符号显示
list-style-position
属性值:
Insiad outinsiad
重点:list-style:none; 去掉列表符号
边框属性:
border:1px solid blue;复合式写法
1,拆分出来
border-width:1px;
border-style:solid;(实线)
border-color:bule;
以上三个属性最多每个增加是个属性值
一个属性值的时候是:四周
二个属性值的时候:上下 左右
三个属性值的时候: 上 左右 下
四个属性的时候: 上 右 下 左
线型:solid(实线) dashed(虚线) dotted(点状线) bouble(双线) none(清除)
边框长在什么位置
边框长在元素宽高之外的
怎么给单一一个方向添加边框
border-left:10px solid bule;
border-right:;
border-top:;
border-bottom:;
扩展:透明色:
transparent
当边框没有颜色的时候根据当前容器里面的color的颜色值进行显示
背景属性
background:;
1,背景颜色:background-color:;
2,背景图:(背景图不占据空间):background-image:url(图片路径)
背景图默认的显示状态:
A,容器大于背景图尺寸:直到铺满为止
B,容器等于背景图时:只能显示一张
C,容器小于背景图尺寸:只显示容器区域
控制背景图是否平铺
Background-repeat:;
属性值:
no-repeat 不平铺
repeat 平铺
repeat-x 横向平铺
repeat-y 纵向平铺
背景图的位置:
background-position:;
属性值:
水平方向 left right center
垂直方向 top bottom
left:-10px(往左走10px) top:-10px(往上走10px)
背景图的固定:background-attachment:;
属性值:fixed(固定) scroll(滚动)
注:简写:background:背景颜色 rul(背景图) 是否平铺 背景位置
background:red url(./img/1.png) no-repeat center
浮动:
属性:float:;
属性值:
left(往左浮动) right(往右浮动) none(清除)
特点:脱离布局流不占据空间
注意事项:
1,浮动的元素,不占据空间
2,如果想让多个元素横向排列
A,对个元素必须都添加浮动
B,添加浮动的元素外层必须有个父元素存在
3,当浮动的盒子整个宽超出父元素的时候,后面的元素会被挤到下一行
4,当子元素有浮动的时候,父元素必须有高度,否则父元素会出现“高度坍塌”
Css的继承性
控制文本的都有继承性
盒模型:
是网页的基石,盒模型控制着网页中的元素之间的位置
盒模型构成:从里到外:内容区 内填充 边框 外边距
padding的用法:
1,padding是长在内容和盒子之间的 在盒子里面
2,padding作用:控制内容在盒子里面的位置关系
3,padding会把盒子撑大
4,如果想让盒子在有padding的情况下,保持原来大小,需要在宽高的基础上,减掉padding值
5,给单一一个方向添加padding的值
padding-left:;
padding-right:;
padding-top:;
padding-bottom:;
6,padding、属性值的设置技巧
padding:10px;四周都是10px
padding:10px 20px; 上下10px 左右20px
padding:10px 20px 30px 上10px 左右20px 下30px
padding:10px 20px 30px 40px 上10px 右20px 下30px 左40px
//虚线边框