css简单小知识

 

一.css盒子模型

1、属性：外边距（margin）、边框（border）、内边距（padding）和内容（content）。

2.种类：IE盒子模型和标准模型两种。

 

 

标准模型：box-sizing:content-box;

IE模型：box-sizing:border-box;

3.笔记：

（1）内边距padding是内容区和边框border之间的区域，元素盒在页面上占据的总宽度是左边的外边缘到右边的外边缘之间的距离。

（2）使用width和height属性可以设置块级元素或内嵌可替换元素的大小。

（3）外边距margin是围绕在元素边框之外的可选区域。正常文档中的相邻块级元素的垂直外边距将会重合，即，相邻的两个块级元素之间的空白将会是两个元素的外边距中较大的那一个，而不是两个外边距的和。

（4）边框border是围绕着元素内容区和padding区画的一条线。内边距padding是元素的内容区和边框之间的可选区域。padding不允许有负值。与margin不同，padding是不会重合的。

（部分来源：https://www.cnblogs.com/zhangjiabin/p/7101747.html）

 

 

 

二.float

1.杂记

（1）父元素浮动，子元素继承互动属性；

（2）使用float，块元素变成水平排列而不是独占一行；

（3）左浮动元素按正序排列，右浮动按倒序排列；

（4）float引用：文字环绕图片，左环绕：float：left；右环绕： float：right；

 

2.浮动的副作用：

（1）脱离文档流：给元素设置浮动属性，该元素会脱离文档流进行排列布局（但是依然占据文档流的空间）；

（2）块状元素，会钻进浮动元素的下面，被浮动元素所覆盖；

（3）浮动元素的父元素坍缩。

 

解决浮动的副作用方法：

1.手动给父元素设置高度；

2.通过clear清除内部和外部浮动；

3.给父元素添加overfloat属性并结合zoom：1使用；

4.给父元素添加浮动；

５.伪元素ａｆｔｅｒ清除浮动。

背景：

 

background-color：设置元素的背景颜色；（包括内边距和边框，不包含外边距）

background-image：把图像设置为背景；（包括内边距和边框，不包含外边距）

background-position：设置背景图像起始位置；（相对于容器，只设置一个关键字默认为居中）

background-attachment：背景图像是否固定（fixed）或随着页面的其余部分滚动（scroll）；

background-repeat:背景图像是否重复（重复又分为横向重复、纵向重复和横纵都重复）。

background：简写属性，不分前后。

列表：

list-style-type:设置列表项标志的类型；（无序列表和有序列表）

list-style-image:将图像设置为列表项标志；（既设置类型又设置标志，图像会覆盖原本类型）

list-style-position:设置列表项标志的位置；（inside&outside）

list-style:简写属性，不分前后。