css整理-05 边框,背景和浮动,定位
边框
样式:border-style
hidden, dotted, dashed, solid , double, groove, ridge, inset, outset
- 最不可预测的是
double
,这都是由用户代理决定的 - 可以每边设置不同样式
宽度
颜色
简写
- 当三个一起简写的时候,没有顺序
背景
背景图片:background-image
- 背景默认是不继承的;但可以使用
background-image: inherit;
来继承
重复: background-repeat
repeat-x, repeat-y, no-repeat
位置: background-position
- 不能超过两个关键字,一个水平方向,一个垂直方向,没有顺序
- 如果使用数值/百分数的话为水平和垂直顺序
- 如果只有一个,默认另一个为
ccenter
关联: background-attachment
scroll,fixed
简写: background
|background-color|background-image|background-repeat|background-attachment|brackground-position|
- 没有顺序限制,不过
background-position
的两个值必须要在一起
浮动
浮动元素
- 会以某种方式将浮动元素从文档的正常流中删除,不过它还是对文档的其余部分有影响
- 一个元素浮动的时候,其他元素会环绕该元素
- 浮动元素周围的外边距不会合并
浮动的内幕
- 浮动元素的包含框就是离其最近的块级祖先元素
- 浮动元素会生成一个块级框,而不论这个元素本身是什么
- 浮动元素不能超过其包含框的边界;除了设置margin为负值之外
- 浮动元素的浮动方向边界必须是其包含框中之前出现的浮动元素的边界或是包含框边界;除非后出现的浮动元素顶部再先出现浮动元素的底端
- 浮动元素的顶端不能比之前出现的浮动元素的顶端高
- 如果浮动元素在其包含框之前有其他元素,浮动元素的顶端不能比包含该元素所生成框更高
清除: clear
- 保证元素左右边界不接触浮动元素
- 清除区域是在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围
定位
类型
static
:元素框正常生成relative
:元素框偏移某个距离,原本占用的控件仍保留absolute
:元素框从文档流中完全删除,相对其包含块定位,不保留原来占用的空间fixed
:表现同上,不过其包含框是视窗本身;
包含块
- 根元素的包含块由用户代理建立
- 非根元素,其
position
是relative, static
,包含块则由最近的块级框,表单元格或行内祖先框的内容边界构成 - 非根元素,其
position
是absolute
,包含块设置为最近的position
不是static(默认)
的祖先元素
偏移属性
- 对于设置
relative, position, fixed
的元素有效
剪切
clip: react(top,right,bottom,left)
- 保留其原来的长宽占位等特性
非替换元素的放置和大小
- 绝对定位居中:
#parent{
width: 100px;
height: 100px;
position: relative;
}
#child{
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
替换元素的放置和大小
- 与非替换元素不同,替换元素有固有的高度和宽度,除非特别设置,不然其大小不会改变
css整理-05 边框,背景和浮动,定位的更多相关文章
- CSS中的三种基本的定位机制(普通流、定位、浮动)
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
- CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)
一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- CSS定位——浮动定位
CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多 ...
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- css定位之浮动定位
浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right 这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...
随机推荐
- oracle触发器,一个表新增、修改的同时同步另一张表
oracle创建触发器,把本地新增.修改数据过程同步到另一个服务器上去. 如果是本地,加数据库名即可.如果是远程服务器,不是一台机器,做一个db_link操作即可. ----------------- ...
- 使用iScroll时,input等不能输入内容的解决方法(share)
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- supersr--NSURLSessionConfiguration-下载进度
//// ViewController.m// 下载进度 // // Created by Super on 14/7/4. // Copyright (c) 2014年 iOS. All r ...
- Javascript 封装方法
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...
- python基础——偏函数
python基础——偏函数 Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函 ...
- xml配置文件
xml文件的层级结构 configuration 配置 properties 属性 settings 设置 typeAliases 类型命名 typeHa ...
- Hadoop-2.X HA模式下的FSImage和EditsLog合并过程
补充了一下NameNode启动过程中有关FSImage与EditsLog的相关知识. 一.什么是FSImage和EditsLog 我们知道HDFS是一个分布式文件存储系统,文件分布式存储在多个Data ...
- Python中读取csv文件内容方法
gg 224@126.com 85 男 dd 123@126.com 52 女 fgf 125@126.com 23 女 csv文件内容如上图,首先导入csv包,调用csv中的方法reader()创建 ...
- PHP中array_merge和array相加的区别分析
今天处理一个这样的问题:如何获取字符键名相同值不同的两个数组值集合,用array_merge和数组相加都不可行,让我认真比较了下PHP中array_merge和array相加的区别 首先来看看键名是s ...
- Linux Shell 高级编程技巧4----几个常用的shell脚本例子
4.几个常用的shell脚本例子 4.0.在写脚本(同样适用在编程的时候),最好写好完善的注释 4.1.kill_processes.sh(一个杀死进程的脚本) #!/bin/bash c ...