样式集小记

(一)css浮动设置与清除

A:浮动的表示:

1.浮动的写法:float:left/right;

            Float:使HTML元素向左或向右浮动,取值:leftright

2.浮动的元素,可以向左或向右浮动,直到碰到包围框的边上或者上一个浮动框的边上为止;

3.浮动的元素将脱离普通文档流,并且不再占用空间,浮动元素的层级要高于普通文档流中的元素。

浮动元素将生成块元素,不管它原来是什么元素(块元素、行元素)。换句话说,行内元素浮动后,将变成块元素,就可以设置widthheight

注意:行内元素<span>设置widthheight是没有用的,行内元素主要是靠内容决定widthheight


B:浮动的清除:

  1. 浮动清除的写法:.clear:both/left/right;                                            

                   Clear:清除上面的浮动特性,取值:left(左浮动)right(右浮动)both(两者)

1)如何让包围元素(边框)从“视觉上”包住浮动元素呢?怎样实现下图的样式:wKioL1c3LcmyLlSEAAFkkr4XT8Y509.png

答:就需要在包围元素的最下边(浮动元素)加上一个清除浮动<div class="clear"></div>,然后再在style中添加属性,以此来实现

2)清除浮动的后面的其它元素,都将恢复默认排版,不会继承前面元素的性质。


(二)CSS盒子模型

每一个HTML元素,都可以看成一个“盒子”。一个“盒子”具有:内容的宽或高、边框线、内边距、外边距。一个“盒子”具有:widthheightborderpaddingmargin

如下图:

wKiom1c3LIiAblckAAC5Nhrz4co202.png

例如:

1.一个“盒子”宽度或高度的计算:内容宽为70px,左右内边距分别为5px、左右外边距分别为10px,求“盒子”的宽度?

总宽度=内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px

2.盒子总宽度为100px,内容宽度80px,内填充5px,求左右的外边距?

       一个外边距=(100px – 80px –10px)/2 = 5px

如图:

wKioL1c3LvyQIC8KAAA8j5GbJN4075.jpg


三)CSS边框属性:

A:表示形式:

   1. Border-left/right:设置元素的左/边线,像边线的粗细、线型、颜色;

              例如:border-left/right:2px solid #FF0000;

   2. Border-top/bottom:设置元素的顶边框线/下边框线

   3.Border:简写形式,同时设置四个边框线;

       border:1px solid #FF0000; //同时设置四个边框线

    

B:线型的取值:

       None:无边线;

       Solid:实线;

       Dashed:虚线;

       Dotted:点状态线

       Double:双线

(四)CSS填充

A:内边距

Padding-top:上内填充距离

Padding-right:右内填充距离

Padding-bottom:底内填充距离

Padding-left:左内填充距离

Padding:简写形式

       Padding5px;   //上右下左内填充分别为5px

       Padding5px 10px;  //上下分别为5px,左右分别为10px

       Padding5px 10px 15px;  //上填充5px,左右分别为10px,下填充为15px

       Padding5px 10px 15px 20px;  //顺序必须为:上右下左,上填充5px,右填充10px,下填15px,左填充20px

 

B:CSS外边距

Margin-top:上外边距

Margin-right:右外边距

Margin-bottom:下外边距

Margin-left:左外边距

Margin:简写形式

       Margin:5px;   //上右下左,外边距分别为5px

       Margin:5px10px;  //上下分别为5px,左右外边距分别为10px

       Margin:5px10px 15px;  //上外边距5px,左右外边距分别10px,下外边距15px

       Margin:5px10px 15px 20px;  //分别设置四个外边距,顺序是:上右下左

margin尽量少用,因为不同的浏览器的兼容性是不一样的。


一般会出现向下面的情况:外边距合并的问题(怪异现象)

1.两个垂直块元素的上下外边距,会发生合并的问题,取其中较大的一个值。

2.行内元素、浮动元素、定位元素,外边距不会发生合并;

解决的方法:

       1)只能其中一个元素增加下外边距,另一元素的上外边距设置为0px

       2)也就是在上下两个元素的中间,加一个100px高的空<div>

 

 

HTML引入CSS的方法

1、内嵌式

       通过<style></style>标记来引入CSS代码,<style>一般放在<head>标记中;

      

<style type=“text/css”>
       Body{
              Margin:0px;
              Padding:0px;
}
</style>


2、外链式:链接外部的CSS文件(.css)

       通过<link>标记,来引入外部的CSS文件,<link>标记一般放在<head>标记中

       格式:<link  href=CSS文件路径” rel=stylesheet type=text/css />

       Href:指定外部CSS文件的路径和名称;

       Rel:当前文件与链入的文件的关系,取值:stylesheet

       例如:<link href=css/public.css rel=stylesheettype=text/css />

 

3、行内式

       每一个HTML元素都有一个公共属性style,通过该属性可以直接给该元素添加样式,并且它的优先级最高

<p style=width:400px;height:300px;border:1pxsolid #444;padding:20px;>这里是一个段落</p>

 

选择器优先级:style行内样式> ID选择器 > class类选择器 > 标签选择器

 

想要背景覆盖整个文字区域,则需要清除上面的浮动。如:<div class=”clear”></div> 

在没有进行浮动清除之前,后面的内容会依照上面的浮动格式进行填充。就像上图一样。想要达到文字正常排列则需要清除浮动。如:<div class=”clear”></div>

 如图:

wKioL1c3M1LBj_4CAAHS5LlbU2E765.jpg

wKioL1c3M1PCWGJZAALbwIoKdZg524.jpg



提示:元素浮动,可以使用行内元素转成“块元素”

一个行内元素,要想宽和高能用,可我不想进行浮动,能否实现?

答:可以。用Display来实现。display的属性:可以取值:none()block(块元素)inline(行内元素)