CSS盒模型和浮动

盒模型

外边距：margin

居中条件：一定要有宽

行标签转块标签：display:inline;

• 1个参数四边边框都设置
• 2个参数，第一个参数代表上下，第二个参数代表左右
• 3个参数，第一个参数上，第二个参数左右，第三个参数下
• 4个参数，上，右，下，左

内边距：padding

• 参数与margin一致

标准盒模型：div宽=内容的宽

怪异盒模型：div宽=内容的宽+线宽+内边距

标准盒模型转怪异盒模型：box-sizing:border-box;

在html中回车与多个空格连在一块也算一个空格

空格也有像素可以在父盒子上设置font-size:0；去除像素大小

透明：

• 透明度：opacity:0~1;(所有的内容都透明)
• 透明色：background-color:transparent；(谁的颜色设置谁就透明)
• 透明度：background-color:rgba(0-255,0~255,0-255,0-1);(颜色透明度)

鼠标的样式：

• 手型：hand
• 手型：pointer（一般使用这种手型样式）
• 十字型：crosshair
• 移动到文本上的效果：text
• 等待的效果：wait
• 默认：default
• 向右的箭头：e-resize
• 向右上的箭头：ne-resize
• 向上的箭头：n-resize
• 向左上的箭头：nw-resize
• 向左的箭头：w-resize
• 向左下的箭头sw-resize
• 向下的箭头s-resize
• 向右下的箭头：se-resize
• 自动：auto

溢出：overflow

• 溢出隐藏：hidden
• 滚动条，右，下两条都加：scroll
• 自动选择添加右或下滚动条：auto
• 默认溢出显示：visible

隐藏：display:none

显示：display:block

有隐藏时block才是显示的意思

css浮动

文档流：包含元素的布局宽高背景颜色

文本流：包含文本元素的内容

浮动:float

• 左侧浮动 left ；
• 右侧浮动 right ；
• 默认值元素不浮动 none；

左浮动不脱离文本流脱离文档流

右浮动即脱离文本流又脱离文档流

浮动带来的问题：

对自身有影响都脱离文档流

对兄弟改变了布局

对父级造成了坍塌

清浮动：

• 给父容器设置高（不推荐，不会适应窗口大小）

• 给使用浮动元素后面添加空的块级元素：clear:both;

  • 清除浮动:clear

    • 左侧不允许浮动 left ;

    • 右侧不允许浮动 right ;

    • 左右两侧均不允许浮动 both;

    • 默认值允许两侧浮动 none;

• after伪类清浮动；在浮动元素的父级上清除浮动

	父容器::after{

  		content: "";

  		display: block;

  		clear: both;

	}

• 在父容器上添加溢出隐藏：overflow:hidden（不推荐）