布局、div入门
2018-03-19 本文已影响0人
能吃饭也能吃苦1236
块级元素和行内元素
- 块级元素：占据其父元素（容器）的整个空间，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
background-color: #8ABB55;
}
</style>
</head>
<body>
<p>
This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.
</p>
</body>
</html>
- 行内元素:一个挨着一个展示，换行表示空格，代码如下：
<style>
a {
border: 1px solid red;
}
span {
border: 1px solid black;
}
</style>
</head>
<body>
<a href="#">google 1</a>
<a href="#">google 2</a>
<span><span></span>
<a href="#">google 3</a>
<span><span></span>
<a href="#">google 4</a><span><span></span>
<input type="text">
<button>button</button>
<br>
</body>
- display属性
display: block; /* 行内元素转块级元素 */
width: 200px;/* 设置块级元素宽度 */
height: 20px;/* 设置块级元素高度 */
display: list-item;/* 去掉列表前面的点 */
display: inline-block;/* 水平布局，中间有空白（空白与字体大小和浏览器有关） */
width: 90px;
- 只有块级元素能设宽高
盒模型
-
给元素加边框:勾选border
1.png
2.png
margin: 300px; /* 外边距：边框距离外部容器的距离 */
padding: 50px; /* 内边距 */
border: 20px;/* 边框*/
- 外边距合并：其大小取其中的最大值
- 设置盒子宽度
box-sizing: border-box;/* 设置内容宽度 */
box-sizing: content-box;/* 设置盒子宽度 */
显示< >符号:<标签>
<p><br> /* <p> */
在HTML中多输出空格： 
<a href="#">google 3</a>   <span><span></span>
预格式化文本(pre标签):只具有全局属性
cols /* 定义每行的最大字符数。这是一个非标准的属性，作用与`[width](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/pre#attr-width)`相同。要实现这样的效果，应该使用CSS。 */
width /* 包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。 */
wrap /* 提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。 */
<pre>
body {
color:red;
}
</pre>
em标签：标记出需要用户着重阅读的内容
- 此元素只包括全局属性
<em> 元素通常被用于指示一个隐式或显式的对比。
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
- <i> vs. <em>
在 默认情况下，视觉效果是一样的- 这两个标签都把内容呈现为斜体. 但语义是不同的。 <em> 标签表示着重强调其内容，而 <i> 标签表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。
