Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

HTML+CSS学习笔记 (11)

WBOY

Release： 2016-06-24 11:24:21

Original

1145 people have browsed it

元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

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

Copy after login

常用的内联元素有：

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

Copy after login

常用的内联块状元素有：

<img  alt="HTML+CSS学习笔记 (11)" >、<input>

Copy after login

元素分类--块级元素

什么是块级元素？在html中

、

、

、

、

就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
```
a{display:block;}
```
Copy after login
块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类--内联元素

在html中，、、、和就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{ display:inline; }......<div>我要变成内联元素</div>
Copy after login

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

元素分类--内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img alt="HTML+CSS学习笔记 (11)" >、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{ border:2px solid red;}
Copy after login

上面是 border 代码的缩写形式，可以分开写：

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

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。
Copy after login

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。
Copy after login

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。
Copy after login

盒模型--边框（二）

现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}
Copy after login

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;
Copy after login

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

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

html代码：

<body> <div>文本内容</div></body>
Copy after login

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

盒模型--填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}
Copy after login

顺序一定不要搞混。可以分开写上面代码：

div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}
Copy after login

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}
Copy after login

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}
Copy after login

盒模型--边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}
Copy after login

也可以分开写：

div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}
Copy after login

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}
Copy after login

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}
Copy after login

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

我的公众号二维码

Related labels：
HTML+CSS学习笔记 (11) - CSS盒模型

source：php.cn

Previous article：树的内核：量化树结构化数据之间的相似性_html/css_WEB-ITnose Next article：CSS 下拉菜单详解

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29

From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41

Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51

Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31

Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51

Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41

Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41

PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21

Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11

The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

2

1807

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

10

1954

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1659

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1559

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1591

Related Topics
More>

Convert text to numeric value

The role of index.html

window.setinterval

What is topology optimization

Recommended order for learning c++ and c language

How to set css dotted border

How to watch live broadcast playback records on Douyin

tim mobile online

Popular Recommendations

What does url mean?

What does DOM mean?

How to change image size

How to make font bold in HTML

How to set the size of html images

Popular Tutorials
More>

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1417377

PHP introductory tutorial one: Learn PHP in one week

4258493

JAVA Beginner's Video Tutorial

2479263

Little Turtle's zero-based introduction to learning Python video tutorial

504090

PHP zero-based introductory tutorial

844347

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1417377 times of learning

JAVA Beginner's Video Tutorial

2479263 times of learning

Little Turtle's zero-based introduction to learning Python video tutorial

504090 times of learning

Quick introduction to web front-end development

215317 times of learning

Master PS video tutorials from scratch

877948 times of learning

[Web front-end] Node.js quick start

6469 times of learning

Complete collection of foreign web development full-stack courses

5079 times of learning

Go language practical GraphQL

4264 times of learning

550W fan master learns JavaScript from scratch step by step

634 times of learning

Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

21722 times of learning

Latest Downloads
More>

Web Effects

Website Source Code

Website Materials

Front End Template

[form button] jQuery enterprise message form contact code

[Player special effects] HTML5 MP3 music box playback effects

[Menu navigation] HTML5 cool particle animation navigation menu special effects

[form button] jQuery visual form drag and drop editing code

[Player special effects] VUE.JS imitation Kugou music player code

[html5 special effects] Classic html5 pushing box game

[Picture special effects] jQuery scrolling to add or reduce image effects

[Photo album effects] CSS3 personal album cover hover zoom effect

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

[PNG material] Cute summer elements vector material (EPS PNG)

[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)

[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)

[PNG material] Golden graduation cap vector material (EPS PNG)

[PNG material] Black and white style mountain icon vector material (EPS PNG)

[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses

[banner picture] Flat style Arbor Day banner vector material (AI+EPS)

[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！