摘要: 定位 定义 position属性指定了元素的定位类型 | 值 | 描述 | | | | | relative | 相对定位 | | absolute | 绝对定位 | | fixed | 固定定位 | 其中,绝对定位和固定定位会脱离文档流 设置定位之后:可以使用四个方向值进行调整位置:left,to 阅读全文
posted @ 2023-03-25 11:14 土著古 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 清除浮动 浮动副作用 当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动. 浮动元素会造成父元素高度塌陷 后续元素会受到影响 <div class="container"> <div class="box"></div> <div class="box"></div> <div cla 阅读全文
posted @ 2023-03-23 21:51 土著古 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 浮动 浮动的定义 float属性定义元素在哪个方向浮动,任何元素都可以浮动. | 值 | 描述 | | | | | left | 元素向左浮动 | | right | 元素向右浮动 | 浮动的原理 浮动以后使元素脱离了文档流 浮动只有左右浮动,没有上线浮动 元素向左浮动 脱离文档流之后,元素相当于页 阅读全文
posted @ 2023-03-23 20:56 土著古 阅读(17) 评论(0) 推荐(0) 编辑
摘要: 文档流 文档流是文档中可显示对象在排列时所占用的位置/空间 例如:块元素自上而下摆放,内联元素,从左到右摆放标准流里面的限制非常多,导致很多页面效果无法实现 高矮不齐,底边对齐 空白折叠现象 无论多少个空格,换行,tab,都会折叠为一个空格 如果我们想让img标签之间没有空隙,必须紧密连接 文档流产 阅读全文
posted @ 2023-03-23 20:26 土著古 阅读(14) 评论(0) 推荐(0) 编辑
摘要: 弹性盒子模型(flex box) 定义 弹性盒子是CSS3的一种新的布局模式 CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间 CSS3弹性盒内容 弹 阅读全文
posted @ 2023-03-22 22:30 土著古 阅读(96) 评论(0) 推荐(0) 编辑
摘要: CSS盒子模型(Box Model) 概念 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括: 外边距(margin),边框(border),内边距(padding),和实际内容(conte 阅读全文
posted @ 2023-03-21 21:38 土著古 阅读(20) 评论(0) 推荐(0) 编辑
摘要: 关系选择器 关系选择器分类 后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器 后代选择器 定义 选择所有被E元素包含的F元素,中间用空格隔开 语法 E F{} <ul> <li>宝马</li> <li>奔驰</li></ul><ol> <li>奥迪</li></ol>ul li{ color: 阅读全文
posted @ 2023-03-21 21:05 土著古 阅读(30) 评论(0) 推荐(0) 编辑
摘要: 表格属性 使用css可以使HTML表格更美观 表格边框 指定CSS表格边框,使用border属性 table,td{ border:1px solid black;} 折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 table {border-collap 阅读全文
posted @ 2023-03-20 20:08 土著古 阅读(99) 评论(0) 推荐(0) 编辑
摘要: 文本属性 text-align 指定元素文本的水平对齐方式 值描述 left 文本居左排列,默认值 right 把文本排列到右边 center 把文本排列到中间 h1{text-align:center}h2{text-align:left}h3{text-align:right} text-dec 阅读全文
posted @ 2023-03-20 19:45 土著古 阅读(72) 评论(0) 推荐(0) 编辑
摘要: 背景属性 CSS背景属性主要有以下几个 属性描述 background-color 设置背景颜色 background-image 设置背景图片 background-position 设置背景图片显示位置 background-repeat 设置背景图片如何填充 background-size 设 阅读全文
posted @ 2023-03-19 22:43 土著古 阅读(76) 评论(0) 推荐(0) 编辑