HTML+CSS学习笔记：布局、盒模型与样式控制
需积分: 0 130 浏览量
更新于2024-06-30
收藏 803KB DOCX 举报
"HTML和CSS基础及布局技巧"
HTML（超文本标记语言）是网页内容的结构标记语言，而CSS（层叠样式表）则用于定义这些结构的外观和布局。在HTML中，`<div>`元素是一种常见的块级元素，常用于组织和布局页面内容。`id`和`class`是CSS选择器，用于指定特定元素的样式。
CSS的引入方式主要有三种：
1. 内联样式：通过在HTML元素的`style`属性中直接写入CSS代码。
2. 内部样式表：在`<head>`标签内使用`<style>`标签定义CSS规则。
3. 外部样式表：创建单独的`.css`文件，然后在HTML中通过`<link>`标签引用。
在布局中，`float`属性用于使元素浮动，如`float:left`可以让元素向左浮动，以实现元素并排显示。为了防止浮动元素影响其他元素，可以使用`clear:left`来清除浮动。
在HTML中，`<div>`的嵌套可以构建复杂的布局结构。如果一个父`div`包含两个浮动的子`div`，即使父`div`的高度小于子`div`，它也会被子`div`的高度撑开。
CSS的边距（Margin）、内边距（Padding）和边框（Border）共同构成了盒子模型。例如，`margin:10`表示所有边距为10像素，`margin:10,20,30`则按上、右、下、左的顺序设定边距。`margin:0 auto`可以使元素在容器中水平居中。
当两个普通元素之间的上下边距相遇时，它们的边距并不简单相加，而是取较大值，这是一种称为“margin重叠”的现象。对于父子元素，子元素的外边距不会影响父元素，但相邻的普通元素和浮动元素的外边距则会相加。
块状元素如`<div>`可以设置宽度、高度、垂直方向的边距和内边距，并占据整行空间。内联元素如`<a>`、`<span>`等，只占据自身内容的宽度，可以设置水平方向的边距和内边距。然而，通过CSS可以将内联元素转换为块状元素，或者使块状元素具有内联元素的特性。
常用的块状元素包括`<address>`、`<blockquote>`、`<div>`、`<h1>`至`<h6>`、`<p>`、`<pre>`、`<table>`、`<ul>`等，它们主要用于构建页面结构。内联元素如`<a>`（链接）、`<abbr>`（缩写）、`<acronym>`（首字母缩写）等，通常用于展示文本内容并实现特定功能。
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量
14.块状元素独占一行，可以设置宽高，可以设置水平和竖直方向的
margin,padding。
行内元素并不独占一行，不可设置宽高，不可设置竖直方向的
marging 和 padding,但是可以设置水平方向的 margin 和 padding。
15.display 可能的值
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从
CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从
CSS2.1 中删除。
剩余23页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
277 浏览量
2022-02-01 上传
