CSS布局基础汇总_html/css_WEB-ITnose
一列布局
两列布局
如果没有加float的话，不能实现并排的两列布局。
三列布局
三列布局：左侧和右侧固定，中间自适应：
- 标准文档流
- 浮动
- 绝对定位
{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* 占据空间，无法点击 */ }{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }在父级添加 overflow：hidden
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
父元素也设置浮动（加个float：left/right）
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
父元素设置 display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
使用 :after 伪元素
优点：需要注意的是 :after 是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
缺点：兼容性不是很好。
在浮动的元素后面添加空标签
清除浮动优点：简单明了
缺点：无意义的空标签，不利于语义化 DIV+CSS规范命名集合
| 1）、所有的命名最好都小写 |
| 2）、属性的值一定要用双引号(“”)括起来，且一定要有值如class=”divcss5”,id=”divcss5” |
| 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 |
| 4）、空元素要有结束的tag或于开始的tag后加上”/” |
| 5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 |
| 6）、定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 |
| 7）、给每一个表格和表单加上一个唯一的、结构标记id |
| 8）、给图片加上alt标签 |
| 9）、尽量使用英文命名原则 |
| 10）、尽量不缩写，除非一看就明白的单词 |
| wrapper | 页面外围控制整体布局宽度 | master.css,style.css | 主要的 | |
| container或#content | 容器,用于最外层 | module.css | 模块 | |
| layout | 布局 | base.css | 基本公用 | |
| head,#header | 页头部分 | layout.css | 布局,版面 | |
| foot,#footer | 页脚部分 | themes.css | 主题 | |
| nav | 主导航 | columns.css | 专栏 | |
| subnav | 二级导航 | font.css | 文字、字体 | |
| menu | 菜单 | forms.css | 表单 | |
| submenu | 子菜单 | mend.css | 补丁 | |
| sideBar | 侧栏 | print.css | 打印 | |
| sidebar_a,#sidebar_b | 左边栏或右边栏 | |||
| main | 页面主体 | |||
| tag | 标签 | |||
| msg#message | 提示信息 | |||
| tips | 小技巧 | |||
| vote | 投票 | |||
| friendlink | 友情连接 | |||
| title | 标题 | |||
| summary | 摘要 | |||
| loginbar | 登录条 | |||
| searchInput | 搜索输入框 | |||
| hot | 热门热点 | |||
| search | 搜索 | |||
| search_output | 搜索输出和搜索结果相似 | |||
| searchBar | 搜索条 | |||
| search_results | 搜索结果 | |||
| copyright | 版权信息 | |||
| branding | 商标 | |||
| logo | 网站LOGO标志 | |||
| siteinfo | 网站信息 | |||
| siteinfoLegal | 法律声明 | |||
| siteinfoCredits | 信誉 | |||
| joinus | 加入我们 | |||
| partner | 合作伙伴 | |||
| service | 服务 | |||
| regsiter | 注册 | |||
| arr/arrow | 箭头 | |||
| guild | 指南 | |||
| sitemap | 网站地图 | |||
| list | 列表 | |||
| homepage | 首页 | |||
| subpage | 二级页面子页面 | |||
| tool,#toolbar | 工具条 | |||
| drop | 下拉 | |||
| dorpmenu | 下拉菜单 | |||
| status | 状态 | |||
| scroll | 滚动 | |||
| .tab | 标签页 | |||
| .left.right.center | 居左、中、右 | |||
| .news | 新闻 | |||
| .download | 下载 | |||
| .banner | 广告条(顶部广告条) |
传统方式
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
