赞助

列表属性:

list-style-type:;

属性值:

square   cirde    disc   none

list-style-imageurl()把图片当做列表符号显示

list-style-position

属性值:

Insiad   outinsiad

重点:list-stylenone;  去掉列表符号

 

边框属性:

border1px solid blue;复合式写法

1,拆分出来

border-width1px

border-stylesolid;(实线)

border-colorbule

以上三个属性最多每个增加是个属性值

一个属性值的时候是:四周

二个属性值的时候:上下  左右

三个属性值的时候: 左右  

四个属性的时候:        

线型:solid(实线)  dashed(虚线) dotted(点状线) bouble(双线) none(清除)

 

边框长在什么位置

边框长在元素宽高之外的

怎么给单一一个方向添加边框

border-left10px solid bule

border-right:;

border-top:;

border-bottom:;

扩展:透明色:

transparent  

当边框没有颜色的时候根据当前容器里面的color的颜色值进行显示

 

背景属性

background:;

1,背景颜色:background-color:;

2,背景图:(背景图不占据空间):background-imageurl(图片路径)

背景图默认的显示状态:

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(背景图) 是否平铺 背景位置

backgroundred url./img/1.pngno-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、属性值的设置技巧

 

padding10px;四周都是10px

 

padding10px 20px; 上下10px   左右20px

 

padding10px 20px 30px 10px   左右20px  30px

 

padding10px 20px 30px  40px 10px 20px 30px 40px

 //虚线边框

.dashedLine {
   padding-top: 10px;
   margin-left: 58px;
   padding-bottom: 10px;
   border: 1px dashed transparent;
   background: linear-gradient(#f4fbff, #f4fbff) padding-box, repeating-linear-gradient(-45deg, #999 0, #999 0.3em, #f4fbff 0, #f4fbff 0.6em);
}
posted on 2020-10-05 14:23  Tsunami黄嵩粟  阅读(135)  评论(0编辑  收藏  举报