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

林书尼

粉丝: 28
资源: 315

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

笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-基于springboot的笔记记录分享网站

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

ES6笔记笔记笔记笔记笔记

docker笔记笔记笔记笔记笔记笔记

笔记，笔记，笔记，笔记

笔记

HTML笔记. J2EE笔记. Javascript笔记. JAVA笔记.oracle 笔记.Linux笔记.tomcat笔记.面试问题.数据结构.听韩顺平的笔记.正则表达式.

cmake笔记 cmake 笔记 cmake笔记 cmake

印象笔记怎么共享笔记本 印象笔记共享笔记本图文教程.docx

笔记我的笔记我的笔记本1111

最新资源

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

印象笔记怎么共享笔记本印象笔记共享笔记本图文教程.docx