css基础②(框模型以及position)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css基础②(框模型以及position)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2863字，纯文字阅读大概需要5分钟。
内容图文
1、CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
* {
margin: 0;
padding: 0;
}
padding（10px,10px,10px,10px）
四个值：上右下左顺时针方向
三个值：上，左右，下
两个值：上下，左右
一个值：四个方向
margin可以有负值
padding没有负值
百分比也可以，在响应式布局里常用
rem单位可以自适应浏览器
边框：宽度，样式，颜色
透明：transparent
外边距合并：在上下都有外边距的时候，比如上一个下边距是100，下一个块的上边距是200，只会显示200，显示为较大那个
2、CSS display:属性
display:属性规定元素应该生成的框的类型。
none 不显示。
block 转换为块级元素，此元素前后会带有换行符。
inline 行级元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
可以把块级元素转换为行内元素，也可以反过来，有时候解析错误，不知道该显示那种属性，慎用
none常用，不显示某些内容
3、
CSS定位机制：
普通流：也叫文档流
浮动：浮动会脱离了标准文档流，有好处也有坏处，可以转换为BFC环境
绝对定位:脱离了文档流
脱离文档流，会浮于上层！
浮动：float
left 左浮动。 （可以并排到一行，紧挨着横向排列）
right 右浮动。
none 元素不浮动
inherit 规定应该从父元素继承 float 属性的值 （忽略）
清除浮动：clear
clear：both清除两边的浮动
4、 CSS 定位：position 属性（四种）
static ：静态定位，无定位
relative ：相对定位，相对于原来位置偏移，即相对于本身之前的位置
absolute ：绝对定位，相对最初的包含块进行定位，最近的那个定位元素，脱离文档流。
绝对定位，如果没有设置初始包含块，会相对于body部分
只有两个div中有三个div层叠在上边的时候才会用到
fixed ：固定定位，也会脱离文档流，针对屏幕进行定位。
小广告都是用的小广告
右边进度条在拉动的时候，还是显示在那个位置。
☆CSS定位属性
溢出属性：overflow: 默认会显示在边框外边
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 始终有进度条
auto 溢出出现进度条
垂直对齐方式：vertical-align 设置元素的垂直对齐方式。
堆叠顺序：z-index 设置元素的堆叠顺序。
透明度：opacity:0.0-1.0,在设置
背景透明：background：rgba,（0,0,0,0.5） a是0-1，模糊效果
写在hover效果里边
div {
background: url("京东LOGO.png");
width: 168px;
height: 81px;
}
div:hover{
opacity: 0.5;
}
鼠标样式：
cursor：move
可见：
visibility:hidden：即使不可见，仍然会占用空间
display：none，文档和空间都不存在，类似脱离了文档流，不会占用空间
国内设计喜欢用px，外国的喜欢用em和rem
IE无法调整使用px作为单位的字体大小
火狐浏览器能够调整px和em,rem但是90%中国网民使用IE，或者IE内核
em：相对body继承，换算麻烦
rem：不会继承，相对根元素HTML
中国：
手机端：px
PC端：rem，自适应屏幕大小
现在自适应各种屏幕大小，现在可以用autoSize.js（腾讯的）
1em = 16px;
1rem = 16px;
最大小宽度高度：
max-height
☆堆叠顺序：z-index 属性设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
靠上，左右居中
margin: 0 auto;
font-style: oblique;字体倾斜
font-weight: bolder;字体加粗
☆引用外部文件：引用外部文件 ./ 代表上一级（父级目录） ../代表上两级
☆导航
无序列表，去掉小圆点，浮动横向排列，
无序列表的行高设置为导航的 高度，设置鼠标移动效果
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
nav{
width: 1000px;
height: 50px;
background: greenyellow;
}
ul{
margin: 0;
padding: 0;
}
li{
/*border: 1px solid red;*/
list-style: none;
float: left;
/*margin: 20px;*/
padding: 0 20px;
line-height: 50px;
}
li:hover{
background: royalblue;
}
</style>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>家电</li>
<li>母婴</li>
<li>产品</li>
<li>联系我们</li>
</ul>
</nav>
</body>
5、BFC和IFC
BFC(Block formatting context)：块级格式化上下文。
触发BFC环境：①触发（声明）②overflow：hidden（在父级元素里边定义）
IFC(inline formatting context)：即行内格式化上下文。
overflow: hidden;
这里设置触发BFC环境，这样在用里边有块元素用了浮动或绝对定位的时候，脱离文档流的时候，也会把他正确的框起来，下边会有正确的格式显示
原文：http://www.cnblogs.com/VCandy/p/5429257.html
内容总结
以上是互联网集市为您收集整理的css基础②(框模型以及position)全部内容，希望文章能够帮你解决css基础②(框模型以及position)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。