欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#盒子模型

网页基础同时被 2 个专栏收录

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

项目	价格
文字排版–字体	`body{font-family:"宋体";}`
文字排版–字号、颜色	`body{font-size:12px;color:#666}`
文字排版–粗体	`p span{font-weight:bold;}`
文字排版–斜体	`p a{font-style:italic;}`
文字排版–下划线	`p a{text-decoration:underline;}`
文字排版–删除线	`.oldPrice{text-decoration:line-through;}`
段落排版–缩进	`p{text-indent:2em;}`段首缩进两个字
段落排版–行间距（行高）	`p{line-height:1.5em;}`
段落排版–中文字间距	`letter-spacing:50px;`
段落排版–字母间距	`word-spacing:50px;`
段落排版–对齐	`text-align:center;`

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
4、 display:inline 设置为内联元素

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

说明：

display:block可以将内联元素设置为块级元素

内联元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

<img>、<input>

inline-block 元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

例如：

<style type="text/css">
a{
    display:inline-block;
    width:60px;/*在默认情况下宽度不起作用*/
    height:20px;/*在默认情况下高度不起作用*/
    background:pink;/*设置背景颜色为粉色*/
    text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>第1页</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>

结果：
这里写图片描述

盒子模型

盒模型–边框（一）

div{
    border:2px  solid  red;
}

相当于

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

盒模型–边框（二）

设置部分边框

div{
    border-bottom:1px solid red;
    border-top:1px solid red;
    border-right:1px solid red; 
    border-left:1px solid red;
}

盒模型–宽度和高度

这里写图片描述

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

这里写图片描述

填充（内容和边框之间的距离）：padding

盒模型–边界

div{margin:20px 10px 15px 30px;}

注意：

padding和margin的区别，padding在边框里，margin在边框外。