CSS框模型，浮动，定位以及其他属性

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、BFC和IFC
BFC(Block formatting context)：块级格式化上下文。
触发BFC环境：①触发（声明）②overflow：hidden（在父级元素里边定义）

IFC(inline formatting context)：即行内格式化上下文。

overflow: hidden;
这里设置触发BFC环境，这样在用里边有块元素用了浮动或绝对定位的时候，脱离文档流的时候，也会把他正确的框起来，下边会有正确的格式显示

5、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>
-----------------------------------------------------------------
☆这些属性都可以在API里边CSS 参考手册：CSS属性

转载于:https://www.cnblogs.com/chenyuanqiu2008/p/5463983.html

CSS框模型，浮动，定位以及其他属性相关推荐

css框模型、定位、浮动
一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的 ...
div固定大小文字溢出自动缩小_CSS样式更改——框模型、定位、浮动、溢出
前言上篇文章主要介绍了CSS样式更改篇中的列表.表格和轮廓,这篇文章主要介绍CSS样式更改中框模型.定位.浮动.溢出基础知识. 1.框模型Border Model 从上图可以得知,如果把一个网页比作 ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
1、CSS 框模型概述（盒模型）
CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. CSS 框模型概述不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的 ...
CSS 框模型元素框处理元素内容、内边距、边框和外边距的方式
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的 ...
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
CSS知识点整理(2):框模型，定位
1. 框模型:Box Model 规定了元素处理元素框处理元素内容.外边距.边框.内边距的方式. 2. 当边距给定的值可以小于4个.CSS定义了一些规则.处理这中情况: 如果缺少左外边距的值,则使用 ...
CSS 框模型( Box module )
框和布局在 KB005: CSS 层叠中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

CSS框模型，浮动，定位以及其他属性

CSS框模型，浮动，定位以及其他属性相关推荐

最新文章

热门文章