css常用的样式修饰

1.1.1   文本及字体属性

字体颜色：color

字体大小：font-size:12px

文本修饰：text-decoration:none（去下划线） underline（加下划线）

文本水平对齐方式：text-align:left  center  right

行高：line-height:25px（文本垂直居中，让行高与自身标签的高度保持一致）

字符间距：letter-spacing:8px（字体间隔）

字体粗细：font-weight:bold（加粗）

字体类型：font-family:宋体（前提：电脑需有这种字体）

 

 

1.1.1   背景样式属性

背景颜色：background-color:red

背景图片：background-image:url(图片的路径)

                      如果同意标签中既有背景颜色有存在背景图片，则图片在上，颜色在上

背景平铺：background-repeat:no-repeat

                     no-repeat：背景图不重复平铺

                     repeat-x：横向平铺

                     repeat-y：纵向平铺

                     repeat：平铺（默认值）

背景偏移（背景图片出现的初始位置）：background-position:水平位置 垂直位置

                   方向关键词：background-position:水平位置（left center right）垂直位置（top bottom）

             百分比：background-position:50% 50%

                   具体像素：background-position:20px -30px

                   （像素的正负值根据图片移动的坐标方向来决定）

1.1.1   列表样式

list-style:none：去掉列表项的修饰符号（如ul li前的符号）

list-style-image:url(图片路径);

1.1.1   浮动样式

float:left：左浮动（横向排列靠左），右浮动right（横向排列靠右）

文档流：

1. 普通（正常）文档流：遵循从上至下，从左至右的顺序逐一呈现标签，且所有标签位于同一层。
2. 脱离文档流：一但用到float浮动则应用了浮动的标签，已经脱离原有的文档流，与其它标签不属于同一层面，但是被浮动标签会高风亮节把原有在普通文档流的位置让出来，其他标签则会自动占用已经浮动标签原有的位置，效果就发生变化了。
3. 一但某标签应用了浮动样式则可以理解为原来的块级转换成行级，但是宽高还是有影响、。
4. 4.       清除浮动样式：clear:left;（left、right、both）

a)         通过clear将该元素最近已经发生了浮动的元素清除浮动，不受其他已经浮动的元素的影响，重新回归普通文档流，没有脱离文档流。简单的来说就是通过清除浮动，不受其他浮动元素的影响，不会补上脱离文档流让出的位置。

 

 

1.1    盒子模型

1.1.1 外边距与内边距、边框

外边距（标签之间的距离）：margin（margin-left right top bottom:25px;）

内边距（标签与内容之间的距离）：padding（padding- left right top bottom:25px;）

浏览器有存在默认的外边距与内边距

/*将当前div标签至于body标签中水平居中*/

         margin:0 auto;/*0:上下的外边距为0,auto:表示左右自动计算*/

 

注意：

外边距（margin）:

1. 1.       同级标签（元素）的外边距在某些情况下会发生 “塌陷” 的问题

. 如果外边距距的数值相同：则只取一个

.         如果外边距的数值不相同：则取大的

 

 

外边距的4种写法：（内边距同理）

         1.简写方式（遵循上 右 下 左的顺序）

         margin:20px;（表示上 右 下 左边距各位20px）

         2.两个参数值

         margin:20px 50px;（表示上下20px  左右50px）

        

         3.三个参数值

         margin:10px 20px 30px;（表示上10px 左右20px 下30px）

         4.四个参数值

         margin:10px 20px 30px 40px（上10px 右20px 下30px 左40px）

边框（border）

         1）border:1px solid red;

         表示：  1px:上、右、下、左的边框都为1px

                            solid:线型都为实线型(上、右、下、左)

                            red:边线颜色(上、右、下、左)

2）指定方位:顶边线（solid实线  dashed虚线）

                                     border-top:2px solid red;

                                     border-bottom:2px dashed blue;

                                    

         3）指定方位，分开写

                                     border-top-width:5px;

                                     border-top-style:solid;

                                     border-top-color:skyblue;

内边距（padding）:

                   . 为盒子添加内边距（填充）会影响盒子实际的占位大小（可通过改变盒子自身宽高来增加内边距），但是添加外边距不会影响盒子的实际占位。

结论：盒子的实际占位公式

         盒子宽度=自身的width + 左右填充的(padding) width + 左右边框的width

         盒子高度=自身的height + 上下填充的(padding) height + 上下边框的height

1.1.1   盒子模型

 

 

在网页中的任意标签只要添加高度及宽度，加背景色和边框及颜色则为盒子

通过盒子模型实现网页的布局（整体布局或局部布局）

网页布局：就是将大小不一的盒子进行良好的摆放则视为布局

1、 css用途

a)         应用css样式进行网页的美化;

b)         应用css样式进行网页布局;

转载于:https://www.cnblogs.com/alexjava/p/11514561.html