css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号

-背景的属性

l Background-color: 背景颜色  例如:background-color#ff0000;background-color:red;

l Background-image:背景图片 例如 background-image:url(图片的路径)

l Background-repeat:背景图片是否平铺 取值:no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺 repeat横向和纵向都平铺 (默认)

l Background-attachment:背景附件,背景是否随着上方的内容一起滚动

取值 fixed背景固定  scroll滚动

例如:background-attachment:fixed;

l Background-position:背景图片的展开方式 例如:background-position:水平 垂直;

英文 :水平 left  center  right  垂直top  center bottom

数值 :正值   负值

例如 background-position:left top;

      例如:background-positon:0  0;    background-position:10px 20px;

可以简写

Background:背景颜色 背景图片 背景图片是否平铺  水平 垂直(附件通常仅用body标签

注意:只有水平和垂直不能颠倒,其他的属性值可以顺序颠倒



z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

cursor:光标标签   pointer(一只手)  wait(通常是一只表或沙漏)  help(通常是一个问号或一个气球)  default(通常是一个箭头)

border-radius :50%(圆)用来设置边框圆角

 

 设置主体标签, 背景图片,纵向平铺  水平居中垂直距离顶端20px-->

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第1张图片

列表

去掉列表前面的项目符号

1. List-style-type:none;

可以简写为

2. List-style:none;

例如

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第2张图片

效果

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第3张图片

用小图代替列表前面的符号

List-style-image:url(图片的地址)

display: inline ;去掉前面的符号并分布在一行

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第4张图片

之前rules=”all” 表格

的属性 合并表格的边框线

Css样式如何实现

 Border-collapse:collapse; 合并表格的边框线

例如

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第5张图片


边框(html标签就可以加边框线)

上边框

1. Border-top-color:颜色值;上边框的颜色

2. Border-top-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-top-width:粗细;例如border-top-width:2px;

简写为

 Border-top:粗细 线型 颜色;

右边框

1. Border-right-color:颜色值;上边框的颜色

2. Border-right-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-right-width:粗细;例如border-right-width:2px;

    简写为

 Border-right:粗细 线型 颜色;

下边框

1. Border-bottom -color:颜色值;上边框的颜色

2. Border-bottom-style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border-bottom-width:粗细;例如border-bottom-width:2px;

    简写为

 Border-bottom:粗细 线型 颜色;

左边框

1. Border-left-color:颜色值;上边框的颜色

2. Border- left -style:线型;线型有solid实线  dashed虚线dotted点状线

3. Border- left -width:粗细;例如border- left -width:2px;

    简写为

 Border- left:粗细 线型 颜色;

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第6张图片

上右下左四条边框的样式一样

可以简写为  border:粗细 线型 颜色;

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第7张图片

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第8张图片


盒子模型(div)

盒子的必要属性

内容区:widthheight

     边框 border:

内边距 padding(将盒子撑大,盒子的宽高会改变)

内容和边框之间的距离

1. Padding-top:数值;内容和上边框之间的距离

2. Padding-right:数值;内容和右边框之间的距离

3. Padding-bottom:数值;内容和下边框之间的距离

4. Padding-left:数值;内容和左边框之间的距离

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第9张图片

 简写形式

Padding10px 20px 30px 40px;上边框距离10px  右  20px   下边框30px    40px

Padding:10px 20px 30px; 10px      左右  20px      30px

Padding:10px 30px;   上下10px   左右30px

Padding:10px;   上右下左都是10px

注意:一个值的话上右下左等距;两个值上下等距、左右等距;三个值左右等距。

  css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第10张图片


外边距(margin默认8px) 不会将盒子撑大是盒子与盒子之间的距离

边框以外的距离,即盒子距离外面盒子或网页面板的距离

1. Margin-top:数值;上边框往外的距离

2. Margin-right:数值;右边框往外的距离

3. Margin-bottom:数值;下边框往外的距离

4. Margin-left:数值;左边框往外的距离

简写为

Margin:10px 20px 30px 40px; 上边框以外的10px  右是20px  30px  40px

Margin:10px 20px 30px;   上边框以外的10px   左右是20px  下是30px

Margin:10px 20px;   上下为10px  左右为20px

Margin:10px;  上右下左都是10px

两个div盒子,第一个div内容区的宽度是300px  高度为280px,边框线为2像素,实线 蓝色,内容和上下边框之间的20px,内容和左边框的距离15px

第二个盒子div,宽度为280px,高度为300px  ,边框线1px  实线  灰色,  内容和左边框的距离为15px,两个盒子之间的距离为20像素-->

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第11张图片


网站布局的一个思想

网站的结构就是两部分(横向和纵向) 如果是纵向的就是正常的文档流,设置内容器的宽度和高度,设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以

如果是横向排列,我们就要使用浮动

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第12张图片

浮动(哪个框动在哪个框里面加浮动)

Floatleft

Float:right;

 css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第13张图片

里面有三个盒子:左    

                                    

浮动的特点:

使元素站队(站队的边界是他父级的边界),一行站满后从下一行开始

 设置浮动的元素,不占空间

 设置浮动的元素层级高于普通元素

 设置浮动之后,无论之前是否是块元素,设置浮动之后一定是块元素

盒子被浮动后后面的盒子会根据文本流动占位移动那个盒子的位置

css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第14张图片

 如果在一行中的元素想横向排列,都设置浮动就可以

css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第15张图片

 

通常情况下div里面还有div(外面的div父盒子,)盒子里面还有盒子

如何让盒子在页面水平居中

 Margin: xx   auto;

1. 例如:margin: 0  auto;

2. Margin-left:auto; margin-right:auto;

 

清除浮动(清楚周边的浮动流)

 Clear:left;

 Clear:right;

Clear:both; /*清除左浮动,右清除右浮动*/

l Div里面还有

p、div父盒子没有设置固定高,里面div设置了浮动,父元素受影响,无法正常的计算,如何让父元素得到一个自然高

 在父盒子里面的p设置清除浮动的属性clear:both;

浏览器的一个bug  ----在父元素的样式中加overflow:hidden;

可以让父元素得到一个自然高

不受浮动的影响      


css基础-盒子(div)模型、背景属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号_第16张图片




如有不足请多多指教!希望给您带来帮助!祝您生活愉快。

你可能感兴趣的:(css,css,标签,div盒子,float浮动)