CSS基础入门：定位、尺寸与堆叠技巧

需积分: 0 108 浏览量更新于2024-08-04 收藏 1.28MB DOCX 举报

CSS基础知识1涵盖了多个重要的概念，包括布局、字体大小设置、坐标体系、定位方法、内容溢出处理以及图像垂直对齐和堆叠控制。首先，了解字体大小在布局中的关键作用是必不可少的。在CSS中，推荐将`<body>`的`font-size`设置为62.5%，然后使用`em`作为单位，这有助于实现响应式设计，因为1em等于10px，方便在不同屏幕尺寸下调整。默认情况下，字体大小通常是16px。 CSS的坐标系统有两个主要版本：默认的二维坐标轴体系，原点位于元素的左上角；而CSS3D引入的坐标系则是以观看者为中心，x轴从左到右，y轴从上到下，z轴从屏幕朝向观看者。这为3D效果提供了基础。关于元素定位，HTML中的元素根据display属性的不同分为块级元素和行内元素。块级元素有独立的框，而行内元素则需要通过`display: block;`变成块级。`display: none;`则会隐藏元素但不占据空间。这些元素的排列就像积木一样，无名框（如`<div>`和`<p>`）的样式通常难以直接应用。 CSS的position属性决定了元素在页面上的定位方式：静态位置（Static）遵循文档流，相对位置（Relative）偏移但保留空间，绝对位置（Absolute）脱离文档流并相对于包含块定位，固定位置（Fixed）则相对于视窗定位。理解这些属性对于精确控制元素位置至关重要。 overflow属性用于管理内容溢出，提供三种模式：hidden（隐藏溢出）、scroll（添加滚动条）和auto（浏览器自动处理）。这对于确保内容在有限空间内的可读性非常有用。 clip属性用于绝对定位元素的裁剪，定义一个可视区域，超出这个区域的内容由overflow属性处理。默认情况下，元素不会被裁剪，`auto`表示浏览器根据内容自适应裁剪。垂直排列图像时，`vertical-align`属性可以设置为`text-top`或`text-bottom`，使图像顶部或底部与文本对齐，增强视觉一致性。最后，CSS的Z-index属性控制元素在堆叠顺序中的位置，值越大，元素越靠前，从而实现更复杂的层叠效果。通过理解并掌握这些CSS基础知识，开发者可以更自如地创建和维护复杂的网页布局。

取消文字环绕效果，设置 clear 属性

Clear: left, right 表示被设置该属性的行框哪边不应挨着浮动框

增加上外边距达到该效果

子元素全部设置浮动，会使元素脱离容器，增加一个元素专门用来设置 clear 来避

免这种情况

直接让容器浮动同样可以避免这种情况，浮动会得到继承

CSS 对齐

块元素，占据全部可用宽度，前后会自动换行 P, div…

Margin: auto 设置成居中效果，均分可用外边距

必须声明!doctype

Width 不能是 100%

Position 属性 relative，absolute，然后设置水平位置

必须声明！doctype

取消 body 默认设置 body{margin：0px; padding: 0px;}

解决兼容问题

Float 属性 right，left 设置水平位置

CSS 尺寸

图像尺寸

图像也是元素，改变图像的方法同样适用其他块模型

Img{height: 30px; width: 30px;} 像素形式

Img{ height:30% ; width: 30%;} 百分比形式

剩余13页未读，继续阅读

BellWang

粉丝: 27
资源: 315

CSS基础入门：定位、尺寸与堆叠技巧

DIV+CSS教程——第一天XHTML_CSS基础知识

CSS基础知识超全整理

CSS基础知识学习笔记

vue css基础知识

html css基础知识汇总

html和css基础知识

css基础知识vue

CSS从入门到精通——基础知识

请列举css和html的基础知识

最新资源