CSS定位
CSS定位
float浮动属性
浮动:css样式表中用float来表示,它有
属性值 | 描述 |
---|---|
none | 表示不浮动,所有之前讲解的HTML标签默认不浮动 |
left | 左浮动 |
right | 右浮动 |
inherit | 继承父元素的浮动属性 |
常见作用
浮动实现布局
文字环绕
出现问题
父盒子高度塌陷
清除浮动的方式
父盒子设置固定高度
内墙法
伪元素清除法
overflow:hidden
伪元素清除法
p::after{
/*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
content:'...'
}
overflow:hidden
属性值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,并且其余内容不可见 |
scroll | 内容会被修剪,浏览器会显示滚动条以便查看其余内容 |
auto | 由浏览器定夺,如果内容被修剪,就会显示滚动条 |
inherit | 规定从父元素继承overflow属性的值 |
Block Formtting Context
BFC区域一条规则:计算BFC(块级盒子)的高度时,浮动元素也参与计算
BFC布局规则
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算
BFC产生条件
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
CSS定位
css position属性用于指定一个元素在文档中的定位方式。top
,right
,bottom
,left
属性则决定了该元素的最终位置。
属性值 | 描述 |
---|---|
static | 默认。静态定位, 指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top , right , bottom , left 和 z-index 属性无效。 |
relative | 相对定位。 元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白) |
absolute | 绝对定位。不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并 |
fixed | 固定定位。 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变 |
relative
1.不脱离文档流
参考点
以元类的位置作为参考点,可以进行top,left,right,bottom进行位移
y轴是相反的
absolute
1.脱离文档流
2.层级提高
参考点
static:
无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面左上角进行定位子绝父相
fixed
1.脱离文档
参考点
html左上角为参考点
z-index
- z-index只应用在定位的元素,默认z-index:auto;
- z-index取值为整数,数值越大,它的层级越高
- 如果元素设置了定位,没有设置z-index,那么谁写在最后面的,表示谁的层级越高。
- 从父现象。通常布局方案我们采用
子绝父相
,比较的是父元素的z-index值,哪个父元素的z-index值越大,表示子元素的层级越高。
background
属性 | 属性值 | 描述 | |||||
---|---|---|---|---|---|---|---|
background-color | 单词颜色表示法、rgb、十六进制 | 设置元素的背景颜色 | |||||
background-image | url(‘http://www.aaa.com/1.png‘) | 给一个元素设置一个或多个背景图像 | |||||
background-position | top,left,center,百分比,px, | 为每一个背景图片设置初始位置 | |||||
background-repeat | repeat-x | repeat-y | repeat | spance | round | no-repeat | 定义背景图像的重复方式。 背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。 |
background-size
背景图比例
CSS Sprite雪碧图技术
使用雪碧图的使用场景
静态图片,不随用户信息的变化而变化
小图片,图片容量比较小(2~3k)
加载量比较大
一些大图不建议制作雪碧图
优点
有效的减少HTTP请求数量
加速内容显示
每次请求一次,就会和服务器连接一次,建立连接是需要额外的时间开销的。
雪碧图的实现原理
它通过css的背景属性的backrground-position的来控制雪碧图的显示。
控制一个层,可显示的区域范围大消息,通过一个窗口,进行背景图的移动。
border-radius
圆角属性
画圆
border-radius: 50%;
圆环
border: 3px solid #FC0107;
border-radius: 50%;
box-shadow 阴影
语法:
box-shadow: h-shadow v-shadow blur color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
布局
行内元素水平居中
1
text-align:center
line-height:盒子高度
2
display:table-cell 转为单元格
vertical-align:middle
块级元素水平居中
1
position:absolute
margin:auto
left:0
right:0
top:0
bottom:0
2
父
display:table-cell
vertical-align:middle
text-align:center
子
display:inline-block
3
position:absolution
top:50%
left:50%
margin-left:-50px
margin-top:-50px
原文地址:https://www.cnblogs.com/zx125/p/11523776.html
- 设计缺陷将导致亚马逊Echo变身成为监听设备
- Unity引擎与C#脚本简介
- Redis分布式缓存系统Lua脚本食用指引
- 基于复杂方案OWSAP CsrfGuard的CSRF安全解决方案(适配nginx + DWR)
- XMLHttpRequest对象如何兼容各浏览器使用?
- Java使用wsdl生成axis版本webservice服务端/客户端代码
- Java微信支付快速入门&工具类
- redis集群 - linux安装与配置笔记
- Apache RocketMQ 4.0.0 - linux安装与配置笔记
- 数据库连接池-tomcat-jdbc食用笔记
- Java.NIO编程一览笔录
- Hbase 学习(三)Coprocessors
- Spring4+Spring MVC+MyBatis整合思路
- Zookeeper ACL权限配置及zkclient示例
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 挑苹果中的行为参数化思想
- 详解MapReduce(Spark和MapReduce对比铺垫篇)
- 使用 OWIN 作为 ASP.NET Web API 的宿主
- 二进制源码和补码的基础解释
- Spark推荐系统实践
- Xamarin Studio 比 Visual Studio 2013 好用的三个功能
- Scss (Sass) 语法简介
- 如何写一个简单的node.js c++扩展
- 给 c# 程序员的十个重要提示
- 子序列问题
- Spark实现推荐系统中的相似度算法
- iOS 中的 CFBundleShortVersionString 与 CFBundleVersion
- 买卖股票问题合集
- 服务出错优先考虑及排查手册(待续整理)
- Android 沉浸式全屏