HTML5-10(CSS布局)

简介: HTML5-10(CSS布局)

一.简述CSS布局



  • 1.默认情况下,所有的网页标签都在标准流布局
    从上到下,从左到右
  • 2.脱离标准流的方法有
  • float属性
  • position属性 和 leftrighttopbottom属性


二.CSS脱离标准流


  • 1.CSS布局– float属性,常用取值有
  • left:脱离标准流,浮动在父标签的最左边
  • right:脱离标准流,浮动在父标签的最右边


image.png


结论:任何一种标签脱离了标准流,就会变成 行内-块级 标签


  • 2.position (子标签相对于父标签的一个定位)


看不清的就百度搜


image.png

实例:记住四个字子绝父相


  • 1.absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
  • 2.relative 生成相对定位的元素,相对于其正常位置进行定位。

image.png

3.fixed生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


image.png


目录
相关文章
|
13天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
36 1
[HTML、CSS]细节与使用经验
|
15天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
28 1
[HTML、CSS]知识点
|
9天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
9天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
|
6天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
33 1
|
11天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
22 3
|
21天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
72 6
|
17天前
|
前端开发
HTML 布局1
网页布局对网站外观至关重要。推荐使用 `&lt;div&gt;` 元素进行布局,尽管 `&lt;table&gt;` 也可行但不建议使用。示例代码展示了如何用 `&lt;div&gt;` 创建多列布局,包括头部、菜单、内容和底部区域。
|
16天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】