欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS 之 核心篇_html/css_WEB-ITnose

程序员文章站 2024-02-05 22:52:16
...
前提:

块级元素:div标签为为块级元素,在网页上表示为占满一行的
行内元素:span标签为行内元素,的长度只和字符的长度有关

小例子:

    阿狗    阿兔f阿牛

效果:


行内元素转换为块级元素的方法,例:将span标签的美容转换成也横跨一整行的方法

阿狗


小例子:
.ttt{    display:block;}

效果:

标准流 概念:标签的排列方式,显示的时候按照书写的顺序进行排列。比如上例中的阿猫和阿狗的显示顺序以及样式页的

优先级都和标准流相关。

盒子模型

我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

盒子模型分为外边距:border(top,bottom,left,right),内边距:padding(top,bottom,left,right),内容:content(width,height),画框:margin(top,bottom,left,right)


每个标签就相当于一个盒子。通过盒子模型来设置每个标签的内外边距。

小例子(1):

.menu{                              /*栏目样式*/    color:#00f;                             /*文字颜色*/    background-color :#ffd800;    border-width:5px;    border-color :#0ff;    border-style:solid;}


效果:

小例子(2)

内边距属性写法  /*padding-top: 5px;    padding-left : 5px;    padding-bottom : 5px;*/    /*padding: 5px;*/                      /*如果据上下左右的边距一样的话可以这样写*    padding:5px  6px  7px  8px;     /*默认的是逆时针上右下左的顺序*/      
外边距(margin)和内边距的写法相同写法(注意上下两个栏目都有外边距时,则两个之间的距离取最大值)

效果:

注意:行内样式对边距,长等即盒子模型都是没有响应的。

浮动 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于盒子模型是针对块级

元素的,通过浮动可以让块级元素排成一行。脱离了标准流。

小例子:

float:left ;         /*盒子向左浮动*/

效果:

clear:left;         /*清除浮动*/
给大家推荐一个对浮动介绍的比较详细的网址:http://www.w3school.com.cn/css/css_positioning_floating.asp

定位 relative,相对定位。定位某一个块级元素,没有脱标准流。相对于原来的位置。所以阿猫的位置还是相对于原来阿狗的位置。

position:relative;   /*相对定位*/    top:20PX;


absolute,绝对定位。相对于盒子之外更外一层盒子,脱离了标准流。

点睛:盒子模型是一个伟大的模型,通过和实际生活相结合,我们在网页设计的格式掌握的更加透彻和简单。

相关标签: CSS 核心篇