HTML+CSS学习笔记：布局、盒模型与样式控制

html

需积分: 0 5 浏览量更新于2024-06-30 收藏 803KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"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页未读，继续阅读

林书尼

粉丝: 23
资源: 315

HTML+CSS学习笔记：布局、盒模型与样式控制

ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记

小程序源码 云笔记 (代码+截图)

基于libgraphics和simpleGUI库，生成一个笔记管理系统，打开笔记、关闭笔记、保存笔记、使用说明等内容  支持笔记创建，允许用户自主创建笔记以及命名  支持笔记编辑，允许用户对笔记内容进行编辑，文本输入

onenote笔记导入有道云笔记

用c语言帮我完成一个笔记管理系统，功能要求为打开笔记、删除笔记，支持笔记创建，允许用户自主创建笔记以及命名；支持笔记查询，允许用户通过搜索功能查找所需的笔记

android模拟应用市场上笔记软件实现笔记软件的基本功能,并将笔记结果保存到Android本地数据库，并且功能中至少需要包含recycleview控件显示所有的笔记目录

icloud不同步笔记，笔记会丢失吗

用c语言写笔记管理系统，如何查找笔记

python 实现笔记本的增删改

ubuntu好用的笔记软件

最新资源

小程序源码云笔记 (代码+截图)