当前位置:Gxlcms > css > css盒模型简介

css盒模型简介

时间:2021-07-01 10:21:17 帮助过:119人阅读


盒模型

1 盒子中的区域

<1>盒子的主要属性:
width 宽度,css中width指的是内容的宽度,而不是盒子的宽度。 
height高度 ,css中Height指的是内容的高度,而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距
<2>下面两个盒子,真实占有宽高,完全相同,都是302*302:
.box1{
    width:100px;
    height:100px;
    padding:100px;
    border:1px solid red;}
计算如下:1+100+100+100+1=302px.box2{
    width:250px;
    height:250px;
    padding:25px;
    border:1px solid red;}
计算如下:1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式:
真实占有宽度=左border+左padding+width+右padding+右border
<3>如果想保持一个盒子的真实占有宽度不变,那么加width就要减padding,加padding就要减width.

2.认识padding

<1>padding的区域有背景颜色,在css2.1中背景颜色一定和内容区域的相同。
<2>padding是4个方向的,所以我们能够分别描述4个方向的padding.

第一种:小属性,也就是复合属性。

padding-top:30px;  上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左

第二种:综合属性。
空格隔开,上右下左。

padding:30px 20px 40px 100px;
<3>可以用小属性层叠大属性(不能把小属性写在大属性前面):
padding:20px;padding-left:30px;

题目一:

p{   
width:200px;    
height:200px;    
padding-left:10px;    
padding-right:20px;    
padding:40px 50px 60px;    
padding-bottom:30px;    
border:1px  solid #000;
}

答:padding-left:10px;和 padding-right:20px;没用,因为后面的padding大属性,层叠掉了他们。

<4>一些标签默认带有padding.比如ul.所以说,我们做站的时候,会清除这个默认的padding.

3.border 边框

<1>边框三要素:粗细、线型、颜色。
<2>所有的线型:
none    定义无边框。 
hidden  与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 
dotted  定义点状边框。在大多数浏览器中呈现为实线。 
dashed  定义虚线。在大多数浏览器中呈现为实线。 
solid   定义实线。 
double  定义双线。双线的宽度等于 border-width 的值。 
groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。 
ridge   定义 3D 垄状边框。其效果取决于 border-color 的值。 
inset   定义 3D inset 边框。其效果取决于 border-color 的值。 
outset  定义 3D outset 边框。其效果取决于 border-color 的值。 
inherit 规定应该从父元素继承边框样式。 
常用的有:solid 、dashed、 dotted
<3>border属性能够被拆开,有两大种拆开的方式:

第一种:按要素

border-width:10px;  
边框宽度border-style:solid;    
线型border-color:red;      
颜色等价于:border:10px solid red;

如果某一个小要素后面是空格隔开的多个值,那么就是上右下左的顺序:

border-width:10px 20px;border-style:solid dashed dotted;border-color:red  green blue yellow;

第二种:按方向
第一种拆法:

border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于:border:10px solid red

第二种拆法:就是把每个方向的,每个要素拆开:

border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于:border:10px solid red;
<4>可以用边框做三角形。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style type="text/css">
        p{            
        width: 0px;            
        height: 0px;            
        border: 30px solid white;            
        border-top-color: pink;            
        transition:all 1s ease 0s;        
        }
        p:hover{            
            transform: rotate(180deg);        
            }
    </style>
    </head>
    <body>
    <p>
    </p>
    </body>
    </html>

4.标准文档流

4.1块级元素和行内元素

<1>从宏观上讲,web页面和Ps等设计软件有本质的趋避:
web页面的制作,从上往下。而设计软件,想往哪里画东西,都可以画。
<2>标准流的微观性质:
(1)空白折叠现象。
(2)高矮不齐,底边对齐。
(3)自动换行,一行写不完,换行写。
<3>块级元素和行内元素
(1)标签分为两种等级:块级元素和行内元素。
(2)块级元素:

霸占一行,不能与其他任何元素并列。
能接受宽高。
如果不设置宽度,那么宽度将默认变为父亲的100%。

(3)行内元素:

可以与其他行内元素并排。
不能设置宽高。默认的宽度,就是文字的宽度。

(4)标签分为:文本级、容器级。

文本级:p、span、a、b、i、u、em
容器级:p 、h系列 、li 、dt 、dd

基本上所有的文本级标签,都是行内元素。除了p,是块级元素。
所有的容器级标签,都是块级元素。

4.2块级元素和行内元素的相互转换

<1>块级元素可以设置为行内元素。行内元素可以设置为块级元素。
<2>display用来改变元素的行内、块级性质。

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

<3>css中一共有三种手段,使一个元素脱离标准文档流。
(1)浮动
(2)绝对定位
(3)固定定位

5.浮动:是CSS里面布局用的最多的属性。

5.1浮动的元素脱标
5.2浮动的元素互相贴靠

<1>如果有足够的空间,会靠着二哥。如果没有足够的空间,会靠着一哥。如果没有足够的空间靠着一哥,自己去贴左墙。
<2>float:left/right;

5.3浮动的元素有“字围”效果

以上就是css盒模型简介的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行