css —— 框模型(w3school学习笔记)

CSS 框模型 (Box Model)

css框模型是针对 块标签 而言的
css —— 框模型(w3school学习笔记)_第1张图片
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。

1、内边距(padding)

padding 属性定义元素的内边距。padding 属性接受 长度值 或 百分比值(百分数值是相对于其父元素的 width 计算的),但不允许使用负值。

设置内边距的方式:
1,h1 {padding: 10px;}
2、h1 {padding: 10px 0.25em 2ex 20%;}
3、h1{padding: 0.5cm 2.5cm}
4、h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
示例:

<html>
<head>
	<style type="text/css">
		td.test1 {padding: 1.5cm}
		td.test2 {padding: 0.5cm 2.5cm}
		td.text3 {padding-bottom: 2cm}
	style>
head>

<body>
<table border="1">
	<tr>
		<td class="test1">
			这个表格单元的每个边拥有相等的内边距。
		td>
	tr>
table>
<br/>

<table border="1">
	<tr>
		<td class="test2">
			这个表格单元的上和下内边距是 0.5cm,左和右内边距是 2.5cm。
		td>
	tr>
table>
<br/>

<table border="1">
	<tr>
		<td class="text3">
			这个表格单元拥有下内边距。
		td>
	tr>
table>


body>

html>

css —— 框模型(w3school学习笔记)_第2张图片

2、外边距(margin)

外边距可以参考内边距

*值复制(顺时针方向)

如果缺少左外边距的值,则使用右外边距的值。
如果缺少下外边距的值,则使用上外边距的值。
如果缺少右外边距的值,则使用上外边距的值。
下图提供了更直观的方法来了解这一点:
在这里插入图片描述

<html>
<head>
	<style type="text/css">
		p.margin {margin: 2cm 4cm 3cm 4cm}
	style>
head>

<body>

	<p>这个段落没有指定外边距。p>

	<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。p>

	<p>这个段落没有指定外边距。p>

body>

html>

css —— 框模型(w3school学习笔记)_第3张图片

3,边框(border)

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

<html>
<head>
	<style type="text/css">
		p.h1{
			border: medium double rgb(250,0,255)
		}
		
		/*thin,medium,thick 细、中等、粗*/
		p.h2{
			border-style: dotted
		}
		
		p.h3{
			border-style: solid;
			border-width: 5px 10px 1px medium
		}
		
		p.h4{
			border-style:solid;
			border-left:thick double #ff0000;
		}
		
		p.h5{
			border-style: solid;
			border-left-color: #ff0000
		}

	style>
head>

<body>

	<p class="h1">Some textp>
	<p class="h2">Some textp>
	<p class="h3">Some textp>

	<p><b>注释:b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。p>

	<p class="h4">Some textp>
	<p class="h5">Some textp>

body>

html>

none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
solid : 实线边框
double :双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge: 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset :根据border-color的值画3D凸边

css —— 框模型(w3school学习笔记)_第4张图片

你可能感兴趣的:(css,框模型)