9.06学习笔记

盒模型

从内到外：content < padding < border < margin

 

 

border(边框)

同时设置四条边：

border-width:2px; /* 边框宽度 */

border-style:solid;

/* solid(单实线),double(双实线),dashed(虚线),dotted(点线)*/

border-color:white; /* 边框颜色默认和文字颜色保持一致*/

border:2px solid white; /* 组合写法(注意顺序)*/

四条边分开设置:

border-top:2px solid white;

border-left:2px solid white;

border-right:2px solid white;

border-bottom:2px solid white;

 

宽度组合写法：

border-width: 2px; /*四条边*/

border-width: 1px 2px; /*上下1px,左右2px*/

border-width: 1px 2px 3px; /*上1px,左右2px,下3px*/

border-width: 1px 2px 3px 4px; /*上1px,右2px,下3px,左4px*/

 

 

 

 

outline(轮廓线)

当某个元素获得焦点的时候会出现轮廓线,最典型的就是文本框

outline:2px solid red;

outline:none; （ 不要轮廓线）

 

 

outline与border的区别是什么？

1. outline不占页面空间,border占空间

2. outline不能四条边拆开设置

 

标准盒模型与怪异盒模型(IE盒模型)的区别

标准:width和height是 不含border,padding的

怪异:width和height是包含border和padding

 

box-sizing(主流处理方案)

box-sizing:content-box; /* 默认情况 */

box-sizing:border-box; /* border和padding被包含在width,height之中*/

div{

width:100px;

height:100px;

box-sizing:border-box;

padding:10px;

}

最终在页面上,width和height会自动被减成 80 * 80

 

reset.css

通常会将通用的样式,比如去掉列表的点,去掉外边距,统一字体,统一字号等等。

这样可以比较好的兼容各浏览器,自己设置的尺寸不会受到影响

 

float

浮动会使元素脱离文档流,按照指定方向发生移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

float:left; /* 左浮动 */

float:right; /* 右浮动 */

float:none; /* 不浮动 */

 

特性:

1. 使块元素在一行显示

2. 脱离文档流

3. 提升层级

4. 内嵌元素自动转换为块元素

5. 不设置宽度的时,可以适应内容的宽度

 

清除浮动

1. clear:both; /*在浮动元素的最后加一个div设置clear*/

2. 父标签没有高度,子标签设置了浮动,此时父标签的高度就消失了

给父标签设置：overflow:hidden;

 

定位

position: static; /* 静态:默认值 */

position:relative; /* 相对定位 */

position:absolute; /* 绝对定位 */

position: fixed; /* 固定定位 */

 

relative:提升层级,可以使用left,right,top,bottom从原始位置进行偏移

absolute:提升层级,也可以使用left,right,top,bottom从已经定位的父元素

左上角进行偏移,如果父元素没有定位,就从html(页面左上角)偏移

脱离文档流

fixed:与绝对定位类似,区别在于始终相对浏览器窗口进行定位

 

 

 

z-index       （z-index: number定位层级;）

z-index:3;

1. 层级必须加给定位元素

2. 数值越大层级越高

3. 层级要在同级元素之间作比较

 

overflow

overflow: visible; /*内容溢出就溢出,内容会显示在元素外面 */

overflow: hidden; /*溢出的部分被隐藏*/

overflow: scroll; /*不论内容是否放得下,都会显示滚动条的*/

overflow: auto; /*内容放得下不出现滚动条,内容放不下出现滚动条*/

 

vertical-align(垂直对齐方式)

vertical-align:top; /* 顶部对齐 */

vertical-align:middle; /* 垂直居中 */

vertical-align:bottom; /* 底部对齐 */

vertical-align:baseline;/* 基线对齐(默认) */

 

 

特性：

1. 块元素用不了的

2. 给要垂直对齐的那个元素添加,而text-align是给父元素添加

 

display属性

以什么形态来显示当前元素

div{display:inline;} /*当成行内元素*/

b{display:block;} /*当成块元素 */

div{display:inline-block;} /*当成行内块元素(在一行且能设置宽高)*/

div{display:table;} /*当成表格*/

div{display:table-cell;} /*当成td/th*/

div{display:none;} /*隐藏当前元素*/

 

 

 ==

垂直且水平居中的四种方法

  

  

 

    

=======

CSS的清零

reset.css

    

 

  

 

 

转载于:https://www.cnblogs.com/xieyankeai/p/9600414.html