盒模型
外边距: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(不推荐)