Rumah > Artikel > hujung hadapan web > css盒模型简介

css盒模型简介

一个新手asal: 2017-09-11 10:32:041807semak imbas

盒模型

1 盒子中的区域

f35d6e602fd7d0f0edfa6f7d103c1b57盒子的主要属性：

width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 
height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距

2cc198a1d5eb0d3eb508d858c9f5cbdb下面两个盒子，真实占有宽高，完全相同，都是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

5bdf4c78156c7953567bb5a0aef2fc53如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width.

2.认识padding

f35d6e602fd7d0f0edfa6f7d103c1b57padding的区域有背景颜色，在css2.1中背景颜色一定和内容区域的相同。

2cc198a1d5eb0d3eb508d858c9f5cbdbpadding是4个方向的，所以我们能够分别描述4个方向的padding.

第一种：小属性，也就是复合属性。

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

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

padding:30px 20px 40px 100px;

5bdf4c78156c7953567bb5a0aef2fc53可以用小属性层叠大属性(不能把小属性写在大属性前面)：

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大属性，层叠掉了他们。

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

3.border 边框

f35d6e602fd7d0f0edfa6f7d103c1b57边框三要素：粗细、线型、颜色。

2cc198a1d5eb0d3eb508d858c9f5cbdb所有的线型：

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

5bdf4c78156c7953567bb5a0aef2fc53border属性能够被拆开，有两大种拆开的方式：

第一种：按要素

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;

23889872c2e8594e0f446a471a78ec4c可以用边框做三角形。

<!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块级元素和行内元素

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

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

（3）行内元素：

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

（4）标签分为：文本级、容器级。

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

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

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

f35d6e602fd7d0f0edfa6f7d103c1b57块级元素可以设置为行内元素。行内元素可以设置为块级元素。
2cc198a1d5eb0d3eb508d858c9f5cbdbdisplay用来改变元素的行内、块级性质。

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

5bdf4c78156c7953567bb5a0aef2fc53css中一共有三种手段，使一个元素脱离标准文档流。
（1）浮动
（2）绝对定位
（3）固定定位

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

5.1浮动的元素脱标

5.2浮动的元素互相贴靠

f35d6e602fd7d0f0edfa6f7d103c1b57如果有足够的空间，会靠着二哥。如果没有足够的空间，会靠着一哥。如果没有足够的空间靠着一哥，自己去贴左墙。
2cc198a1d5eb0d3eb508d858c9f5cbdbfloat:left/right;

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

Atas ialah kandungan terperinci css盒模型简介. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何用CSS实现多栏布局Artikel seterusnya：bootstrap中关于时间控件

Artikel berkaitan

Lihat lagi