网页布局基础

亦凉 2022-06-14 06:25 245阅读 0赞

1  CSS 规定的定位机制有三种，分别是

标准文档流(Normal folw)

浮动(Floats)

绝对定位(Absolute positioning)

2 W3C标准：

由万维网制定的一系列标准，包括：

结构化标准语言(HTML和XML)

表现标准语言(CSS)

行为标准语言(DOM和ECMAScript)

倡导结构，样式，行为分离

3 标准文档流(Normal flow)

特点：

从上到下，从左到右，输出文档内容，由块级元素和行级元素组成

(1) 块级元素

特点：

从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行

常见块级元素：div，ul，li，dl，dt，p...

(2) 行级元素

特点：

能在同一行内显示，不会改变HTML文档结构

常见行级元素：span，stronng,img,input...

块级元素呵呵行级元素都是盒子模型

4 盒子模型

盒子模型=网页布局的基石，由4部分组成

边框(border)

外边距(margin)

内边距(padding)

盒子中的内容(content)

盒子模型的尺寸=边框+外边距+内边距+盒子中的内容尺寸

5.清除浮动

在受到浮动影响的标签中设置属性：

(1) clear：both;

(2) width:100%; overflow:hidden;

6.position属性有3中定位形式：

1、静态定位
    2、相对定位
    3、绝对定位
    可设置4种属性值：
    static（静态定位）
    relative（相对定位）
    absolute（绝对定位）
    fixed（固定定位）

relative(相对定位): 无定位祖先是参照html，而不是body；

设置绝对定位时，没设置宽度，那么它的宽度是由内容决定的；

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS基础框盒模型：打造炙手可热的网页布局！

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的...

旧城等待，/ 2024年04月21日 08:16/ 0 赞/ 45 阅读

相关 CSS 网页布局基础

阅读目录基础布局 1 一行布局 2 二行布局 3 一列布局 4 二列布局 5 混合布局

阳光穿透心脏的1/2处/ 2023年10月07日 20:04/ 0 赞/ 62 阅读

相关 css布局方式(CSS网页布局)

CSS网页布局有何技巧？ Example Source Code .left-blue \{ color: \369; \} 你可能立即知道这个类选择符是为左侧边栏的

╰半橙微兮°/ 2023年09月26日 13:10/ 0 赞/ 9 阅读

相关网页布局的方式

第一种：DIV+CSS 利用div的方式来划分页面布局，很简单，主要是对样式的运用，这里先来普及下margin标签和padding标签的作用，这两个标签都是相对而言的，容

淡淡的烟草味﹌/ 2022年11月19日 04:30/ 0 赞/ 186 阅读

相关 CSS 网页布局

网页布局网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。 ![17d96443520bbf4facda9904c13a7d85

雨点打透心脏的1/2处/ 2022年09月12日 01:46/ 0 赞/ 284 阅读

相关网页布局基础

1 CSS 规定的定位机制有三种，分别是标准文档流(Normal folw) 浮动(Floats) 绝对定位(Abso

亦凉/ 2022年06月14日 06:25/ 0 赞/ 246 阅读

相关网页布局

布局方式 > 静态布局：网页上所有元素尺寸使用px为单位。 > 流式布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 > 自适应布局：自适应布局的特点

落日映苍穹つ/ 2022年05月17日 01:22/ 0 赞/ 263 阅读

相关前端基础2——CSS基本样式修饰、网页布局

目录一、CSS基本样式修饰 1，字体常用样式 2，文本常用样式 3，超链接样式 4，背景类样式 5，列表样式 6，表格样式 7，轮廓样式二、网页布局 1

r囧r小猫/ 2022年05月08日 09:48/ 0 赞/ 439 阅读

相关网页布局方式

<table> <tbody> <tr> <td><img alt="" height="252" src="https://img-blog.csdnimg

àì夳堔傛蜴生んèń/ 2022年02月28日 11:38/ 0 赞/ 264 阅读

相关网页布局方式

总结一下下网页布局的几种方式： 1. 流式布局：为网页设置一个相对的宽度，通常以百分比%做为长度单位。更加适合屏幕变化。 2. 栅格化布局：将网页宽度人为的划分成均等的长

偏执的太偏执、/ 2021年11月29日 10:10/ 0 赞/ 379 阅读